実践
シリーズ

HTML&CSS
コーディング・
プラクティスブック 4
with Flexbox & マルチページ

LEVEL 1

コーポレート系サイトのトップページとコンテンツページを基本的なHTML&CSSで構築します。

作例の詳細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 / CSS / 画像の準備
        • 画像を用意する
        • HTMLとCSSを用意する
        • HTMLの基本設定を記述する
        • COLUMN Google Fontsの設定
        • CSSの基本設定を記述する
      • 表示を確認する準備
        • モバイル版とPC版の画面サイズ
        • 特定の画面サイズで表示を確認する方法
    • 記事とヘッダー画像(コンテンツページのパーツ)
      • 記事とヘッダー画像を作成する
      • 記事を表示する
      • 見出しと文章のフォントまわりの表示を整える
        • タイトル<h1>の表示を整える
        • タイトル内の改行<br>の有効・無効を切り替える
        • 小見出し<h2>と文章<p>の表示を整える
        • サブタイトル<div>の表示を整える
      • 見出しと文章の間隔を調整する
        • <h1>・<h2>の上下マージンを調整する
        • <p>の上下マージンを調整する
        • 見出しと文章の間隔を確認する
      • 記事の横幅とまわりの余白を調整する
        • モバイル版の横幅と余白を調整する
        • PC版の横幅と余白を調整する
        • 余白の重ね合わせを確認する
      • 小見出しにマーク画像を付ける
        • PC版の表示を整える
        • PC版の最小幅での表示を整える
      • ヘッダー画像を表示する
        • 画像の高さを固定して切り抜く
        • PC版の表示を整える
    • メッセージ(コンテンツページのパーツ)
      • メッセージパーツを作成する
      • メッセージを表示する
        • PC版の表示を整える
      • ボタンを追加する
        • ボタンの特徴を確認する
        • ボタンを表示する
        • PC版の表示を整える
        • カーソルを重ねたときの表示を整える
        • COLUMN ホバーステートのプレビュー
    • ヘッダーとフッター
      • ヘッダーとフッターを作成する
      • ヘッダーとフッターの基本的なレイアウトを設定する
        • ヘッダーとフッターの中身を記述する
        • ヘッダーとフッターの横幅と余白を調整する
      • サイト名の表示を整える
      • ナビゲーションメニューの表示を整える
      • 住所の表示を整える
      • コピーライトの表示を整える
      • コンテンツページの表示を確認する
    • トップページの作成
      • トップページを作成する
      • トップページに合わせて編集する
      • メッセージの文章の表示を整える
        • PC版の表示と横幅を整える
        • COLUMN メッセージのパターンと余白
    • ヒーローヘッダー(トップページのパーツ)
      • ヒーローヘッダーを作成する
      • ヒーローヘッダーを表示する
      • 画像の表示を整える
      • 画像にテキストを重ねる
      • テキストの表示を整える
        • 間隔を調整する
        • 見出し内の改行と文章の表示を整える
      • テキストと画像を横並びにして重ねる
        • どのようにレスポンシブにするかを検討する
        • テキストの表示を整える
        • テキストと画像を横に並べる
        • 横幅と高さを整える
        • テキストを画像に重ねる
        • レスポンシブの表示を確認する
    • メッセージ(トップページのパーツ)
      • メッセージパーツを作成する
      • メッセージパーツを追加する
      • メッセージの中身を右側に配置する
      • ヒーローヘッダーと同じ横幅にする
    • 人気のシステム(トップページのパーツ)
      • 「人気のシステム」パーツを作成する
      • 「人気のシステム」パーツを表示する
      • 3つの項目を追加する
        • 1つ目の項目を追加する
        • 残りの項目を追加する
      • 3つの項目の表示を整える
        • 画像の表示を整える
        • テキストの表示を整える
      • 横幅を整える
      • 画像とテキストを横並びにする
        • どのようにレスポンシブにするかを検討する
        • 画像とテキストを横に並べる
        • テキストの表示を整える
        • 画像とテキストの並びを逆にする
        • レスポンシブの表示を確認する
    • 仕上げと最終チェック
      • ブレークポイントを決める
        • トップページの場合
        • コンテンツページの場合
      • IEに対応する
      • レスポンシブを確認する
      • HTMLの文法と文書構造を確認する
        • トップページ
        • コンテンツページ

Digital device mockup set designed by rawpixel.com / Freepik

Ornamental flowers background designed by Freepik

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