スマートフォンサイトのための HTML5+CSS3

逆引き索引

レスポンシブWebデザイン

• One Web ／ One URLによるマルチデバイスへの対応
• レスポンシブWebデザインを設定する
• モバイルファーストでレスポンシブWebデザインを設定する
• デザインを切り替えるための横幅の決定
• スマートフォン用とデスクトップ用のデザインをボタンで切り替える
• デスクトップ環境ではレスポンシブWebデザインを無効にする

デバイス

• デバイスの画面解像度
• dpiによるデバイスの分類とdensity
• densityに基づいた解像度
• デスクトップとスマートフォンにおける見た目の大きさの違い

ブラウザ

• アドレスバーを隠す
• アドレスバーを隠す（jQuery Mobile）
• フルスクリーンモードで表示する
• スタンドアローンモードで表示する
• スタンドアローンモードでステータスバーの表示をカスタマイズする
• Androidでデスクトップ版サイトを閲覧する
• Windows Phoneでデスクトップ版サイトを閲覧する
• モバイル版のOperaやFirefoxでユーザーエージェントを変更する
• ダブルタップでコンテンツを拡大表示する
• ページ内の記事のみを抽出して閲覧する
• リンクの長押しで表示されるメニュー
• ファビコンの表示
• ホーム画面にショートカット（Webクリップ）を表示する
• Webクリップのアイコンを指定する
• Webクリップのアイコンに陰影をつけずに表示する
• デバイスに合わせて最適なWebクリップのアイコンを表示する

ビューポート

• ブラウザが設定する標準のビューポートの横幅
• ビューポートの横幅をdensityに基づいた解像度に設定する
• ビューポートの横幅をピクセルで指定する
• ビューポートの横幅をピクセルで指定したときに発生する問題
• widthとinitial-scaleをいっしょに指定したときのビューポートの横幅
• ビューポートのdensityを指定する
• ビューポートを横向きにしたときの表示
• iOSで横向きにしたときの拡大表示を禁止する
• iOSで横向きにしたときの拡大表示を禁止する（jQuery Mobile）
• 拡大率の最小値と最大値を指定する
• ユーザーによる拡大表示を禁止する
• ユーザーによる拡大表示の禁止を無効にする
• ビューポートの横幅を動的に変更する

ページレイアウト

• 固定レイアウトの設定
• 可変レイアウトの設定
• サイドバーのみを固定した可変レイアウトの設定
• ２段組みのレイアウトの設定
• ４段組みのレイアウトの設定
• floatによる段組みの設定
• 段組みを解除して１段組みのレイアウトにする
• 画面の横幅に応じて自動的に段組みで表示する
• 改段の位置を指定する
• ページの横幅の最大値を指定する
• ヘッダーを固定表示する（position:fixed）
• ヘッダーを固定表示する（jQuery Mobile）
• フッターを固定表示する（position:fixed）
• フッターを固定表示する（jQuery Mobile）
• ヘッダーとフッターを固定表示する（iScroll 4）

コンテンツ

• 画面の横幅に応じてコンテンツの表示・非表示を切り替える
• 画面の横幅に応じてコンテンツを読み込んで表示する
• 画面の横幅に応じてコンテンツの表示位置を変更する
• スマートフォンで閲覧したときにのみコンテンツを表示する
• フェードインでコンテンツを表示する
• コンテンツを折りたたみ表示する（:target）
• コンテンツを折りたたみ表示する（HTML5）
• コンテンツを折りたたみ表示する（jQuery Mobile）
• 折りたたみ表示のアニメーションを設定する
• コンテンツを画像に重ねて表示する
• １つの要素に複数の背景画像を表示する
• 背景を半透明にする
• グラデーションを表示する
• ボックスを楕円形にデザインする
• Webフォントの利用
• Webフォントサービス
• 文字サイズを可変にする
• 文字サイズの自動調節機能を無効にする

リンク

• リンクを横に並べて表示する
• リンクを横に並べて表示する（フレキシブルボックスレイアウト）
• 指定した横幅で表示する
• 文字数に合わせた横幅で表示する
• 画面の横幅に応じて均等な横幅で表示する
• 画面の横幅に応じて均等な横幅で表示する（フレキシブルボックスレイアウト）
• 画面の横幅に応じて均等な横幅で表示する（jQuery Mobile）
• 2つ目のリンクの後に改行を入れる
• リンクの長押しでメニューを表示しないようにする
• Android 2.3.xで発生するリンクの問題を回避する
• 電話番号の自動リンク機能を無効にする
• 電話番号のリンクを設定する
• ロールオーバーの表示
• ハイライトを活用した表示を行う
• ハイライトの色をカスタマイズする
• デスクトップ環境の場合にのみ:hoverの設定を利用する
• スマートフォンやタブレット用に:hoverに相当する処理を設定する
• スマートフォンやタブレット用に:hoverに相当する処理を設定する（jQuery Mobile）

