「レスポンシブWebデザイン」の版間の差分
ナビゲーションに移動
検索に移動
| 1行目: | 1行目: | ||
| − | ==レスポンシブWebデザイン== | + | ==[[レスポンシブWebデザイン]]== |
[[HTML]] | [[CSS]] | [[CSS3]] | | [[HTML]] | [[CSS]] | [[CSS3]] | | ||
| 7行目: | 7行目: | ||
*[http://ascii.jp/elem/000/000/697/697463/ 「レスポンシブWebデザインとは」]のまとめ | *[http://ascii.jp/elem/000/000/697/697463/ 「レスポンシブWebデザインとは」]のまとめ | ||
| − | === | + | ===[[レスポンシブWebデザイン]]（Responsive Web Design）=== |
| − | * | + | *PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一の[[HTML]]で実現する制作手法 |
| − | * | + | *スクリーンサイズを基準に[[CSS]]でレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作 |
===構成する技術=== | ===構成する技術=== | ||
====フルードグリッド（Fluid Grid）==== | ====フルードグリッド（Fluid Grid）==== | ||
*以下を合わせたもの | *以下を合わせたもの | ||
| − | * | + | *最初にグリッド[[デザイン]]によって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルード[[デザイン]]に変更 |
{|class="wikitable" | {|class="wikitable" | ||
| − | !デザイン | + | ![[デザイン]] |
!内容 | !内容 | ||
|- | |- | ||
| − | | | + | |グリッド[[デザイン]]（Grid Design） |
|Webページの要素を罫線や升目に沿って配置 | |Webページの要素を罫線や升目に沿って配置 | ||
|- | |- | ||
| − | | | + | |フルード[[デザイン]]（Fluid Design） |
|横幅が変わってもレイアウトを維持したまま要素のサイズを調整 | |横幅が変わってもレイアウトを維持したまま要素のサイズを調整 | ||
|- | |- | ||
| 27行目: | 27行目: | ||
====フルードイメージ（Fluid Image）==== | ====フルードイメージ（Fluid Image）==== | ||
| − | * | + | *レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、[[CSS]]のみで実装 |
====メディアクエリー（Media Query）==== | ====メディアクエリー（Media Query）==== | ||
| − | * | + | *メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々の[[CSS]]を適用する技術 |
| − | ==== | + | ====[[その他]]技術==== |
| − | * | + | *レスポンシブタイプセッティング（[[R]]esponsive Typesetting） |
**文字をレイアウトの大きさに追随して伸縮 | **文字をレイアウトの大きさに追随して伸縮 | ||
| − | * | + | *レスポンシブテーブル（[[R]]esponsive Table） |
**テーブル（表組）のサイズを調整 | **テーブル（表組）のサイズを調整 | ||
===モバイルファースト=== | ===モバイルファースト=== | ||
| − | ==== | + | ====G[[R]]OWTH=OPPOTUNITY 「成長」＝機会==== |
*モバイル端末の市場自体、今でも大きく成長 | *モバイル端末の市場自体、今でも大きく成長 | ||
| − | ==== | + | ====CONST[[R]]AINS=FOCUS 「制約」＝集中==== |
*無駄なコンテンツは削ぎ落とされる | *無駄なコンテンツは削ぎ落とされる | ||
| − | ==== | + | ====CAPABILIT[[IE]]S=INNOVATION 「機能」＝能力==== |
*スマートフォンならではの機能 | *スマートフォンならではの機能 | ||
| − | == | + | ==[[HTML]]の用意とリセットCSSの作成== |
| − | === | + | ===[[HTML]]5=== |
| − | * | + | *古いブラウザーのサポートが必須の場合など、特別な事情がなければ[[HTML]]5を使って記述しましょう |
| − | ==== | + | ====[[vi]]ewportの指定==== |
| − | *head要素内にあるmeta name=" | + | *head要素内にあるmeta name="[[vi]]ewport"は、スマートフォン向けの[[vi]]ewportの設定 |
| − | * | + | *viewportは[[HTML]]ドキュメントにmeta要素でhead要素内へ記述 |
| − | <meta name=" | + | <meta name="[[vi]]ewport" content="width=de[[vi]]ce-width "> |
| − | *width="content-width" | + | *width="content-width"は、「[[vi]]ewportの幅をデバイスのスクリーンの幅に合わせる」という意味 |
===スタイルシートの作成=== | ===スタイルシートの作成=== | ||
| − | * | + | *[[CSS]]の記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述 |
*小さいスクリーンサイズの基準は、幅320px | *小さいスクリーンサイズの基準は、幅320px | ||
| − | * | + | *幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながら[[CSS]]を記述 |
*リサイズツール | *リサイズツール | ||
**[http://sixfoot1.com/safari-extensions/resizer/ Resizer]:Safari | **[http://sixfoot1.com/safari-extensions/resizer/ Resizer]:Safari | ||
**[https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] | **[https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer] | ||
**[https://addons.mozilla.org/ja/firefox/addon/firesizer/ Firesizer] | **[https://addons.mozilla.org/ja/firefox/addon/firesizer/ Firesizer] | ||
| − | ==== | + | ====[[文字コード]]の指定==== |
@charset "utf-8"; | @charset "utf-8"; | ||
===ブラウザ独自のスタイルをリセット=== | ===ブラウザ独自のスタイルをリセット=== | ||
====normalize.css==== | ====normalize.css==== | ||
| − | + | ブラウザ毎の差異をなくす。[[HTML]]5要素の初期化にも対応 | |
*http://necolas.github.io/normalize.css/ | *http://necolas.github.io/normalize.css/ | ||
| − | ====CSS Reset==== | + | ====[[CSS]] Reset==== |
ブラウザデフォルト指定を無くして、さらの状態からスタート | ブラウザデフォルト指定を無くして、さらの状態からスタート | ||
*http://www.cssreset.com | *http://www.cssreset.com | ||
2020年2月16日 (日) 04:20時点における最新版
レスポンシブWebデザイン
かなりわかりやすい。
レスポンシブWebデザイン（Responsive Web Design）
- PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法
- スクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作
構成する技術
フルードグリッド（Fluid Grid）
| デザイン | 内容 |
|---|---|
| グリッドデザイン（Grid Design） | Webページの要素を罫線や升目に沿って配置 |
| フルードデザイン（Fluid Design） | 横幅が変わってもレイアウトを維持したまま要素のサイズを調整 |
フルードイメージ（Fluid Image）
- レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装
メディアクエリー（Media Query）
- メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術
その他技術
- レスポンシブタイプセッティング（Responsive Typesetting）
- 文字をレイアウトの大きさに追随して伸縮
- レスポンシブテーブル（Responsive Table）
- テーブル（表組）のサイズを調整
モバイルファースト
GROWTH=OPPOTUNITY 「成長」＝機会
- モバイル端末の市場自体、今でも大きく成長
CONSTRAINS=FOCUS 「制約」＝集中
- 無駄なコンテンツは削ぎ落とされる
CAPABILITIES=INNOVATION 「機能」＝能力
- スマートフォンならではの機能
HTMLの用意とリセットCSSの作成
HTML5
- 古いブラウザーのサポートが必須の場合など、特別な事情がなければHTML5を使って記述しましょう
viewportの指定
<meta name="viewport" content="width=device-width ">
- width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味
スタイルシートの作成
- CSSの記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述
- 小さいスクリーンサイズの基準は、幅320px
- 幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながらCSSを記述
- リサイズツール
- Resizer:Safari
- Window Resizer
- Firesizer
文字コードの指定
@charset "utf-8";
ブラウザ独自のスタイルをリセット
normalize.css
ブラウザ毎の差異をなくす。HTML5要素の初期化にも対応
CSS Reset
ブラウザデフォルト指定を無くして、さらの状態からスタート
marginとpaddingのリセット
*{margin: 0; padding: 0}
a要素の下線、ul、ol要素の「・」のリセット
a { text-decoration : none}
ul, ol { list-style : none}
img要素の余計な余白（ディセンダー）のリセット
img{ vertical-align : middle}
フルードイメージの導入とタイポグラフィの設定
「フルードイメージ」による画像の伸縮
- ウィンドウサイズより大きい画像でも、ウィンドウサイズ（または親要素の幅）に応じて、縦横比を保持したまま自動的に画像が拡大・縮小
img{ max-width : 100%}
タイポグラフィ（文字周り）の設定
- ブラウザーのフォントサイズはデフォルトで16px
- 日本語のテキストでは、一般的にフォントサイズの1.5倍がもっとも読みやすい行の高さとされている:line-heightプロパティの値には1.5
html {
font-family : verdana, sans-serif;
line-height : 1.5}
見出しの指定
- 前に決めた1行の高さ（24px）を基準にして一定の間隔で要素が配置されるように
- ここでは、h1要素を48px、h2を36px、h3を24px、h4、h5、h6を16pxに指定
h1,h2,h3,h4,h5,h6 { margin-bottom : 24px}
h1 {
font-size: 48px;
line-height: 1} /* 48px */
h2 {
font-size : 36px;
line-height : 1.3333} /* 48px */
h3{
font-size : 24px;
line-height : 1} /* 24px */
hgroup h2,h4,h5,h6 {
font-size : 16px;
line-height : 1.5} /* 24px */
© 2006 矢木浩人
