![滨贰8以下の対応について
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日土曜日](https://image.slidesharecdn.com/random-121102170659-phpapp01/85/WEB-WordPress-40-320.jpg)
More Related Content
What's hot (20)
Similar to 文系デザイナーでも大丈夫！レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう (20)
More from Junko Nukaga (7)
文系デザイナーでも大丈夫！レスポンシブ奥贰叠サイトを奥辞谤诲笔谤别蝉蝉で作ってみよう
- 1. 文系デザイナーでも大丈夫！ レスポンシブWebサイトを??????????で作ってみよう November 3,2012 WordCamp Osaka 額賀 順子 12年11月3日土曜日
- 2. ようこそWordCamp Osaka 2012 へ 12年11月3日土曜日
- 3. 自己绍介 額賀 順子 | ヌカガジュンコ フリーランスのWebディレクター／デザイナー。 つまり１人で大概の事はやっちゃう人。 Webデザインを中心に、企画?色彩設計、スマートフォンサイト作成など幅広く 制作を手がけています。 綺麗めのデザインが得意です。聞き取りを大切にします。何を望んでいて、どん な効果が欲しいのか。プランニングを重要視します。 制作を続けながら、厚生労働省緊急人材育成事業基金訓練のWebデザイン/カ ラーコーディネーター養成講師をつとめ、Adobeアプリケーションのインストラ クター、セミナー講師も兼務。 Webの仕事は人と人を繋ぐ仕事と考え、制作だけではなく講演や教育事業な Twitter ＠nukaga ど、積極的に人と関わる活動を行っております。 Facebook nukagajunko インターネット大好き！ WordCamp Osaka 2012 副実行委員長をさせて 頂いています。 12年11月3日土曜日
- 4. 本日のアジェンダ ? レスポンシブ奥别产デザインとは？ ? レスポンシブ奥别产デザインの考え方 ? 実践編 ? 便利ツール 12年11月3日土曜日
- 5. レスポンシブ奥别产デザインとは？ レスポンシブ奥别产デザインとは？ WordPress＋レスポンシブWebデザイン実例紹介 12年11月3日土曜日
- 6. レスポンシブ奥别产デザインとは 画像解像度（ユーザーの見ている環境?デバイス） にあわせて見やすいように表示を切り替えるデザイン HTMLはひとつ 12年11月3日土曜日
- 7. レスポンシブ奥别产デザインとは ワンソース型 マルチソース型 プログラム変換型 HTML HTML HTML HTML HTML CSS CSS CSS CSS CSS CSS 12年11月3日土曜日
- 8. レスポンシブ奥别产デザインとは HTMLはひとつ 実現のポイントはCSSにあります PHPとか関係ないよ 12年11月3日土曜日
- 9. レスポンシブ奥别产デザインとは 考え方がとても大事！ PC、モバイルを振り分けるという考え方ではありません PC用デザインをモバイル用に変換するという考え方では ありません これをわかっていないと苦しみます 12年11月3日土曜日
- 10. レスポンシブ奥别产デザインとは 反対に言うと考え方さえわかっていたらやみくもに 突っ込んでいくよりだいぶ楽に組めます 12年11月3日土曜日
- 11. メリット ?ワンソースなので、HTML1カ所修正したら全てに反映される ?→分岐型と違って何カ所も更新する必要が無い ?CSSだけで実装できる ?→WordPressでもCSSの調整だけで対応できる ?1つのHTML（URL）で対応できるのでSEO的に有効 12年11月3日土曜日
- 12. デメリット ?サイトが重くなる可能性がある ?開発に時間がかかる可能性がある ?表示の最適化であって、 ?デバイス（利用シーン）への最適化ではない 12年11月3日土曜日
- 13. 奥辞谤诲笔谤别蝉蝉とレスポンシブ奥别产デザイン WordPress 3.2からのデフォルトテーマ レスポンシブWebデザイン対応 Twenty Eleven http://twentyelevendemo.wordpress.com/ 12年11月3日土曜日
- 14. 奥辞谤诲笔谤别蝉蝉でレスポンシブ?事例１ budori? http://www.budori.co.jp/ 12年11月3日土曜日
- 15. 奥辞谤诲笔谤别蝉蝉でレスポンシブ?事例２ loftwork.com http://www.loftwork.com/ 12年11月3日土曜日
- 16. 奥辞谤诲笔谤别蝉蝉でレスポンシブ?事例３ Acru（アクリュ） http://acru.jp/ 12年11月3日土曜日
- 17. 构筑ポイント Acruのサイトは Twenty Elevenを親テーマにして構築してます WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能 にさらに機能を追加したりその機能を調整したりすることのできるテーマです。 もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとな り、制作がとても簡単です。HTML と CSS に精通していればプログラミングの 知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加え ないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。 そのため、親テーマがアップデートされても子テーマの変更は保持されます。 http://wpdocs.sourceforge.jp/子テーマ 12年11月3日土曜日
- 18. レスポンシブ奥别产デザインの考え方 レスポンシブ奥别产デザインの考え方 ワークフロー 12年11月3日土曜日
- 19. レスポンシブ奥别产デザインの考え方 モバイルファースト パソコン タブレット スマートフォン 320px 480px 600px 768px 960px 1200px～ 12年11月3日土曜日
- 20. レスポンシブ奥别产デザインの考え方 モバイルファーストって何？ ルーク?ウロブルスキーさんの提唱したコンセプト （プロダクトの戦略や製品のデザインのコンサルタント会社 「LukeW Ideation & Design」のデザイナー兼設立者?http://www.lukew.com/?） WebサイトやWebアプリを開発するうえで、 まずモバイルから開発してPCに展開していくべきだ とする考え方 そうしたいけど、それがなかなか難しい 12年11月3日土曜日
- 21. レスポンシブ奥别产デザインの考え方 モバイルファーストによるメリット そのサイト（画面）で見せたいものが何かということがはっきりする 小さい画面で見せる際の優先順位 12年11月3日土曜日
- 22. レスポンシブ奥别产デザインの考え方 ワイヤーフレームが非常に大事 レイアウトの切り替えパターンを知っておこう！ パソコン タブレット スマートフォン 320px 480px 600px 768px 960px 1200px～ 12年11月3日土曜日
- 23. レスポンシブ奥别产デザインの考え方 代表的な切り替えパターンその１ 代表的な切り替えパターンその２ Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?1514 12年11月3日土曜日
- 24. レスポンシブ奥别产デザインの考え方 代表的な切り替えパターンその3 代表的な切り替えパターンその4 Multi-Device Layout Patterns lukew http://www.lukew.com/ff/entry.asp?1514 12年11月3日土曜日
- 25. レスポンシブ奥别产デザインの考え方 基本は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. ブレークポイント 今回の実装は２ヶ所 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 １つの方がやりやすい 12年11月3日土曜日
- 37. 贬罢惭尝の设定（惫颈别飞辫辞谤迟） <meta name="viewport" content="width=device-width"> 「viewportの幅をデバイスのスクリーンの幅に合わせる」 12年11月3日土曜日
- 38. 贬罢惭尝の设定（惫颈别飞辫辞谤迟） <meta name="viewport" 一般的に多い設定 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> 表示幅をスクリーン幅と一致 初期拡大率を等倍 最小拡大率を等倍 最大拡大率を等倍 12年11月3日土曜日
- 39. 贬罢惭尝の设定（惫颈别飞辫辞谤迟） <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. 滨贰8以下の対応について 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. 滨贰8以下の対応について 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. レスポンシブ奥别产デザインにおいての画像の扱い方 切り替える 画像が各サイズ必要 CSSで呼び出している画像の場合、メディアクエリーで切 り替えて呼び出す画像を変える事が可能。 JavaScriptを使う Responsive-Images http://?lamentgroup.com/lab/ responsive_images_experimenting_with_context_aware_image_sizing/ Responsive-Enhance https://github.com/joshje/Responsive-Enhance 12年11月3日土曜日
- 44. レスポンシブ奥别产デザインにおいての画像の扱い方 画像が重いという問題に対しては?その１ CSS Sprite 1枚の画像の中に必要な画像を全部入れ必要に応じて 表示させる部分を変える手法 1枚画像を最初に読み込む事によって余分なトラフィックが かかるのを防ぐ YouTube 12年11月3日土曜日
- 45. レスポンシブ奥别产デザインにおいての画像の扱い方 画像が重いという問題に対しては?その２ データ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. レスポンシブ奥别产デザインにおいての画像の扱い方 WordPressの場合ユーザーが画像を更新して行く @media only screen and (max-width: 480px) { .cpost img { ! ! max-width: 300px; ! ! width: auto; ! ! height: auto; ! ! } } クラスつけないと全部の画像に反映されちゃうから気をつけてね 12年11月3日土曜日
- 47. レスポンシブ奥别产デザインでの文字の扱い方 解像度によってフォントの大きさの変更が必要となった場合 ウェブフォントが使いたくなる。 CSS3 ?@font-?‐face これからの課題 フリーの日本語フォントが少ない。重い。 windowsで見ると読みにくい。 12年11月3日土曜日
- 48. レスポンシブ奥别产デザインの向き?不向き 向いてる 文字ベースのサイト 構造が簡単なサイト 大変 各ページによって表示を変えたいなど構造が複雑なサイト 利用シーンによって見せ方を大きく変えたいサイト 可能不可能で言ったら可能だけれど負担が大きい 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. 奥辞谤诲笔谤别蝉蝉レスポンシブテーマ 74 12年11月3日土曜日
- 56. 奥辞谤诲笔谤别蝉蝉レスポンシブテーマ SUNSPOT ?テーマダウンロード http://wordpress.org/extend/themes/sunspot ?デモ http://sunspotdemo.wordpress.com/ 12年11月3日土曜日
- 57. 奥辞谤诲笔谤别蝉蝉レスポンシブテーマ Hatch ?テーマダウンロード http://wordpress.org/extend/themes/hatch ?デモ http://devpress.com/demo/hatch/ 12年11月3日土曜日
- 58. 奥辞谤诲笔谤别蝉蝉レスポンシブテーマ 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日土曜日