画像

• デバイスに合わせて最適な画像を表示する
• デバイスに合わせて最適な背景画像を表示する
• モバイルファーストで画像を表示する
• densityに応じて最適な画像を表示する
• densityに応じて最適な背景画像を表示する
• レスポンシブイメージの設定
• 画像の表示サイズを指定する
• 画像を可変にする
• 背景画像の表示サイズを指定する
• 背景画像を可変にする
• 記事と並べた画像を可変にする
• 高解像度なデバイスで画像がぼけてみえる問題
• 画像がぼけて見えるのを防ぐ
• 高解像度な画像を利用する
• 画像がオリジナルサイズ以上に拡大されないようにする
• 画像の拡大処理のアルゴリズムを指定する
• スムージングをかけずに画像を拡大する
• SVG形式の画像を作成する
• SVG形式の画像を表示する
• SVGに未対応の場合はPNGに置き換えて表示する
• インラインSVGを表示する
• インラインSVGに未対応の場合はPNGに置き換えて表示する
• CSSでインラインSVGの図形の色を変更する
• HTML5で画像の下に余白が入るのを防ぐ

ビデオ

• HTML5でビデオを表示する
• 画面の横幅に応じて読み込むビデオを変更する
• HTML5のビデオで利用できるコーデック
• HTML5のビデオを固定サイズで表示する
• HTML5のビデオを可変にする
• YouTubeのビデオを可変にする

フォーム

• HTML5で新しく作成できる入力フィールド
• ボタンを作成する
• フォームに標準で適用されるデザインを無効にする
• 送信ボタンのみにスタイルシートを適用する
• 入力フィールド内にプレースホルダを表示する
• 入力フィールドにオートフォーカスする
• 入力を必須にする
• 必須項目が未入力の場合の処理を指定する
• CSS3で入力内容を検証する
• HTML5で入力内容を検証する
• 入力内容が間違っている場合は送信を停止する
• pattern属性で入力できる内容を指定する

特性の判別

• CSS3 CSS3のメディアクエリで特性を判別する
• CSSOM CSSOMのメディアクエリで特性を判別する
• CSS3 CSSOM メディアクエリで判別できる特性
• CSS3 ビューポートの横幅を判別する
• JavaScript ビューポートの横幅の値を取得する
• CSS3 画面の横幅に応じて適用するスタイルシートを切り替える
• CSS3 画面の横幅に応じてメニューの表示位置を変更する
• CSS3 画面の横幅に応じてコンテンツを挿入する
• CSSOM 画面の横幅に応じて表示内容を変える
• CSSOM 画面の横幅に応じて表示内容を変える（横幅の変化に対応）
• CSSOM 画面の横幅に応じて表示内容を変える
  （横幅の変化と主要ブラウザに対応）
• CSS3 画面解像度を判別する
• JavaScript 画面解像度の値を取得する
• CSS3 デバイスの解像度（dpi）を判別する
• CSS3 画面の向きを判別する
• JavaScript 画面の上下左右の向きを確認する
• JavaScript 画面の向きの変化を検出する
• CSS3 画面の縦横比を判別する
• CSS3 カラーとモノクロを判別する
• CSS3 density（device pixel ratio）を判別する
• JavaScript density（device pixel ratio）の値を取得する
• CSS3 densityに応じて表示内容を変える
• JavaScript densityに応じて最適な画像を表示する
• CSS3 densityに応じて最適な背景画像を表示する
• JavaScript 回線速度に応じて処理を実行する

機能の判別

• JavaScriptで機能を判別する
• Modernizrで機能を判別する
• jQueryで機能を判別する
• CSS3のtext-shadowへの対応に応じてデザインを変える
• CSS3のフレキシブルボックスレイアウトへの対応に応じてスタイルシートを適用する
• HTML5のCanvasへの対応に応じて処理を実行する
• HTML5のフォームの入力フィールドへの対応に応じて処理を実行する
• SVGへの対応に応じて処理を実行する
• HTML5のインラインSVGへの対応に応じて処理を実行する
• タッチデバイスかどうかを判別する

