実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 5with CSS Grid & マルチページ
LEVEL 2
ブランド系サイトのトップページとコンテンツページをCSS Gridの基本を活かして構築します。
作例の詳細PDF
本書で完成させる作例の詳細についてはPDFで公開していますので、参考にしてください。『おすすめの活用方法』のように、作例を見ないでチャレンジされる方はご注意ください。
本書についてAbout This Book
本書は、デザインカンプと指示書をもとに、Webページをコーディングしてみる実践シリーズです。
- デザインカンプはAdobe XDで作成されています。
- デザインカンプと作例はダウンロードデータに同梱してあります。
作例Case Study
- 本書で作成するのはブランド系サイトのトップページとコンテンツページです。
- レイアウトにはCSSグリッドを使用します。
- IE11には対応しません。
- モバイルファースト ＆ レスポンシブ で作成します。
制作ステップStep By Step
- STEP 1 ではデザインカンプを解析します。パーツを抽出し、CSSグリッドをどのように活用してレイアウトしていくかを検討します。
- STEP 2 ではHTMLとCSSファイルを用意し、基本的な設定を行います。
- STEP 3～4 ではレイアウトに使用するグリッドを作成します。
- STEP 5 以降では作成済みのグリッドを使用して、メインコンテンツをレイアウトしていきます。
- 最後の「仕上げと最終チェック」では、完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
- 各ステップでの作業は、次のようなページ構成でまとめています。
もくじContents
- デザインカンプと指示書
- 作例
- デザインカンプの解析
- デザインカンプと指示書からの第一印象
- デザインカンプから大きなパーツを抽出する
- 全ページ共通のパーツ
- メインコンテンツを構成するパーツ
- 抽出したパーツをどうやってレイアウトするかを検討する
- CSSグリッドをどのように活用するかを検討する
- 敷き詰めるためのグリッド
- ガイドとして使うためのグリッド
- メインコンテンツをどうやってレイアウトするかを検討する
- 見出しのマークアップを検討する
- トップページ
- コンテンツページ
- コーディングの手順
- コーディングの基本方針
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- COLUMN Google Fontsの設定
- CSSの基本設定を記述する
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- ページグリッドの作成
- ページグリッドでページの枠組みを形にする
- ページグリッドを作成する
- グリッドにパーツを配置する
- パーツを追加する
- 敷き詰める形で自動配置されたことを確認する
- グリッドをガイドとして使用してパーツの配置を指定する
- ナビゲーションボタンの表示を整える
- ボタン内に白線を表示する
- SNSメニューと縦書きテキストの表示を整える
- SNSメニューの表示を整える
- 縦書きテキストの表示を整える
- フッターの背景に色を付ける
- PC版の表示を整える
- PC版のページグリッドの構造を確認する
- SNSメニューの配置を調整する
- 縦書きテキストの配置を調整する
- 丸付きラインを表示する
- COLUMN グリッドに配置したパーツのサイズ
- パーツグリッドの作成
- パーツグリッドでフッターのレイアウトを整える
- フッターの中身を追加する
- パーツグリッドを作成する
- 敷き詰める形で自動配置されたことを確認する
- すべてのグリッドアイテムを２列目に配置する
- COLUMN 自動生成された行列のライン番号
- フッターの表示を整える
- フッターのレイアウトをどのように実現するかを検討する
- 上部を揃えて左右に配置する
- チャットアイコンの表示位置を上に動かす
- テキストの表示を整える
- パーツグリッドのPC版の設定を用意する
- 画面幅を変えて表示を確認する
- PC版のパーツグリッドをレスポンシブにする
- COLUMN ページの枠組み全体のレスポンシブの表示
- メインコンテンツ（ヘッダー画像と記事）
- メインコンテンツの作成
- メインコンテンツの配置を指定する
- ヘッダー画像を表示する
- ヘッダー画像の表示を整える
- PC版の表示を整える
- 記事を表示する
- 記事の表示を整える
- PC版の表示を整える
- レスポンシブの表示を確認する
- ギャラリー
- ギャラリーの作成
- 画像を表示する
- 画像を敷き詰めて並べるためのグリッドを作成する
- グリッドエリアで配置先を指定する
- グリッドとエリアの構造を変えてPC版を作成する
- ギャラリーの上下の余白を調整する
- ヒーローヘッダー（トップページのパーツ）
- ヒーローヘッダーを作成する
- トップページを作成する
- ヒーローヘッダーを表示する
- ヒーローヘッダーをどうやって実現するかを検討する
- 設定を追加してマークアップする
- ヒーローヘッダーの表示を整える
- テキストと画像を重ねて白黒反転させる
- テキストと画像の表示位置を調整する
- PC版の表示を整える
- レスポンシブの表示を整える
- モバイル版のレスポンシブを整える
- PC版のレスポンシブを整える
- 装飾パーツを上にして仕上げる
- メッセージ（トップページのパーツ）
- メッセージを作成する
- メッセージを表示する
- メッセージのレイアウトをどうやって実現するかを検討する
- 設定を追加してマークアップする
- モバイル版の表示を整える
- 画像とテキストの表示を整える
- 小さい四角形を追加する
- 大きい四角形を追加する
- PC版の表示を整える
- 画像とテキストを横並びにする
- 余白サイズなどを調整する
- 大きい四角形の表示を整える
- レスポンシブの表示を確認する
- ナビゲーションメニュー
- ナビゲーションメニューを作成する
- ナビゲーションメニューをオーバーレイの形で表示する
- メニューの表示を整える
- COLUMN justify-items / justify-content / align-items / align-contentの違い
- ナビゲーションメニューをボタンで開閉する
- JavaScriptを追加する
- クラス名の有無でメニューを開閉する
- 閉じるボタンを用意する
- コンテンツページにも設定を追加する
- PC版の表示を確認する
- 仕上げと最終チェック
- ブレークポイントを決める
- トップページの場合
- コンテンツページの場合
- レスポンシブを確認する
- HTMLの文法と文書構造を確認する
- トップページ
- コンテンツページ
- ブレークポイントを決める
- デザインカンプの解析
※Digital device mockup set designed by rawpixel.com / Freepik
※Ornamental flowers background designed by Freepik
