実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 8with モダンコーディング & Overlappingデザイン
（要素を重ねるデザイン）
LEVEL 5
画像やテキストを重ねた複雑なデザインをモダンコーディングを活用して構築します。
作例の詳細PDF
本書で完成させる作例の詳細についてはPDFで公開していますので、参考にしてください。『おすすめの活用方法』のように、作例を見ないでチャレンジされる方はご注意ください。
本書についてAbout This Book
本書は、デザインカンプと指示書をもとに、Webページをコーディングしてみる実践シリーズです。
本書のプロジェクトではOverlappingデザイン（要素を重ねるデザイン）が施されたハウスメーカーのWebサイトを作成します。
ダウンロードデータ収録内容
- Figma および XDで作成されたデザインカンプ
- 指示書
- 画像ファイル
- HTML＆CSSコード（本書で解説する作例の完成コードです）
作例Case Study
「作例」では、実際にどのような手順で、どのように考えてコーディングしていくのかをステップ・バイ・ステップで解説します。
作例のポイント
- モダンコーディングで作成します。
《CSSグリッド、Fluidタイポグラフィ／可変サイズ、CSS変数を使った可変サイズの管理、clamp()、aspect-ratio、object-fit、display: contents など》 - パーツや構成要素ごとに最適なレイアウト手法（CSS Grid／Flexbox／position）を使用します。
- デザインカンプを元にゼロからコーディングします。
- モバイルファースト ＆ レスポンシブ で作成します。
制作ステップStep By Step
- STEP 1 ではデザインカンプを解析します。パーツを抽出し、HTMLでどのようにマークアップするか、CSSでどのようにレイアウトするかを検討し、コーディングの手順を決めていきます。
- STEP 2 ではHTMLとCSSファイルを用意し、基本的な設定を行います。
- STEP 3 では可変なフォントサイズ（Fluidタイポグラフィ）の設定を行い、メディアクエリなしで主要なテキストをレスポンシブに対応させます。
- STEP 4 以降ではパーツ単位でページを形にしていきます。
- 最後の「仕上げと最終チェック」では完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
もくじContents
- デザインカンプと指示書
- 作例
- デザインカンプの解析
- デザインカンプと指示書からの第一印象
- デザインカンプから大きなパーツを抽出する
- どうやってレイアウトするかを検討する
- シンプルなレイアウトのパーツ
- 複雑なレイアウトのパーツ（モバイルの場合）
- 複雑なレイアウトのパーツ（PCの場合）
- パーツのマークアップを検討する
- 見出しのマークアップを検討する
- コーディングの手順
- コーディングの基本方針
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- COLUMN Google Fontsの設定
- CSSの基本設定
- 繰り返し使う値をCSS変数で指定する
- CSSの基本設定を追加する
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- 可変なフォントサイズ（Fluidタイポグラフィ）
- 画面幅に合わせてフォントサイズを変化させる
- Fluidタイポグラフィの設定
- clamp()の設定をCSS変数で手軽に取得できるようにする
- 他のテキストもフォントサイズを可変にする
- テキストを追加する
- フォントサイズを可変にする
- フォントサイズ以外のスタイルを指定する
- グラデーションテキストにする
- グラデーションの設定を確認・取得する
- グラデーションを適用する
- 番号にもグラデーションを適用する
- 画面幅を変えたときの表示を確認する
- セクションの間隔を可変サイズで指定する
- セクションの間隔を可変サイズで指定する
- 画面幅に合わせてフォントサイズを変化させる
- ヘッダー
- ヘッダーの作成
- ヘッダーをどうやって形にするかを検討する
- ヘッダーを追加する
- ロゴ画像とボタンのサイズを指定する
- ハンバーガーボタンの表示を整える
- ボタンの標準のスタイルを解除する
- ３本のバーを表示する
- 閉じるマークを作成する
- ハンバーガーと閉じるマークが可変サイズなことを確認する
- ヘッダーの作成
- ヒーロー
- ヒーローの作成
- 画像の追加とテキストのグループ化
- モバイル版のレイアウトを整える
- ７列のグリッドを作成する
- テキストのグループを解除する
- テキストと画像の配置を調整する
- 画像の表示を整える
- 間隔や余白を調整する
- ヘッダーとヒーローの間隔を調整する
- 画像01の上の余白を調整する
- PC版のレイアウトを整える
- テキストと画像の配置を指定する
- テキストの配置や画像の縦横比を整える
- レスポンシブの表示を確認・調整する
- 文章の配置を変更する
- レスポンシブの仕上がりを確認する
- セクションの装飾
- 装飾を追加する
- 四角形を追加する
- 三角形を追加する
- 四角形のサイズと位置を調整する
- 計算して値を求める場合
- FigmaのInspectからコードをコピーする場合
- コピーしたコードを適用する
- PC版のサイズと位置も指定する
- 三角形の位置を調整する
- PC版の位置も指定する
- 装飾を追加する
- セクション01（画像とテキスト）
- セクション01の作成
- 画像の追加とテキストのグループ化
- モバイル版のレイアウトを整える
- Moreリンクの表示を整える
- PC版のレイアウトを整える
- テキストと画像の配置を指定する
- 位置揃えやサイズを調整する
- ヒーローセクションと重ねる
- 番号のレスポンシブの表示を修正する
- 装飾を追加する
- ２つ目の三角形を追加する
- セクション02（画像とテキスト）
- セクション02の作成
- 画像の追加とテキストのグループ化
- テキストと画像の配置を整える
- PC版のレイアウトを整える
- テキストと画像の配置を指定する
- 位置揃えやサイズを調整する
- 装飾を追加する
- セクション03（記事リスト）
- セクション03の作成
- テキストのレイアウトを整える
- グリッドを作ってPC版のレイアウトを整える
- 記事リストを作成する
- 記事リストのレイアウトを整える
- 記事リストを横並びにする
- 装飾を追加する
- CTA / フッター / ナビゲーション
- 残りのパーツを追加する
- 共通している部分を洗い出す
- 縦横中央に配置する設定の用意
- CTAパーツを追加する
- フッターパーツを追加する
- CTAパーツの表示を整える
- ボタンの左右に装飾画像を表示する
- ボタンの形にする
- フッターの表示を整える
- ロゴ画像のサイズを整える
- メニューの表示を整える
- レスポンシブの表示を確認する
- ナビゲーションメニューを作成する
- オーバーレイの形にする
- ロゴ画像とメニューを表示する
- ハンバーガーボタンで開閉する
- 残りのパーツを追加する
- 仕上げと最終チェック
- レスポンシブを確認する
- HTMLの文法と文書構造を確認する
- デザインカンプの解析
※Digital device mockup set designed by rawpixel.com / Freepik
※Ornamental flowers background designed by Freepik
