カテゴリー
HTML/CSS

スマートフォン最適化

CSSスプライト
高解像度画面向け対応
ホーム画面ショートカットアイコン
スタンドアローンモード
a要素での電話発信
async属性/defer属性

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

レスポンシブWebデザインと関連技術

レスポンシブWebデザインとは
レスポンシブWebデザインのメリットとデメリット
レスポンシブWebデザインに必要な技術
メディアクエリ(Media Queries)
Fluid Grid(可変グリッド)
Fluid Image(可変イメージ)
ビューポート
リセットCSS

参考:

HTML5 プロフェッショナル認定試験 レベル1 対策テキスト&問題集 v2.0対応版

カテゴリー
HTML/CSS

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

レスポンシブWebデザイン(Responsive Web Design)

PC、タブレット、スマートフォンなどあらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法。

CSSで、ブラウザのスクリーンサイズごとに、レイアウトを調整する。

レスポンシブWebデザインの3大要素

フルードグリッド(Fluid Grid)

Webページの要素を罫線やマス目に沿って配置する「グリッドデザイン」と、ブラウザの横幅が変わってもレイアウトを維持したまま要素のサイズを調整する「フルードデザイン」を合わせたもの。

レスポンシブWebデザインでは、最初にグリッドデザインによって表示領域をpx単位で配置し、レイアウトが整った後に、値を%に変換してフルードデザインに変更する。

フルードイメージ

レイアウトの大きさに追随して画像のサイズを拡大、縮小する手法。

CSSのみで実装できる。

メディアクエリー

画像解像度、ウィンドウの幅、デバイスの向きなどの指定条件にあわせて別々のCSSを適用する技術。

レスポンシブWebデザインではメディアクエリーを使ってスクリーンサイズに応じたCSSに切り替える。

参考:

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック