Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
文系デザイナーでも大丈夫!

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




                              November 3,2012
                      ...
ようこそWordCamp Osaka 2012 へ




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

                          フリーランスのWebディレクター/デザイナー。
                        ...
本日のアジェンダ


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

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

  ✤   実践編

  ✤   便利ツール




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




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

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




         HTMLはひとつ




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


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


              HTML                       HTML   HTML...
レスポンシブWebデザインとは




         HTMLはひとつ




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

                           PHPとか関係ないよ




12年11月...
レスポンシブWebデザインとは



    考え方がとても大事!



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

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


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




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




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


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

      ・CSSだけで実装できる
       →WordPressでもCSSの調整だけで対...
デメリット



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

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

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




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

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

   Twenty Eleven




                     h...
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の子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能
        にさらに機能を追加し...
レスポンシブWebデザインの考え方
              レスポンシブWebデザインの考え方
              ワークフロー




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


   モバイルファースト


                                  パソコン

                        タブレット

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


         モバイルファーストって何?
         ルーク・ウロブルスキーさんの提唱したコンセプト
         (プロダクトの戦略や製品のデザインのコンサルタント会社
         ...
レスポンシブWebデザインの考え方



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


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


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



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


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



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



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




                              Multi-Device Layout Patterns
...
レスポンシブWebデザインの考え方


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




                               Multi-Device Layout Patterns
...
レスポンシブWebデザインの考え方




                    基本はCSS

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




12年1...
ワークフロー


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



              そろそ...
ワークフロー



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


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


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




    設計/ワイヤーフレーム         デザイン   モックアッ...
ワークフロー




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

                  コンテンツファースト


          ...
実装編
              ブレークポイント
              CSS側記述
              HTML側記述




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

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


              320px   768px    960px




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


                      今回の実装は2ヶ所



              480px    960px




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


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


          CSS3からの機能
          ユーザーのビューサイズによって読み込むCSSを
          ...
メディアクエリーと書き方


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

        @media	
  screen	...
メディアクエリーと書き方




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




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




                         特にWordPressの場合



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




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




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


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




12年11月...
HTMLの設定(viewport)


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

  content="width=device-width,
   initial-scale=1.0,
   min...
HTMLの設定(viewport)


  <meta name="viewport"          実際に使った設定
  content="width=device-width,
   initial-scale=1.0,
   mini...
IE8以下の対応について

    JavaScriptを使う

      Respond.js
       https://github.com/scottjehl/Respond
       css3-mediaqueries.js
...
IE8以下の対応について


    JavaScriptを使う


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

                         ...
実際にあったトラブル


 JavaScriptを使う

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

              カレンダー
              スクロールバー
      ...
レスポンシブWebデザインにおいての画像の扱い方

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

     CSSで呼び出している画像の場合...
レスポンシブWebデザインにおいての画像の扱い方



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

               CSS Sprite
              1枚の画像の中に必要な画像を全部入れ必...
レスポンシブWebデザインにおいての画像の扱い方



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

              データURIスキーム
              HTMLやCSSに埋め込まれたデータに直...
レスポンシブWebデザインにおいての画像の扱い方



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

   @media only screen and (max-width: 480px)
   {
   .cpost img...
レスポンシブWebデザインでの文字の扱い方

     解像度によってフォントの大きさの変更が必要となった場合
     ウェブフォントが使いたくなる。
                                  CSS3	
  @fo...
レスポンシブWebデザインの向き・不向き

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


              大変

              各ペー...
便利ツール
              フレームワーク(Framework)
              モックアップ用アイテム
              ギャラリーサイト
              確認用ツール
             ...
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://responsive-jp.com/




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



        ...
便利ツール


              Responsive.is
               http://responsive.is



              Responsive Design Bookmarklet
   ...
WordPressレスポンシブテーマ




                       74




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

   SUNSPOT




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

    デモ
   http://sunspotde...
WordPressレスポンシブテーマ

     Hatch




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

  ...
WordPressレスポンシブテーマ


    Origin




       テーマダウンロード                                   デモ
      http://wordpress.org/exten...
最後に


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

             ...
Upcoming SlideShare
Loading in …5
×

of

文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 1 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 2 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 3 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 4 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 5 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 6 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 7 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 8 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 9 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 10 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 11 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 12 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 13 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 14 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 15 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 16 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 17 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 18 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 19 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 20 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 21 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 22 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 23 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 24 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 25 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 26 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 27 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 28 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 29 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 30 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 31 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 32 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 33 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 34 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 35 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 36 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 37 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 38 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 39 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 40 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 41 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 42 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 43 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 44 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 45 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 46 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 47 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 48 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 49 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 50 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 51 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 52 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 53 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 54 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 55 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 56 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 57 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 58 文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう Slide 59
Upcoming SlideShare
Dreamweaver CS6で作るレスポンシブWebデザイン
Next
Download to read offline and view in fullscreen.

202 Likes

Share

Download to read offline

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

Download to read offline

WordCamp Osaka 2012

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

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

    Oct. 17, 2019
  • icb19457

    Apr. 7, 2017
  • tkgmnr

    Dec. 3, 2016
  • RyoKonda

    Apr. 26, 2016
  • hrs_o

    Mar. 8, 2016
  • ssuserddf8c7

    Feb. 10, 2016
  • AraiRyutaro

    Nov. 22, 2015
  • userdeth

    Nov. 3, 2015
  • 0409narao

    Sep. 17, 2015
  • wasab

    Aug. 3, 2015
  • j801

    Aug. 2, 2015
  • HarukaHasegawa1

    Aug. 2, 2015
  • koolweb37

    Jul. 22, 2015
  • tatuyakoizumi

    Apr. 1, 2015
  • sanako_koufukata

    Mar. 26, 2015
  • kyosukeharaki

    Mar. 13, 2015
  • kentarohori

    Feb. 25, 2015
  • chercoo

    Feb. 23, 2015
  • ryotaono2

    Dec. 19, 2014
  • wirelessinternet

    Dec. 1, 2014

WordCamp Osaka 2012

Views

Total views

87,594

On Slideshare

0

From embeds

0

Number of embeds

41,512

Actions

Downloads

455

Shares

0

Comments

0

Likes

202

×