SlideShare a Scribd company logo
文系デザイナーでも大丈夫!

    レスポンシブWebサイトを          で作ってみよう




                              November 3,2012
                              WordCamp Osaka
                                     額賀 順子




12年11月3日土曜日
ようこそWordCamp Osaka 2012 へ




12年11月3日土曜日
自己紹介
                          額賀 順子 | ヌカガジュンコ

                          フリーランスのWebディレクター/デザイナー。
                          つまり1人で大概の事はやっちゃう人。

                          Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く
                          制作を手がけています。


                          綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん
                          な効果が欲しいのか。プランニングを重要視します。
                          制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ
                          ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ
                          クター、セミナー講師も兼務。
                          Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事業な
   Twitter @nukaga        ど、積極的に人と関わる活動を行っております。
   Facebook nukagajunko
                          インターネット大好き!
                          WordCamp Osaka 2012 副実行委員長をさせて
                          頂いています。



12年11月3日土曜日
本日のアジェンダ


  ✤   レスポンシブWebデザインとは?

  ✤   レスポンシブWebデザインの考え方

  ✤   実践編

  ✤   便利ツール




12年11月3日土曜日
レスポンシブWebデザインとは?
              レスポンシブWebデザインとは?
              WordPress+レスポンシブWebデザイン実例紹介




12年11月3日土曜日
レスポンシブWebデザインとは

   画像解像度(ユーザーの見ている環境・デバイス)
   にあわせて見やすいように表示を切り替えるデザイン




         HTMLはひとつ




12年11月3日土曜日
レスポンシブWebデザインとは


          ワンソース型            マルチソース型      プログラム変換型


              HTML                       HTML   HTML




                           HTML   HTML
       CSS           CSS



                                         CSS      CSS
                           CSS    CSS




12年11月3日土曜日
レスポンシブWebデザインとは




         HTMLはひとつ




              実現のポイントはCSSにあります

                           PHPとか関係ないよ




12年11月3日土曜日
レスポンシブWebデザインとは



    考え方がとても大事!



      PC、モバイルを振り分けるという考え方ではありません

      PC用デザインをモバイル用に変換するという考え方では
      ありません


                これをわかっていないと苦しみます




12年11月3日土曜日
レスポンシブWebデザインとは




          反対に言うと考え方さえわかっていたらやみくもに
              突っ込んでいくよりだいぶ楽に組めます




12年11月3日土曜日
メリット


      ・ワンソースなので、HTML1カ所修正したら全てに反映される
       →分岐型と違って何カ所も更新する必要が無い

      ・CSSだけで実装できる
       →WordPressでもCSSの調整だけで対応できる

      ・1つのHTML(URL)で対応できるのでSEO的に有効




12年11月3日土曜日
デメリット



      ・サイトが重くなる可能性がある

      ・開発に時間がかかる可能性がある

      ・表示の最適化であって、
       デバイス(利用シーン)への最適化ではない




12年11月3日土曜日
WordPressとレスポンシブWebデザイン

   WordPress 3.2からのデフォルトテーマ          レスポンシブWebデザイン対応

   Twenty Eleven




                     http://twentyelevendemo.wordpress.com/



12年11月3日土曜日
WordPressでレスポンシブ 事例1

        budori       http://www.budori.co.jp/




12年11月3日土曜日
WordPressでレスポンシブ 事例2


        loftwork.com   http://www.loftwork.com/




12年11月3日土曜日
WordPressでレスポンシブ 事例3


        Acru(アクリュ)       http://acru.jp/




12年11月3日土曜日
構築ポイント

        Acruのサイトは Twenty Elevenを親テーマにして構築してます

        WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能
        にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
        もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな
        り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの
        知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え
        ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。
        そのため、親テーマがアップデートされても子テーマの変更は保持されます。




               http://wpdocs.sourceforge.jp/子テーマ




12年11月3日土曜日
レスポンシブWebデザインの考え方
              レスポンシブWebデザインの考え方
              ワークフロー




12年11月3日土曜日
レスポンシブWebデザインの考え方


   モバイルファースト


                                  パソコン

                        タブレット

              スマートフォン



      320px 480px 600px 768px 960px 1200px∼



