実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 7with Flexbox & レスポンシブテーブル
LEVEL 3
メインコンテンツがレスポンシブテーブルなページをFlexboxを中心に新旧さまざまなテクニックを使って構築します。
作例の詳細PDF
本書で完成させる作例の詳細についてはPDFで公開していますので、参考にしてください。『おすすめの活用方法』のように、作例を見ないでチャレンジされる方はご注意ください。
本書についてAbout This Book
本書は、デザインカンプと指示書をもとに、Webページをコーディングしてみる実践シリーズです。
- デザインカンプはAdobe XDで作成されています。
- デザインカンプと作例はダウンロードデータに同梱してあります。
作例Case Study
- 本書ではメインコンテンツがレスポンシブテーブルなページを作成します。
- レイアウトにはFlexbox（フレキシブルボックス）を使用します。。
- モバイルファースト ＆ レスポンシブ で作成します。
制作ステップStep By Step
- STEP 1 ではデザインカンプを解析します。パーツを抽出してHTMLでどのようにマークアップするかを検討し、コーディングの手順を決めていきます。
- STEP 2 ではHTMLとCSSファイルを用意し、基本的な設定を行います。
- STEP 3 以降ではパーツ単位でページを形にしていきます。
- 最後の「仕上げと最終チェック」では完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
- 各ステップでの作業は、次のようなページ構成でまとめています。
もくじContents
- デザインカンプと指示書
- 作例
- デザインカンプの解析
- デザインカンプと指示書からの第一印象
- デザインカンプから大きなパーツを抽出する
- 共通しているパーツを確認する
- パーツのマークアップを検討する
- 記述順を決める
- 見出しのマークアップを検討する
- ブレークポイントを検討する
- コーディングの手順
- コーディングの基本方針
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- COLUMN Google Fontsの設定
- CSSの基本設定を記述する
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- メインコンテンツ
- メインコンテンツの作成
- メインコンテンツの見出しとサブタイトルを表示する
- ページの背景をグラデーションにする
- ページの背景の設定を確認する
- グラデーションの設定を取得して適用する
- 白いカード型のデザインにする
- PC版の表示を整える
- 左右の余白と横幅を調整する
- 左右の余白と横幅を確認する
- 左右の余白と横幅を指定する
- テーブル
- テーブル（順位表）の作成
- テーブルを表示する
- テーブルの構造を確認する
- １行目を作成する
- ２行目を作成する
- 残りの行を追加する
- 行のグループを明示する
- テーブルの表示を整える
- テーブルの横幅を整える
- セル内の余白と罫線の表示を整える
- 行揃えと文字の太さを整える
- セルの横幅と背景色を整える
- 行の背景色を交互に変える
- ２列目の右側に影をつける
- チームのロゴ画像を追加する
- ロゴ画像を追加する
- ロゴ画像とテキストを縦方向中央で揃える
- すべてのチームのロゴ画像を表示する
- 試合結果をアイコン画像に置き換える
- アイコン画像に置き換える
- すべての試合結果をアイコン画像に置き換える
- COLUMN 画像の間に余白が入る理由
- COLUMN 改行の有無に関係なく画像の間の余白サイズを調整する方法
- レスポンシブテーブル
- レスポンシブテーブルの作成
- 画面幅を小さくしたときのテーブルの表示を確認する
- モバイル版のテーブルのデザインを確認する
- 見出しを縦書きにする
- ２列目の横幅を短くする
- テキストがセルの横幅いっぱいに表示されるのを防ぐ
- テーブルを横スクロールで閲覧できるようにする
- テーブルの最小幅を指定する
- 横スクロールで閲覧できるようにする
- 見出しを固定したレスポンシブテーブルにする
- 画面幅を変えて表示を確認する
- 対戦カード
- 対戦カードの作成
- 対戦カードを表示する
- 対戦カードの表示を整える
- チームの表示を整える
- 日時の表示を整える
- チームと日時の情報を横並びにする
- チームロゴを左右対称に配置する
- チームと日時の間隔を調整する
- チームロゴの上部を揃える
- 画面幅を変えて表示を確認する
- PC版の表示を整える
- 画像とフォントのサイズを調整する
- ロゴ画像とチーム名を横並びにする
- チーム名、ロゴ画像、日時の間隔を調整する
- 左端に装飾を追加する
- チーム名が装飾に重ならないようにする
- 複数行になったときのチーム名の行揃えを指定する
- ３段階のレスポンシブにする
- 中間の表示を検討する
- サイズの設定を新しいブレークポイントで適用する
- 画像の左右の余白サイズを可変にする
- レスポンシブの表示を確認する
- フッター
- フッターの作成
- フッターメニューを表示する
- メニューの並びを整える
- メニューを２列に並べる
- PC版では横一列に並べる
- COLUMN メインコンテンツとフッターの間隔（マージンの重ね合わせ）
- テキストメニューの表示を整える
- PC版の表示を整える
- SNSメニューの表示を整える
- 最終行の下マージンを削除する
- 帰属情報を表示する
- 表示を整える
- 装飾を表示する
- PC版の配置を調整する
- ヒーロー
- ヒーローの作成
- ヒーローイメージを表示する
- ヒーローイメージの構成を検討する
- プレースホルダ画像を用意する
- プレースホルダ画像をbase64に変換する
- プレースホルダ画像を表示する
- 色合いを調整するレイヤーを追加する
- 明るさを調整するレイヤーを追加する
- メインイメージを表示する
- ヒーローイメージをフォーカスインで表示する
- デザインカンプでアニメーションの設定を確認する
- アニメーションを設定する
- ヒーローのコンテンツを表示する
- 表示を整える
- レイアウトシフト（CLS）を防ぐ
- COLUMN レイアウトシフト（CLS）を確認する
- 画像によるレイアウトシフトを防ぐ
- Webフォントによるレイアウトシフトを防ぐ
- タイトルと文章の横幅を揃える
- COLUMN min-contentを使った横幅の指定
- 画像とテキストを横並びにする
- テキストの表示を整える
- 画像を可変幅にして３段階のレスポンシブにする
- フィールド画像を可変にする
- テキストの設定を新しいブレークポイントで適用する
- 画面幅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
