レスポンシブWebデザイン - 版の履歴

2020年2月16日 (日) 04:20にPirotoによる

2020-02-16T04:20:10Z

2020年2月15日 (土) 08:32にPirotoによる

2020-02-15T08:32:52Z

2020年2月15日 (土) 08:29にPirotoによる

2020-02-15T08:29:16Z

2020年2月15日 (土) 08:17にPirotoによる

2020-02-15T08:17:02Z

2020年2月15日 (土) 07:59にPirotoによる

2020-02-15T07:59:42Z

Piroto: ページの作成:「==レスポンシブWebデザイン== [HTML][CSS][CSS3] {{amazon|4048863231}} かなりわかりやすい。 *[http://ascii.jp/elem/000/000/697/697463/ 「レス…」

2020-02-15T07:29:19Z

ページの作成:「==レスポンシブWebデザイン== [HTML][CSS][CSS3] {{amazon|4048863231}} かなりわかりやすい。 *[http://ascii.jp/elem/000/000/697/697463/ 「レス…」

新規ページ

==レスポンシブWebデザイン==
[HTML][CSS][CSS3]

{{amazon|4048863231}}
かなりわかりやすい。

*[http://ascii.jp/elem/000/000/697/697463/ 「レスポンシブWebデザインとは」]のまとめ

===レスポンシブWebデザイン（Responsive Web Design）===
*PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法
*スクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作
===構成する技術===
====フルードグリッド（Fluid Grid）====
*以下を合わせたもの
*最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更
{|class="wikitable"
!デザイン
!内容
|-
|グリッドデザイン（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を記述
*リサイズツール
**[http://sixfoot1.com/safari-extensions/resizer/ Resizer]:Safari
**[https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer]
**[https://addons.mozilla.org/ja/firefox/addon/firesizer/ Firesizer]
====文字コードの指定====
@charset "utf-8";
===ブラウザ独自のスタイルをリセット===
====normalize.css====
ブラウザ毎の差異をなくす。HTML5要素の初期化にも対応
*http://necolas.github.io/normalize.css/
====CSS Reset====
ブラウザデフォルト指定を無くして、さらの状態からスタート
*http://www.cssreset.com
====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 */

@@ 1行目: / 1行目: @@
 ==レスポンシブWebデザイン==
- | [[HTML]] | [[CSS]] | [[CSS3]]
+[[HTML]] | [[CSS]] | [[CSS3]] |
 {{amazon|4048863231}}

@@ 1行目: / 1行目: @@
 ==レスポンシブWebデザイン==
-[[HTML]][[CSS]][[CSS3]]
+ | [[HTML]] | [[CSS]] | [[CSS3]]
 {{amazon|4048863231}}

@@ 1行目: / 1行目: @@
 ==レスポンシブWebデザイン==
-[[HTML][CSS][CSS3]]
+[[HTML]][[CSS]][[CSS3]]
 {{amazon|4048863231}}

@@ 1行目: / 1行目: @@
-==レスポンシブWebデザイン==
+==[[レスポンシブWebデザイン]]==
 [[HTML]] | [[CSS]] | [[CSS3]] |
@@ 7行目: / 7行目: @@
 *[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）====
 *以下を合わせたもの
-*最初にグリッドデザインによって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルードデザインに変更
+*最初にグリッド[[デザイン]]によって部品や表示領域をpx単位で配置していき、レイアウトが整った後に、値を％に変換してフルード[[デザイン]]に変更
 {|class="wikitable"
-!デザイン
+![[デザイン]]
 !内容
 |-
-|グリッドデザイン（Grid Design）
+|グリッド[[デザイン]]（Grid Design）
 |Webページの要素を罫線や升目に沿って配置
 |-
-|フルードデザイン（Fluid Design）
+|フルード[[デザイン]]（Fluid Design）
 |横幅が変わってもレイアウトを維持したまま要素のサイズを調整
 |-
@@ 27行目: / 27行目: @@
 ====フルードイメージ（Fluid Image）====
-*レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、CSSのみで実装
+*レイアウトの大きさに追随して画像のサイズを拡大・縮小する手法で、[[CSS]]のみで実装
 ====メディアクエリー（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要素内へ記述
-  &lt;meta name="viewport" content="width=device-width "&gt;
+  &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のスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながらCSSを記述
+*幅320pxのスタイルがいったん完成するまでは、Webブラウザーのウィンドウ幅を320pxに固定した状態で確認しながら[[CSS]]を記述
 *リサイズツール
 **[http://sixfoot1.com/safari-extensions/resizer/ Resizer]:Safari
 **[https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh Window Resizer]
 **[https://addons.mozilla.org/ja/firefox/addon/firesizer/ Firesizer]
-====文字コードの指定====
+====[[文字コード]]の指定====
   @charset "utf-8";
 ===ブラウザ独自のスタイルをリセット===
 ====normalize.css====
-ブラウザ毎の差異をなくす。HTML5要素の初期化にも対応
+ブラウザ毎の差異をなくす。[[HTML]]5要素の初期化にも対応
 *http://necolas.github.io/normalize.css/
-====CSS Reset====
+====[[CSS]] Reset====
 ブラウザデフォルト指定を無くして、さらの状態からスタート
 *http://www.cssreset.com