12年11月3日土曜日
レスポンシブWebデザインの考え方


         モバイルファーストって何?
         ルーク・ウロブルスキーさんの提唱したコンセプト
         (プロダクトの戦略や製品のデザインのコンサルタント会社
         「LukeW Ideation & Design」のデザイナー兼設立者 http://www.lukew.com/ )


         WebサイトやWebアプリを開発するうえで、
         まずモバイルから開発してPCに展開していくべきだ
         とする考え方


                             そうしたいけど、それがなかなか難しい




12年11月3日土曜日
レスポンシブWebデザインの考え方



              モバイルファーストによるメリット
   そのサイト(画面)で見せたいものが何かということがはっきりする


               小さい画面で見せる際の優先順位




12年11月3日土曜日
レスポンシブWebデザインの考え方



        ワイヤーフレームが非常に大事


          レイアウトの切り替えパターンを知っておこう!



                                          パソコン

                               タブレット

                  スマートフォン



              320px 480px 600px 768px 960px 1200px∼



12年11月3日土曜日
レスポンシブWebデザインの考え方



 代表的な切り替えパターンその1      代表的な切り替えパターンその2




                              Multi-Device Layout Patterns
                              lukew
                              http://www.lukew.com/ff/entry.asp?1514




12年11月3日土曜日
レスポンシブWebデザインの考え方


  代表的な切り替えパターンその3     代表的な切り替えパターンその4




                               Multi-Device Layout Patterns
                               lukew
                               http://www.lukew.com/ff/entry.asp?1514




12年11月3日土曜日
レスポンシブWebデザインの考え方




                    基本はCSS

              できるだけ%やemなど可変で組みたい。
                  pxを使う場合もある。




12年11月3日土曜日
ワークフロー


               スマートフォン用のカンプデザイン
                タブレット用のカンプデザイン
                パソコン用のカンプデザイン



              そろそろこの考え方やめませんか?
                  何故かというと




12年11月3日土曜日
ワークフロー



              特にスマートフォンやタブレットは画面サイズだけでなく、
               機種ごとの差異があり、全部にPSDでのデザインを
                   きっちり反映させるのは厳しい。




                   PC用のデザインをPSDデータ
       タブレット/スマートフォンはワイヤーフレームで確認




12年11月3日土曜日
ワークフロー


  基本の設計をしっかりしてワイヤーフレームをきっちり書く


              デザイナー・マークアップエンジニアが参加する事が大切




    設計/ワイヤーフレーム         デザイン   モックアップ   実装




12年11月3日土曜日
ワークフロー




                        大事なのは考え方
                        どこを優先的に見せるか

                  コンテンツファースト


              内容ありき




12年11月3日土曜日
実装編
              ブレークポイント
              CSS側記述
              HTML側記述




12年11月3日土曜日
ブレークポイント

  切り替えのポイント                   メジャーブレークポイント


              320px   768px    960px




12年11月3日土曜日
ブレークポイント


                      今回の実装は2ヶ所



              480px    960px




12年11月3日土曜日
メディアクエリーと書き方


              メディアクエリー(Media Queries)って?


          CSS3からの機能
          ユーザーのビューサイズによって読み込むCSSを
          分岐させることができる




12年11月3日土曜日
メディアクエリーと書き方


        CSSソース内に記述する                                                        おすすめ

        @media	
  screen	
  and	
  (max-­‐width:	
  1024px){

        	
  	
  	
  	
  /*	
  タブレット用のスタイル記述	
  */
        }



        HTMLの<head>内に書き込んでCSSを読み込ませる
        <link	
  rel="stylesheet"	
  media="screen	
  and	
  (max-­‐width:	
  
        1024px)"href="tablet.css"	
  />




        CSSの@importに記述する
        @import	
  url("tablet.css")	
  screen	
  and	
  (max-­‐width:	
  1024px)




12年11月3日土曜日
メディアクエリーと書き方




              モバイルのCSSから書いていく方がいいよ




12年11月3日土曜日
メディアクエリーと書き方




                         特にWordPressの場合



              style.css 1つの方がやりやすい




12年11月3日土曜日
HTMLの設定(viewport)




   <meta name="viewport" content="width=device-width">


  「viewportの幅をデバイスのスクリーンの幅に合わせる」




12年11月3日土曜日
HTMLの設定(viewport)


  <meta name="viewport"          一般的に多い設定

  content="width=device-width,
   initial-scale=1.0,
   minimum-scale=1.0,
   maximum-scale=1.0">

                      表示幅をスクリーン幅と一致
                      初期拡大率を等倍
                      最小拡大率を等倍
                      最大拡大率を等倍



12年11月3日土曜日
HTMLの設定(viewport)


  <meta name="viewport"          実際に使った設定
  content="width=device-width,
   initial-scale=1.0,
   minimum-scale=1.0,
   maximum-scale=1.6,
   user-scalable=yes,">
                      最大拡大率を1.6にして、
                      ユーザーさんが画面を拡大できる
                      ようにしました




12年11月3日土曜日
IE8以下の対応について

    JavaScriptを使う

      Respond.js
       https://github.com/scottjehl/Respond
       css3-mediaqueries.js
        http://code.google.com/p/css3-mediaqueries-js/

    CSSを分岐させる
     <!-­‐-­‐[if	
  IE	
  8	
  ]>
     <link	
  rel="stylesheet"	
  type="text/css"	
  href="ie8.css">
     <![endif]-­‐-­‐>




12年11月3日土曜日
IE8以下の対応について


    JavaScriptを使う


      Respond.js
       https://github.com/scottjehl/Respond

                                        Acru(アクリュ) http://acru.jp/




      css3-mediaqueries.js
       http://code.google.com/p/css3-mediaqueries-js/

                     劇団ヌカガ公式サイト http://nukaga-theater.com/




12年11月3日土曜日
実際にあったトラブル


 JavaScriptを使う

              スライド            コンフリクトを起こしました

              カレンダー
              スクロールバー
                              読み込みの順番を
              マウスオーバー
                               変える事で解決
              ギャラリー
              IE8以下メディアクエリー




12年11月3日土曜日
レスポンシブWebデザインにおいての画像の扱い方

   切り替える                                                        画像が各サイズ必要

     CSSで呼び出している画像の場合、メディアクエリーで切
     り替えて呼び出す画像を変える事が可能。

         JavaScriptを使う

     Responsive-Images
     http://filamentgroup.com/lab/
     responsive_images_experimenting_with_context_aware_image_sizing/
     Responsive-Enhance
     https://github.com/joshje/Responsive-Enhance




12年11月3日土曜日
レスポンシブWebデザインにおいての画像の扱い方



              画像が重いという問題に対しては その1

               CSS Sprite
              1枚の画像の中に必要な画像を全部入れ必要に応じて
              表示させる部分を変える手法
              1枚画像を最初に読み込む事によって余分なトラフィックが
              かかるのを防ぐ


                              YouTube




12年11月3日土曜日
レスポンシブWebデザインにおいての画像の扱い方



              画像が重いという問題に対しては その2

              データURIスキーム
              HTMLやCSSに埋め込まれたデータに直接アクセスする
              サーバーにリクエストせずに画像を表示することができる

              .mainbg {
                background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc );
              }


               Data-URI-Convertor
               http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/