ユーザーエージェントによる判別

• ユーザーエージェントでデバイス名／OS／ブラウザを判別する
• iPhoneを判別する
• Android 2.xを判別する
• スマートフォンまたはタブレットを判別する
• iPhone／iPodまたはAndroid搭載スマートフォンを判別する
• iOS／Android／Windows Phoneを判別する
• WebKit系のブラウザを判別する
• デスクトップ環境を判別する
• スマートフォンで閲覧したときにのみコンテンツを表示する
• デスクトップ環境ではレスポンシブWebデザインを無効にする

HTML5

• HTML5のDOCTYPE宣言やヘッダー部分の記述
• HTML5でページの論理構造をマークアップする
• HTML5で新しく追加された要素
• HTML5で新しく作成できる入力フィールド
• IE8以前でもHTML5の新しい要素に対応する
• 見出しや文章にまとめてリンクを設定する
• <header>でヘッダーをマークアップする
• <footer>でフッターをマークアップする
• <article>で記事をマークアップする
• <article>とリーダー機能
• <nav>でナビゲーションをマークアップする
• <aside>で補足的な情報をマークアップする
• <section>でセクションをマークアップする
• <details>と<summary>で追加情報をマークアップする
• <svg>でインラインSVGを表示する
• <video>でビデオを表示する
• <source>でビデオや画像の複数の候補を指定する
• <source>のmedia属性の利用
• <img>のsrcset属性で複数の画像候補を指定する
• <picture>で複数の画像候補を指定する
• カスタムデータ属性（data-）を利用する
• media属性を持つ<link>を削除する
• enabled属性とdisabled属性で有効・無効を切り替える
• タッチイベントで:hoverに相当する処理を設定する
• classList APIでクラス名の追加と削除を行う
• The constraint validation APIでフォームの入力内容を検証する
• The Network Information APIのConnectionインターフェースで回線速度を取得する

CSS3

• :last-childセレクタで最後の要素に設定を適用する
• :nth-child()セレクタで偶数番目の要素に設定を適用する
• :nth-child()セレクタで2つ目の要素に設定を適用する
• 兄弟セレクタ（隣接セレクタ）「＋」で隣接する要素に設定を適用する
• 兄弟セレクタ（隣接セレクタ）「＋」を:nth-child()の代用に利用する
• 属性セレクタで特定の属性と属性値を持つ要素に設定を適用する
• :invalidセレクタで入力内容に間違いがある要素に設定を適用する
• :disabledセレクタで無効な要素に設定を適用する
• :targetセレクタでコンテンツの表示を切り替える
• ::beforeセレクタでコンテンツの挿入位置を指定する
• ::-webkit-details-markerセレクタでマーカーのデザインを指定する
• linear-gradient()でグラデーションを表示する
• rgba()で半透明色を指定する
• image-set()で複数の画像候補を指定する
• appearanceでブラウザ標準のパーツのデザインを無効にする
• background-sizeで背景画像の表示サイズを指定する
• border-radiusで角丸を指定する
• box-sizingで罫線とパディングを横幅に含めるように指定する
• text-size-adjustで文字サイズの自動調節を無効にする
• animationでアニメーションを指定する
• transitionでアニメーションを指定する
• アニメーションで値を変化させることのできるプロパティ

CSS4

• メディアクエリのresolution特性でdensity（device pixel ratio）を判別する
• メディアクエリのhover特性でhoverが機能するかどうかを判別する
• image-renderingで画像の拡大処理のアルゴリズムを指定する

表示・出力の確認

• 開発者用のツール（デベロッパーツール）の利用
• PCブラウザのユーザーエージェントを変更する
• スマートフォンやタブレットでの表示をデスクトップ環境で確認する

ライブラリ

• Polyfillライブラリ
• githubで公開されたライブラリの利用
• matchMedia.jsでCSSOMを利用する
• Modernizrで機能を判別する
• jQueryで機能を判別する
• MobileESPでOSやブラウザを判別する
• iOS-Orientationchange-FixでiOSを横向きにしたときの拡大表示を禁止する
• iScroll 4でヘッダーとフッターを固定表示する
• jQuery Mobileでスマートフォン用のデザインのみをカスタマイズする
• jQuery Mobileでテーマ設定を含まないCSSを利用する