実践
シリーズ

HTML&CSS
コーディング・
プラクティスブック 7
with Flexbox & レスポンシブテーブル

{alttext}
LEVEL 3

メインコンテンツがレスポンシブテーブルなページをFlexboxを中心に新旧さまざまなテクニックを使って構築します。

作例の詳細PDF

本書で完成させる作例の詳細についてはPDFで公開していますので、参考にしてください。『おすすめの活用方法』のように、作例を見ないでチャレンジされる方はご注意ください。

本書についてAbout This Book

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

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

作例Case Study

  • 本書ではメインコンテンツがレスポンシブテーブルなページを作成します。
  • レイアウトにはFlexbox(フレキシブルボックス)を使用します。。
  • モバイルファースト & レスポンシブ で作成します。
{alttext}

制作ステップStep By Step

  • STEP 1 ではデザインカンプを解析します。パーツを抽出してHTMLでどのようにマークアップするかを検討し、コーディングの手順を決めていきます。
  • STEP 2 ではHTMLとCSSファイルを用意し、基本的な設定を行います。
  • STEP 3 以降ではパーツ単位でページを形にしていきます。
  • 最後の「仕上げと最終チェック」では完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
  • 各ステップでの作業は、次のようなページ構成でまとめています。
{alttext}

もくじContents

  • デザインカンプと指示書
  • 作例
    • デザインカンプの解析
      • デザインカンプと指示書からの第一印象
      • デザインカンプから大きなパーツを抽出する
        • 共通しているパーツを確認する
      • パーツのマークアップを検討する
        • 記述順を決める
      • 見出しのマークアップを検討する
      • ブレークポイントを検討する
      • コーディングの手順
        • コーディングの基本方針
    • コーディングの準備
      • HTML / CSS / 画像の準備
        • 画像を用意する
        • HTMLとCSSを用意する
        • HTMLの基本設定を記述する
        • COLUMN Google Fontsの設定
        • CSSの基本設定を記述する
      • 表示を確認する準備
        • モバイル版とPC版の画面サイズ
        • 特定の画面サイズで表示を確認する方法
    • メインコンテンツ
      • メインコンテンツの作成
      • メインコンテンツの見出しとサブタイトルを表示する
      • ページの背景をグラデーションにする
        • ページの背景の設定を確認する
        • グラデーションの設定を取得して適用する
      • 白いカード型のデザインにする
        • PC版の表示を整える
      • 左右の余白と横幅を調整する
        • 左右の余白と横幅を確認する
        • 左右の余白と横幅を指定する
    • テーブル
      • テーブル(順位表)の作成
      • テーブルを表示する
        • テーブルの構造を確認する
        • 1行目を作成する
        • 2行目を作成する
        • 残りの行を追加する
        • 行のグループを明示する
      • テーブルの表示を整える
        • テーブルの横幅を整える
        • セル内の余白と罫線の表示を整える
        • 行揃えと文字の太さを整える
        • セルの横幅と背景色を整える
        • 行の背景色を交互に変える
        • 2列目の右側に影をつける
      • チームのロゴ画像を追加する
        • ロゴ画像を追加する
        • ロゴ画像とテキストを縦方向中央で揃える
        • すべてのチームのロゴ画像を表示する
      • 試合結果をアイコン画像に置き換える
        • アイコン画像に置き換える
        • すべての試合結果をアイコン画像に置き換える
        • COLUMN 画像の間に余白が入る理由
        • COLUMN 改行の有無に関係なく画像の間の余白サイズを調整する方法
    • レスポンシブテーブル
      • レスポンシブテーブルの作成
      • 画面幅を小さくしたときのテーブルの表示を確認する
      • モバイル版のテーブルのデザインを確認する
      • 見出しを縦書きにする
      • 2列目の横幅を短くする
        • テキストがセルの横幅いっぱいに表示されるのを防ぐ
      • テーブルを横スクロールで閲覧できるようにする
        • テーブルの最小幅を指定する
        • 横スクロールで閲覧できるようにする
      • 見出しを固定したレスポンシブテーブルにする
        • 画面幅を変えて表示を確認する
    • 対戦カード
      • 対戦カードの作成
      • 対戦カードを表示する
      • 対戦カードの表示を整える
        • チームの表示を整える
        • 日時の表示を整える
      • チームと日時の情報を横並びにする
        • チームロゴを左右対称に配置する
        • チームと日時の間隔を調整する
        • チームロゴの上部を揃える
        • 画面幅を変えて表示を確認する
      • PC版の表示を整える
        • 画像とフォントのサイズを調整する
        • ロゴ画像とチーム名を横並びにする
        • チーム名、ロゴ画像、日時の間隔を調整する
      • 左端に装飾を追加する
        • チーム名が装飾に重ならないようにする
        • 複数行になったときのチーム名の行揃えを指定する
      • 3段階のレスポンシブにする
        • 中間の表示を検討する
        • サイズの設定を新しいブレークポイントで適用する
        • 画像の左右の余白サイズを可変にする
        • レスポンシブの表示を確認する
    • フッター
      • フッターの作成
      • フッターメニューを表示する
      • メニューの並びを整える
        • メニューを2列に並べる
        • PC版では横一列に並べる
        • COLUMN メインコンテンツとフッターの間隔(マージンの重ね合わせ)
      • テキストメニューの表示を整える
        • PC版の表示を整える
      • SNSメニューの表示を整える
        • 最終行の下マージンを削除する
      • 帰属情報を表示する
        • 表示を整える
      • 装飾を表示する
        • PC版の配置を調整する
    • ヒーロー
      • ヒーローの作成
      • ヒーローイメージを表示する
        • ヒーローイメージの構成を検討する
        • プレースホルダ画像を用意する
        • プレースホルダ画像をbase64に変換する
        • プレースホルダ画像を表示する
        • 色合いを調整するレイヤーを追加する
        • 明るさを調整するレイヤーを追加する
        • メインイメージを表示する
      • ヒーローイメージをフォーカスインで表示する
        • デザインカンプでアニメーションの設定を確認する
        • アニメーションを設定する
      • ヒーローのコンテンツを表示する
        • 表示を整える
      • レイアウトシフト(CLS)を防ぐ
        • COLUMN レイアウトシフト(CLS)を確認する
        • 画像によるレイアウトシフトを防ぐ
        • Webフォントによるレイアウトシフトを防ぐ
      • タイトルと文章の横幅を揃える
        • COLUMN min-contentを使った横幅の指定
      • 画像とテキストを横並びにする
        • テキストの表示を整える
      • 画像を可変幅にして3段階のレスポンシブにする
        • フィールド画像を可変にする
        • テキストの設定を新しいブレークポイントで適用する
        • 画面幅320ピクセルに対応する
      • タイトルにアニメーションを設定する
        • アニメーションを設定する
    • ヘッダーとナビゲーション
      • ヘッダーとナビゲーションの作成
      • ヘッダーを表示する
      • ヘッダーの表示を整える
        • ボタンをハンバーガーの形にする
      • ナビゲーションメニューを表示する
        • ナビゲーションメニューの表示を整える
      • ナビゲーションメニューをボタンで開閉する
        • JavaScriptを追加する
        • アニメーションの設定を確認する
        • メニューを開閉させる
        • 閉じるボタンを用意する
        • PC版の表示を確認する
    • 仕上げと最終チェック
      • ページを仕上げる
        • メインコンテンツをヒーローに重ねる
        • IEの表示を確認する
      • レスポンシブを確認する
      • ヒーローイメージを変更したときの表示を確認する
        • Test Case 1
        • Test Case 2
      • HTMLの文法と文書構造を確認する

Digital device mockup set designed by rawpixel.com / Freepik

Ornamental flowers background designed by Freepik

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