12年11月3日土曜日
レスポンシブWebデザインにおいての画像の扱い方



   WordPressの場合ユーザーが画像を更新して行く

   @media only screen and (max-width: 480px)
   {
   .cpost img {
   ! ! max-width: 300px;
   ! ! width: auto;
   ! ! height: auto;
   ! ! }
   }           クラスつけないと全部の画像に反映されちゃうから気をつけてね




12年11月3日土曜日
レスポンシブWebデザインでの文字の扱い方

     解像度によってフォントの大きさの変更が必要となった場合
     ウェブフォントが使いたくなる。
                                  CSS3	
  @font-­‐face




              これからの課題

              フリーの日本語フォントが少ない。重い。
              windowsで見ると読みにくい。




12年11月3日土曜日
レスポンシブWebデザインの向き・不向き

          向いてる
              文字ベースのサイト
              構造が簡単なサイト


              大変

              各ページによって表示を変えたいなど構造が複雑なサイト
              利用シーンによって見せ方を大きく変えたいサイト

                     可能不可能で言ったら可能だけれど負担が大きい




12年11月3日土曜日
便利ツール
              フレームワーク(Framework)
              モックアップ用アイテム
              ギャラリーサイト
              確認用ツール
              スライド用JavaScript
              WordPressテーマの紹介




12年11月3日土曜日
Framework(Twitter Bootstrap)




                       http://twitter.github.com/bootstrap/index.html



12年11月3日土曜日
Framework(Zurb Foundation)




                          http://foundation.zurb.com/


