| ページ一覧 | ブログ | twitter |　 書式 | 書式(表) |

MyMemoWiki

「レスポンシブWebデザイン」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
(ページの作成:「==レスポンシブWebデザイン== [HTML][CSS][CSS3] {{amazon|4048863231}} かなりわかりやすい。 *[http://ascii.jp/elem/000/000/697/697463/ 「レス…」)
 
 
(同じ利用者による、間の4版が非表示)
1行目: 1行目:
−
==レスポンシブWebデザイン==
+
==[[レスポンシブWebデザイン]]==
−
[HTML][CSS][CSS3]
+
[[HTML]] | [[CSS]] | [[CSS3]] |
  
 
{{amazon|4048863231}}
 
{{amazon|4048863231}}
7行目: 7行目:
 
*[http://ascii.jp/elem/000/000/697/697463/ 「レスポンシブWebデザインとは」]のまとめ
 
*[http://ascii.jp/elem/000/000/697/697463/ 「レスポンシブWebデザインとは」]のまとめ
  
−
===レスポンシブWebデザイン（Responsive Web Design）===
+
===[[レスポンシブWebデザイン]]（Responsive Web Design）===
−
*PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法
+
*PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一の[[HTML]]で実現する制作手法
−
*スクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作
+
*スクリーンサイズを基準に[[CSS]]でレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作
 
===構成する技術===
 
===構成する技術===
 
====フルードグリッド（Fluid Grid）====
 
====フルードグリッド（Fluid Grid）====
 
*以下を合わせたもの
 
*以下を合わせたもの
−
*最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更
+
*最初にグリッド[[デザイン]]によって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルード[[デザイン]]に変更
 
{|class="wikitable"
 
{|class="wikitable"
−
!デザイン
+
![[デザイン]]
 
!内容
 
!内容
 
|-
 
|-
−
|グリッドデザイン（Grid Design）
+
|グリッド[[デザイン]]（Grid Design）
 
|Webページの要素を罫線や升目に沿って配置
 
|Webページの要素を罫線や升目に沿って配置
 
|-
 
|-
−
|フルードデザイン（Fluid Design）
+
|フルード[[デザイン]]（Fluid Design）
 
|横幅が変わってもレイアウトを維持したまま要素のサイズを調整
 
|横幅が変わってもレイアウトを維持したまま要素のサイズを調整
 
|-
 
|-
27行目: 27行目:
  
 
====フルードイメージ（Fluid Image）====
 
====フルードイメージ（Fluid Image）====
−
*レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装
+
*レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、[[CSS]]のみで実装
 
====メディアクエリー（Media Query）====
 
====メディアクエリー（Media Query）====
−
*メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術
+
*メディアクエリーは、画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々の[[CSS]]を適用する技術
−
====その他技術====
+
====[[その他]]技術====
−
*レスポンシブタイプセッティング（Responsive Typesetting）
+
*レスポンシブタイプセッティング（[[R]]esponsive Typesetting）
 
**文字をレイアウトの大きさに追随して伸縮
 
**文字をレイアウトの大きさに追随して伸縮
−
*レスポンシブテーブル（Responsive Table）
+
*レスポンシブテーブル（[[R]]esponsive Table）
 
**テーブル（表組）のサイズを調整
 
**テーブル（表組）のサイズを調整
 
===モバイルファースト===
 
===モバイルファースト===
−
====GROWTH=OPPOTUNITY 「成長」＝機会====
+
====G[[R]]OWTH=OPPOTUNITY 「成長」＝機会====
 
*モバイル端末の市場自体、今でも大きく成長
 
*モバイル端末の市場自体、今でも大きく成長
−
====CONSTRAINS=FOCUS 「制約」＝集中====
+
====CONST[[R]]AINS=FOCUS 「制約」＝集中====
 
*無駄なコンテンツは削ぎ落とされる
 
*無駄なコンテンツは削ぎ落とされる
−
====CAPABILITIES=INNOVATION 「機能」＝能力====
+
====CAPABILIT[[IE]]S=INNOVATION 「機能」＝能力====
 
*スマートフォンならではの機能
 
*スマートフォンならではの機能
−
==HTMLの用意とリセットCSSの作成==
+
==[[HTML]]の用意とリセットCSSの作成==
−
===HTML5===
+
===[[HTML]]5===
−
*古いブラウザーのサポートが必須の場合など、特別な事情がなければHTML5を使って記述しましょう
+
*古いブラウザーのサポートが必須の場合など、特別な事情がなければ[[HTML]]5を使って記述しましょう
−
====viewportの指定====
+
====[[vi]]ewportの指定====
−
*head要素内にあるmeta name="viewport"は、スマートフォン向けのviewportの設定
+
*head要素内にあるmeta name="[[vi]]ewport"は、スマートフォン向けの[[vi]]ewportの設定
−
*viewportはHTMLドキュメントにmeta要素でhead要素内へ記述
+
*viewportは[[HTML]]ドキュメントにmeta要素でhead要素内へ記述
−
  <meta name="viewport" content="width=device-width ">
+
  &lt;meta name="[[vi]]ewport" content="width=de[[vi]]ce-width "&gt;
−
*width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味
+
*width="content-width"は、「[[vi]]ewportの幅をデバイスのスクリーンの幅に合わせる」という意味
 
===スタイルシートの作成===
 
===スタイルシートの作成===
−
*CSSの記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述
+
*[[CSS]]の記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述
 
*小さいスクリーンサイズの基準は、幅320px
 
*小さいスクリーンサイズの基準は、幅320px
−
*幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながらCSSを記述
+
*幅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====
−
ブラウザ毎の差異をなくす。HTML5要素の初期化にも対応
+
ブラウザ毎の差異をなくす。[[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デザイン

HTML | CSS | CSS3 |

4048863231.09.MZZZZZZZ.jpg link

かなりわかりやすい。

レスポンシブWebデザイン（Responsive Web Design）

  • PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法
  • スクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作

構成する技術

フルードグリッド（Fluid Grid）

  • 以下を合わせたもの
  • 最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更
デザイン 内容
グリッドデザイン（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の指定

  • head要素内にあるmeta name="viewport"は、スマートフォン向けのviewportの設定
  • viewportはHTMLドキュメントにmeta要素でhead要素内へ記述
<meta name="viewport" content="width=device-width ">
  • width="content-width"は、「viewportの幅をデバイスのスクリーンの幅に合わせる」という意味

スタイルシートの作成

  • CSSの記述効率とファイルサイズを圧縮するため、もっとも小さいスクリーンサイズ向けのスタイルから、徐々に大きいスクリーンサイズのスタイルへと記述
  • 小さいスクリーンサイズの基準は、幅320px
  • 幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながらCSSを記述
  • リサイズツール

文字コードの指定

@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 */
「https://www.typea.info/tips_/index.php?title=レスポンシブWebデザイン&oldid=5573」から取得

© 2006 矢木浩人