HTML&CSS
コーディング・
プラクティスブック 3

実践
シリーズ

  • エビスコム 編著
  • 162ページ
  • プリント・レプリカ形式
HTML&CSS コーディング・プラクティスブック 3(表紙)
  • LEVEL 3
  • 和風テイストなサイト
  • Flexboxでレイアウト&ダークモード対応
  • IE11対応(Polyfillなし)

本書についてAbout This Book

本書は、デザインカンプと指示書に従い、Webページをコーディングしてみる実践シリーズです。

  • デザインカンプはAdobe XDで作成されています。
  • デザインカンプと作例はダウンロードデータに同梱してあります。

デザインカンプと作例

作例Case Study

  • 本書で作成するのは和風テイストなサイトのページです。
  • レイアウトにはFlexbox(フレキシブルボックス)を使用します。
  • ダークモードにはJavaScriptで対応し、切り替えスイッチも用意します。
  • 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版の画面サイズ
        • 特定の画面サイズで表示を確認する方法
    • ダークモード対応[基本]
      • ダークモードに対応する
      • 見出しと文章を表示する
        • 見出しを表示する
        • 文章を表示する
        • 背景と文字の色を指定する
      • ダークモードで色が変わるようにする
        • ダークモードの色を指定する
        • OSでダークモードがオンのときにクラス名を追加する
        • OSでダークモードをオンにする方法
        • ChromeでOSのダークモード設定をエミュレートする方法
        • FirefoxでOSのダークモード設定をエミュレートする方法
        • ダークモード用のCSSをメディアクエリで適用する場合
      • OSの設定変更をリロードなしで反映する
      • 色を滑らかに変化させる
        • デザインカンプでアニメーションの設定を確認する
        • デザインカンプと同じようにアニメーションを設定する
    • ダークモード対応[画像]
      • ダークモードで画像の色を変える
      • SVG画像の色を変える
        • SVG画像をインライン化する
        • SVG画像の色の値を変数に置き換える
        • もう1つのSVG画像も色が変わるようにする
      • ヘッダー画像の色を変える
        • ヘッダー画像をheaderの背景画像として表示した場合
        • ヘッダー画像を疑似要素を使って表示する
        • ヘッダー画像をheaderとは異なる要素として表示する方法
        • ヘッダー画像の彩度と明度を下げる
        • フィルタ(filter)のパラメータを調整しながら表示を確認する
    • モード切り替えスイッチの追加
      • スイッチでダークモードに切り替える
      • スイッチを作成する
        • スイッチのHTMLを追加する
        • スイッチのCSSを追加する
        • スイッチの表示を調整する
      • スイッチを機能させる
        • 表示とスイッチを一致させる
      • スイッチの設定を保持する
        • sessionStorageに保持した設定を確認する
        • スイッチの設定を永続的に保持する場合
    • パーツの設定[ヘッダー]
      • ヘッダーの表示を整える
      • 飾り罫で囲む
        • 画像を用意する
        • ベースとなるボーダーで囲む
        • ボーダー画像を表示する
        • PC版の表示を整える
      • 飾り罫の中身の表示を整える
        • サイト名と文章の表示を整える
        • スイッチにテキストを付ける
        • PC版の表示を整える
      • スイッチの表示位置を調整する
        • positionで表示位置を指定する
        • 中心を基点に位置を指定する
        • 中身の表示を整える
        • PC版での表示位置を調整する
      • 縦のラインを表示する
      • メッセージの表示を整える
        • テキストの表示を整える
        • 半透明なボックスに入れる
        • PC版の表示を整える(1)
        • PC版の表示を整える(2)
        • デザインカンプがない範囲の表示を整える
        • モバイル版とPC版が切り替わるときに発生するアニメーション
    • パーツの設定[写真一覧]
      • 写真一覧の表示を整える
      • 写真をリストアップする
      • 余白を入れる
      • 写真を2カラム・3カラムのレイアウトにする
        • 2カラムにする
        • 3カラムにする
        • デザインカンプがない範囲の表示を整える
      • 写真の彩度と明度を下げる
      • 背景を市松模様にする
      • 縦のラインを表示する
        • 縦のラインと写真の間の余白を削除する
        • 写真の間にだけマージンを入れる場合
        • Flexbox(フレキシブルボックス)のgapプロパティ
    • パーツの設定[フッター]
      • フッターの表示を整える
      • サイト名と住所の表示を整える
        • PC版の表示を整える
      • SNSメニューを表示する
        • アイコンフォントで表示する
        • 色とサイズを調整する
        • スクリーンリーダー用のテキストを追加する
    • 仕上げと最終チェック
      • フェードインでヘッダー画像を表示する
        • デザインカンプでアニメーションの設定を確認する
        • デザインカンプと同じようにアニメーションを設定する
        • OSの設定でダークモードがオンなときの表示
      • IEに対応する
        • Polyfillを使わずに変数に対応する
        • インライン化したSVGの表示が崩れないようにする
        • ダークモードでSVGの色を変える
        • ダークモードで画像の色を変える
      • レスポンシブを確認する
      • HTMLの文法と文書構造を確認する
    • APPENDIX
      • Adobe XDで値を確認する方法
      • Netlifyでサイトを公開する方法

Digital device mockup set designed by rawpixel.com / Freepik

Ornamental flowers background designed by Freepik

HTML&CSS コーディング・プラクティスブック

デザインカンプと指示書に従い、
Webページをコーディングしてみる実践シリーズです。