12年11月3日土曜日
便利ツール(モックアップ用アイテム)
    Responsive Design Mock-up Pack




                                      テキスト




                        http://medialoot.com/item/free-responsive-screen-mockup-pack/



12年11月3日土曜日
便利ツール(ギャラリーサイト)

       ギャラリーサイト(国内)


                      http://responsive-jp.com/




       ギャラリーサイト(海外)



                      http://mediaqueri.es/




12年11月3日土曜日
便利ツール


              Responsive.is
               http://responsive.is



              Responsive Design Bookmarklet
                http://responsive.victorcoulon.fr/

              Viewport resizer
                http://responsive.victorcoulon.fr/




12年11月3日土曜日
WordPressレスポンシブテーマ




                       74




12年11月3日土曜日
WordPressレスポンシブテーマ

   SUNSPOT




    テーマダウンロード
   http://wordpress.org/extend/themes/sunspot

    デモ
   http://sunspotdemo.wordpress.com/




12年11月3日土曜日
WordPressレスポンシブテーマ

     Hatch




                 テーマダウンロード
                http://wordpress.org/extend/themes/hatch

                 デモ
                http://devpress.com/demo/hatch/



12年11月3日土曜日
WordPressレスポンシブテーマ


    Origin




       テーマダウンロード                                   デモ
      http://wordpress.org/extend/themes/origin   http://devpress.com/demo/origin/




12年11月3日土曜日
最後に


                 ご清聴ありがとうございました!
                     まだまだ話しきれない
                 WordPressとレスポンシブの関係

              新しいことに挑戦できるのはWebの良いところ
              これからの技術だからこそ挑戦するのは楽しい!


                                 Twitter: @nukaga
               額賀 順子 | ヌカガジュンコ
                                 Facebook: nukagajunko




12年11月3日土曜日

More Related Content

What's hot

簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
 
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
 
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshareWord camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
 
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
Mignon Style
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
Hidetaka Okamoto
 
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
Takahiro Nakahata
 
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
 
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようメニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
 
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
 テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
Hidetaka Okamoto
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
Hidetaka Okamoto
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
Mignon Style
 

What's hot (20)

簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
 
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
 
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshareWord camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
 
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャマークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
 
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でーWP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
 
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
 
WordPressってブログじゃないの?
WordPressってブログじゃないの?WordPressってブログじゃないの?
WordPressってブログじゃないの?
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
ノンプログラマーのためのカンタンWordPressテーマ作成入門 ∼子テーマで WordPress のテーマをつくろう∼
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそう
 
WordBench京都版 _sハンズオン
WordBench京都版 _sハンズオンWordBench京都版 _sハンズオン
WordBench京都版 _sハンズオン
 
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 UnderScoreとbootstrapとsassでword pressのテーマをつくろう UnderScoreとbootstrapとsassでword pressのテーマをつくろう
UnderScoreとbootstrapとsassでword pressのテーマをつくろう
 
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
 
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようメニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
 テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
 
_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門_s + bootstrapで始めるWordPressテーマ開発入門
_s + bootstrapで始めるWordPressテーマ開発入門
 
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
 
Word pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオンWord pressはじめの一歩 テーマ作成ハンズオン
Word pressはじめの一歩 テーマ作成ハンズオン
 
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
 
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
ノンプログラマーのためのカンタンWordPressテーマ作成入門 〜子テーマでテーマ作成&カスタマイズ〜
 

Similar to 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう

レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
Junko Nukaga
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
Yasuhito Yabe
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
Yasuhito Yabe
 
Code Anything
Code AnythingCode Anything
Code Anything
Yoshitaka Kawashima
 
すごいぞ!Google Chrome
すごいぞ!Google Chromeすごいぞ!Google Chrome
すごいぞ!Google Chrome
Eigoro Yamamura
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
 
Movable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamansMovable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamans
Kunihiko Miyanaga
 
Aiming study#6pdf
Aiming study#6pdfAiming study#6pdf
Aiming study#6pdf
Koutaro Chikuba
 
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Komei Otake
 
セプテーニさんでのセミナー
セプテーニさんでのセミナーセプテーニさんでのセミナー
セプテーニさんでのセミナー
Tokusei Noborio
 
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組みとある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
Kei Nakazawa
 
レスポンシブデザインってなに?
レスポンシブデザインってなに?レスポンシブデザインってなに?
レスポンシブデザインってなに?
Yoshinori Kamaishi
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
Ippei Arita
 
