実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 3with Flexbox & ダークモード
LEVEL 3
ダークモードに対応した和風テイストなサイトをHTML&CSS＋JavaScriptを活かして構築します。
作例の詳細PDF
本書で完成させる作例の詳細についてはPDFで公開していますので、参考にしてください。『おすすめの活用方法』のように、作例を見ないでチャレンジされる方はご注意ください。
本書についてAbout This Book
本書は、デザインカンプと指示書をもとに、Webページをコーディングしてみる実践シリーズです。
- デザインカンプはAdobe XDで作成されています。
- デザインカンプと作例はダウンロードデータに同梱してあります。
作例Case Study
- 本書で作成するのは和風テイストなサイトのページとなっています。
- レイアウトにはFlexbox（フレキシブルボックス）を使用します。
- IE11にはPolyfillなしで対応します。
- モバイルファースト ＆ レスポンシブ で作成します。
制作ステップStep By Step
- STEP 1でデザインカンプを解析し、パーツを抽出してHTMLでどのようにマークアップするかを検討します。さらに、レイアウトのポイントや、CSSで設定していく上で注意したい個所などを洗い出します。
- STEP 2ではHTMLとCSSファイルを用意し、基本的な設定を行います。
- STEP 3～5ではダークモードに対応する設定を行います。
- STEP 6以降では、パーツ単位でページを形にしていきます。
- 最後の「仕上げと最終チェック」では、完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
- 各ステップでの作業は、次のようなページ構成でまとめています
もくじContents
- デザインカンプと指示書
- 作例
- デザインカンプの解析
- デザインカンプと指示書からの第一印象
- ダークモード対応とコーディングの手順
- デザインカンプから大きなパーツを抽出する
- パーツを見せたい流れ（視線の流れ）を確認する
- HTMLのマークアップを検討する
- 見出しの抽出
- クラスによるパーツの区別
- レイアウトのポイントを確認する
- パーツの位置揃えと左右の余白
- 上下の余白と縦のライン
- デザインが共通している部分
- ダークモードのポイントを確認する
- 画像の色合い
- テキストの色
- 背景の色
- メインカラー
- 色の管理
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- CSSの基本設定を記述する
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- ダークモード対応［基本］
- ダークモードに対応する
- 見出しと文章を表示する
- 見出しを表示する
- 文章を表示する
- 背景と文字の色を指定する
- ダークモードで色が変わるようにする
- ダークモードの色を指定する
- OSでダークモードがオンのときにクラス名を追加する
- OSでダークモードをオンにする方法
- ChromeでOSのダークモード設定をエミュレートする方法
- FirefoxでOSのダークモード設定をエミュレートする方法
- ダークモード用のCSSをメディアクエリで適用する場合
- OSの設定変更をリロードなしで反映する
- 色を滑らかに変化させる
- デザインカンプでアニメーションの設定を確認する
- デザインカンプと同じようにアニメーションを設定する
- ダークモード対応［画像］
- ダークモードで画像の色を変える
- SVG画像の色を変える
- SVG画像をインライン化する
- SVG画像の色の値を変数に置き換える
- もう１つのSVG画像も色が変わるようにする
- ヘッダー画像の色を変える
- ヘッダー画像をheaderの背景画像として表示した場合
- ヘッダー画像を疑似要素を使って表示する
- ヘッダー画像をheaderとは異なる要素として表示する方法
- ヘッダー画像の彩度と明度を下げる
- フィルタ（filter）のパラメータを調整しながら表示を確認する
- モード切り替えスイッチの追加
- スイッチでダークモードに切り替える
- スイッチを作成する
- スイッチのHTMLを追加する
- スイッチのCSSを追加する
- スイッチの表示を調整する
- スイッチを機能させる
- 表示とスイッチを一致させる
- スイッチの設定を保持する
- sessionStorageに保持した設定を確認する
- スイッチの設定を永続的に保持する場合
- パーツの設定［ヘッダー］
- ヘッダーの表示を整える
- 飾り罫で囲む
- 画像を用意する
- ベースとなるボーダーで囲む
- ボーダー画像を表示する
- PC版の表示を整える
- 飾り罫の中身の表示を整える
- サイト名と文章の表示を整える
- スイッチにテキストを付ける
- PC版の表示を整える
- スイッチの表示位置を調整する
- positionで表示位置を指定する
- 中心を基点に位置を指定する
- 中身の表示を整える
- PC版での表示位置を調整する
- 縦のラインを表示する
- メッセージの表示を整える
- テキストの表示を整える
- 半透明なボックスに入れる
- PC版の表示を整える（１）
- PC版の表示を整える（２）
- デザインカンプがない範囲の表示を整える
- モバイル版とPC版が切り替わるときに発生するアニメーション
- パーツの設定［写真一覧］
- 写真一覧の表示を整える
- 写真をリストアップする
- 余白を入れる
- 写真を２カラム・３カラムのレイアウトにする
- ２カラムにする
- ３カラムにする
- デザインカンプがない範囲の表示を整える
- 写真の彩度と明度を下げる
- 背景を市松模様にする
- 縦のラインを表示する
- 縦のラインと写真の間の余白を削除する
- 写真の間にだけマージンを入れる場合
- Flexbox（フレキシブルボックス）のgapプロパティ
- パーツの設定［フッター］
- フッターの表示を整える
- サイト名と住所の表示を整える
- PC版の表示を整える
- SNSメニューを表示する
- アイコンフォントで表示する
- 色とサイズを調整する
- スクリーンリーダー用のテキストを追加する
- 仕上げと最終チェック
- フェードインでヘッダー画像を表示する
- デザインカンプでアニメーションの設定を確認する
- デザインカンプと同じようにアニメーションを設定する
- OSの設定でダークモードがオンなときの表示
- IEに対応する
- Polyfillを使わずに変数に対応する
- インライン化したSVGの表示が崩れないようにする
- ダークモードでSVGの色を変える
- ダークモードで画像の色を変える
- レスポンシブを確認する
- HTMLの文法と文書構造を確認する
- フェードインでヘッダー画像を表示する
- デザインカンプの解析
※Digital device mockup set designed by rawpixel.com / Freepik
※Ornamental flowers background designed by Freepik