About rails 3
About rails 3About rails 3
About rails 3
issei126
 
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
圭輔 大曽根
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
貴寛 益子
 

Similar to 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう (20)

レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪レスポンシブ+α 第12回WordBench大阪
レスポンシブ+α 第12回WordBench大阪
 
Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編Htmlコーディングの効率化 後編
Htmlコーディングの効率化 後編
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたらFlashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
 
レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】レスポンシブWebデザイン【基礎編】
レスポンシブWebデザイン【基礎編】
 
Code Anything
Code AnythingCode Anything
Code Anything
 
すごいぞ!Google Chrome
すごいぞ!Google Chromeすごいぞ!Google Chrome
すごいぞ!Google Chrome
 
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
 
Movable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamansMovable type-seminar-20120411-ideamans
Movable type-seminar-20120411-ideamans
 
Aiming study#6pdf
Aiming study#6pdfAiming study#6pdf
Aiming study#6pdf
 
Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】Fireworks or Photoshop【第3回ゆるふわ勉強会】
Fireworks or Photoshop【第3回ゆるふわ勉強会】
 
Sixapart day-2012-ideamans
Sixapart day-2012-ideamansSixapart day-2012-ideamans
Sixapart day-2012-ideamans
 
セプテーニさんでのセミナー
セプテーニさんでのセミナーセプテーニさんでのセミナー
セプテーニさんでのセミナー
 
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組みとある会社のエンジニアたちのAndroidへのフリーダムな取り組み
とある会社のエンジニアたちのAndroidへのフリーダムな取り組み
 
レスポンシブデザインってなに?
レスポンシブデザインってなに?レスポンシブデザインってなに?
レスポンシブデザインってなに?
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
 
About rails 3
About rails 3About rails 3
About rails 3
 
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
HTML5を用いたセマンティックな文書作成【TechBuzz】第8回HTML5開発技術勉強会 〜先行事例紹介/交流会〜
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門インフォグラフィックス時代のD3.js入門
インフォグラフィックス時代のD3.js入門
 

More from Junko Nukaga

WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へWordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
Junko Nukaga
 
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
Junko Nukaga
 
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
Junko Nukaga
 
WordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeechWordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeech
Junko Nukaga
 
レスポンシブ+フラットデザイン+WordPress
 レスポンシブ+フラットデザイン+WordPress レスポンシブ+フラットデザイン+WordPress
レスポンシブ+フラットデザイン+WordPress
Junko Nukaga
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPress
Junko Nukaga
 
AWSはじめて物語
AWSはじめて物語AWSはじめて物語
AWSはじめて物語
Junko Nukaga
 

More from Junko Nukaga (7)

WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へWordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
 
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
WordCamp Kansai 2015 実行委員向け GPL勉強会 | GPL study sessions for WordCamp Kansai 2...
 
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
WordPress公式ディレクトリにテーマ登録をしたので、
そこらへん絡めつつ「継続すること」について
 
WordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeechWordCamp Kansai 2014 OpeningSpeech
WordCamp Kansai 2014 OpeningSpeech
 
レスポンシブ+フラットデザイン+WordPress
 レスポンシブ+フラットデザイン+WordPress レスポンシブ+フラットデザイン+WordPress
レスポンシブ+フラットデザイン+WordPress
 
今更聞けないWordPress
今更聞けないWordPress今更聞けないWordPress
今更聞けないWordPress
 
AWSはじめて物語
AWSはじめて物語AWSはじめて物語
AWSはじめて物語
 

文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう

  • 1. 文系デザイナーでも大丈夫! レスポンシブWebサイトを          で作ってみよう November 3,2012 WordCamp Osaka 額賀 順子 12年11月3日土曜日
  • 2. ようこそWordCamp Osaka 2012 へ 12年11月3日土曜日
  • 3. 自己紹介 額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター/デザイナー。 つまり1人で大概の事はやっちゃう人。 Webデザインを中心に、企画・色彩設計、スマートフォンサイト作成など幅広く 制作を手がけています。 綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん な効果が欲しいのか。プランニングを重要視します。 制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ クター、セミナー講師も兼務。 Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事業な Twitter @nukaga ど、積極的に人と関わる活動を行っております。 Facebook nukagajunko インターネット大好き! WordCamp Osaka 2012 副実行委員長をさせて 頂いています。 12年11月3日土曜日
  • 4. 本日のアジェンダ ✤ レスポンシブWebデザインとは? ✤ レスポンシブWebデザインの考え方 ✤ 実践編 ✤ 便利ツール 12年11月3日土曜日
  • 5. レスポンシブWebデザインとは? レスポンシブWebデザインとは? WordPress+レスポンシブWebデザイン実例紹介 12年11月3日土曜日
  • 6. レスポンシブWebデザインとは 画像解像度(ユーザーの見ている環境・デバイス) にあわせて見やすいように表示を切り替えるデザイン HTMLはひとつ 12年11月3日土曜日
  • 7. レスポンシブWebデザインとは ワンソース型 マルチソース型 プログラム変換型 HTML HTML HTML HTML HTML CSS CSS CSS CSS CSS CSS 12年11月3日土曜日
  • 8. レスポンシブWebデザインとは HTMLはひとつ 実現のポイントはCSSにあります PHPとか関係ないよ 12年11月3日土曜日
  • 9. レスポンシブWebデザインとは 考え方がとても大事! PC、モバイルを振り分けるという考え方ではありません PC用デザインをモバイル用に変換するという考え方では ありません これをわかっていないと苦しみます 12年11月3日土曜日
  • 10. レスポンシブWebデザインとは 反対に言うと考え方さえわかっていたらやみくもに 突っ込んでいくよりだいぶ楽に組めます 12年11月3日土曜日
  • 11. メリット ・ワンソースなので、HTML1カ所修正したら全てに反映される  →分岐型と違って何カ所も更新する必要が無い ・CSSだけで実装できる  →WordPressでもCSSの調整だけで対応できる ・1つのHTML(URL)で対応できるのでSEO的に有効 12年11月3日土曜日
  • 12. デメリット ・サイトが重くなる可能性がある ・開発に時間がかかる可能性がある ・表示の最適化であって、  デバイス(利用シーン)への最適化ではない 12年11月3日土曜日
  • 13. WordPressとレスポンシブWebデザイン WordPress 3.2からのデフォルトテーマ レスポンシブWebデザイン対応 Twenty Eleven http://twentyelevendemo.wordpress.com/ 12年11月3日土曜日
  • 14. WordPressでレスポンシブ 事例1 budori  http://www.budori.co.jp/ 12年11月3日土曜日
  • 15. WordPressでレスポンシブ 事例2 loftwork.com http://www.loftwork.com/ 12年11月3日土曜日
  • 16. WordPressでレスポンシブ 事例3 Acru(アクリュ) http://acru.jp/ 12年11月3日土曜日
  • 17. 構築ポイント Acruのサイトは Twenty Elevenを親テーマにして構築してます WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能 にさらに機能を追加したりその機能を調整したりすることのできるテーマです。 もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの 知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。 そのため、親テーマがアップデートされても子テーマの変更は保持されます。 http://wpdocs.sourceforge.jp/子テーマ 12年11月3日土曜日
  • 18. レスポンシブWebデザインの考え方 レスポンシブWebデザインの考え方 ワークフロー 12年11月3日土曜日
  • 19. レスポンシブWebデザインの考え方 モバイルファースト パソコン タブレット スマートフォン 320px 480px 600px 768px 960px 1200px∼ 12年11月3日土曜日
  • 20. レスポンシブWebデザインの考え方 モバイルファーストって何? ルーク・ウロブルスキーさんの提唱したコンセプト (プロダクトの戦略や製品のデザインのコンサルタント会社 「LukeW Ideation & Design」のデザイナー兼設立者 http://www.lukew.com/ ) WebサイトやWebアプリを開発するうえで、 まずモバイルから開発してPCに展開していくべきだ とする考え方 そうしたいけど、それがなかなか難しい 12年11月3日土曜日
  • 21. レスポンシブWebデザインの考え方 モバイルファーストによるメリット そのサイト(画面)で見せたいものが何かということがはっきりする 小さい画面で見せる際の優先順位 12年11月3日土曜日
  • 22. レスポンシブWebデザインの考え方 ワイヤーフレームが非常に大事 レイアウトの切り替えパターンを知っておこう! パソコン タブレット スマートフォン 320px 480px 600px 768px 960px 1200px∼ 12年11月3日土曜日
  • 23. レスポンシブWebデザインの考え方 代表的な切り替えパターンその1 代表的な切り替えパターンその2 Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?1514 12年11月3日土曜日
  • 24. レスポンシブWebデザインの考え方 代表的な切り替えパターンその3 代表的な切り替えパターンその4 Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?1514 12年11月3日土曜日
  • 25. レスポンシブWebデザインの考え方 基本はCSS できるだけ%やemなど可変で組みたい。 pxを使う場合もある。 12年11月3日土曜日
  • 26. ワークフロー スマートフォン用のカンプデザイン タブレット用のカンプデザイン パソコン用のカンプデザイン そろそろこの考え方やめませんか? 何故かというと 12年11月3日土曜日
  • 27. ワークフロー 特にスマートフォンやタブレットは画面サイズだけでなく、 機種ごとの差異があり、全部にPSDでのデザインを きっちり反映させるのは厳しい。 PC用のデザインをPSDデータ タブレット/スマートフォンはワイヤーフレームで確認 12年11月3日土曜日
  • 28. ワークフロー 基本の設計をしっかりしてワイヤーフレームをきっちり書く デザイナー・マークアップエンジニアが参加する事が大切 設計/ワイヤーフレーム デザイン モックアップ 実装 12年11月3日土曜日
  • 29. ワークフロー 大事なのは考え方 どこを優先的に見せるか コンテンツファースト 内容ありき 12年11月3日土曜日
  • 30. 実装編 ブレークポイント CSS側記述 HTML側記述 12年11月3日土曜日
  • 31. ブレークポイント 切り替えのポイント メジャーブレークポイント 320px 768px 960px 12年11月3日土曜日
  • 32. ブレークポイント 今回の実装は2ヶ所 480px 960px 12年11月3日土曜日
  • 33. メディアクエリーと書き方 メディアクエリー(Media Queries)って? CSS3からの機能 ユーザーのビューサイズによって読み込むCSSを 分岐させることができる 12年11月3日土曜日
  • 34. メディアクエリーと書き方 CSSソース内に記述する おすすめ @media  screen  and  (max-­‐width:  1024px){        /*  タブレット用のスタイル記述  */ } HTMLの<head>内に書き込んでCSSを読み込ませる <link  rel="stylesheet"  media="screen  and  (max-­‐width:   1024px)"href="tablet.css"  /> CSSの@importに記述する @import  url("tablet.css")  screen  and  (max-­‐width:  1024px) 12年11月3日土曜日
  • 35. メディアクエリーと書き方 モバイルのCSSから書いていく方がいいよ 12年11月3日土曜日
  • 36. メディアクエリーと書き方 特にWordPressの場合 style.css 1つの方がやりやすい 12年11月3日土曜日
  • 37. HTMLの設定(viewport) <meta name="viewport" content="width=device-width"> 「viewportの幅をデバイスのスクリーンの幅に合わせる」 12年11月3日土曜日
  • 38. HTMLの設定(viewport) <meta name="viewport" 一般的に多い設定 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 表示幅をスクリーン幅と一致 初期拡大率を等倍 最小拡大率を等倍 最大拡大率を等倍 12年11月3日土曜日
  • 39. HTMLの設定(viewport) <meta name="viewport" 実際に使った設定 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.6, user-scalable=yes,"> 最大拡大率を1.6にして、 ユーザーさんが画面を拡大できる ようにしました 12年11月3日土曜日
  • 40. IE8以下の対応について JavaScriptを使う Respond.js  https://github.com/scottjehl/Respond css3-mediaqueries.js  http://code.google.com/p/css3-mediaqueries-js/ CSSを分岐させる <!-­‐-­‐[if  IE  8  ]> <link  rel="stylesheet"  type="text/css"  href="ie8.css"> <![endif]-­‐-­‐> 12年11月3日土曜日
  • 41. IE8以下の対応について JavaScriptを使う Respond.js  https://github.com/scottjehl/Respond Acru(アクリュ) http://acru.jp/ css3-mediaqueries.js  http://code.google.com/p/css3-mediaqueries-js/ 劇団ヌカガ公式サイト http://nukaga-theater.com/ 12年11月3日土曜日
  • 42. 実際にあったトラブル JavaScriptを使う スライド コンフリクトを起こしました カレンダー スクロールバー 読み込みの順番を マウスオーバー 変える事で解決 ギャラリー IE8以下メディアクエリー 12年11月3日土曜日
  • 43. レスポンシブWebデザインにおいての画像の扱い方 切り替える 画像が各サイズ必要 CSSで呼び出している画像の場合、メディアクエリーで切 り替えて呼び出す画像を変える事が可能。 JavaScriptを使う Responsive-Images http://filamentgroup.com/lab/ responsive_images_experimenting_with_context_aware_image_sizing/ Responsive-Enhance https://github.com/joshje/Responsive-Enhance 12年11月3日土曜日
  • 44. レスポンシブWebデザインにおいての画像の扱い方 画像が重いという問題に対しては その1 CSS Sprite 1枚の画像の中に必要な画像を全部入れ必要に応じて 表示させる部分を変える手法 1枚画像を最初に読み込む事によって余分なトラフィックが かかるのを防ぐ YouTube 12年11月3日土曜日
  • 45. レスポンシブWebデザインにおいての画像の扱い方 画像が重いという問題に対しては その2 データURIスキーム HTMLやCSSに埋め込まれたデータに直接アクセスする サーバーにリクエストせずに画像を表示することができる .mainbg { background-image:url(data:image/png;base64,iVBORw0KGgoAAAA... etc ); } Data-URI-Convertor http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ 12年11月3日土曜日
  • 46. レスポンシブWebデザインにおいての画像の扱い方 WordPressの場合ユーザーが画像を更新して行く @media only screen and (max-width: 480px) { .cpost img { ! ! max-width: 300px; ! ! width: auto; ! ! height: auto; ! ! } } クラスつけないと全部の画像に反映されちゃうから気をつけてね 12年11月3日土曜日
  • 47. レスポンシブWebデザインでの文字の扱い方 解像度によってフォントの大きさの変更が必要となった場合 ウェブフォントが使いたくなる。 CSS3  @font-­‐face これからの課題 フリーの日本語フォントが少ない。重い。 windowsで見ると読みにくい。 12年11月3日土曜日
  • 48. レスポンシブWebデザインの向き・不向き 向いてる 文字ベースのサイト 構造が簡単なサイト 大変 各ページによって表示を変えたいなど構造が複雑なサイト 利用シーンによって見せ方を大きく変えたいサイト 可能不可能で言ったら可能だけれど負担が大きい 12年11月3日土曜日
  • 49. 便利ツール フレームワーク(Framework) モックアップ用アイテム ギャラリーサイト 確認用ツール スライド用JavaScript WordPressテーマの紹介 12年11月3日土曜日
  • 50. Framework(Twitter Bootstrap) http://twitter.github.com/bootstrap/index.html 12年11月3日土曜日
  • 51. Framework(Zurb Foundation) http://foundation.zurb.com/ 12年11月3日土曜日
  • 52. 便利ツール(モックアップ用アイテム) Responsive Design Mock-up Pack テキスト http://medialoot.com/item/free-responsive-screen-mockup-pack/ 12年11月3日土曜日
  • 53. 便利ツール(ギャラリーサイト) ギャラリーサイト(国内) http://responsive-jp.com/ ギャラリーサイト(海外) http://mediaqueri.es/ 12年11月3日土曜日
  • 54. 便利ツール Responsive.is http://responsive.is Responsive Design Bookmarklet http://responsive.victorcoulon.fr/ Viewport resizer http://responsive.victorcoulon.fr/ 12年11月3日土曜日
  • 55. WordPressレスポンシブテーマ 74 12年11月3日土曜日
  • 56. WordPressレスポンシブテーマ SUNSPOT  テーマダウンロード http://wordpress.org/extend/themes/sunspot  デモ http://sunspotdemo.wordpress.com/ 12年11月3日土曜日
  • 57. WordPressレスポンシブテーマ Hatch  テーマダウンロード http://wordpress.org/extend/themes/hatch  デモ http://devpress.com/demo/hatch/ 12年11月3日土曜日
  • 58. WordPressレスポンシブテーマ Origin  テーマダウンロード  デモ http://wordpress.org/extend/themes/origin http://devpress.com/demo/origin/ 12年11月3日土曜日
  • 59. 最後に ご清聴ありがとうございました! まだまだ話しきれない WordPressとレスポンシブの関係 新しいことに挑戦できるのはWebの良いところ これからの技術だからこそ挑戦するのは楽しい! Twitter: @nukaga 額賀 順子 | ヌカガジュンコ Facebook: nukagajunko 12年11月3日土曜日