実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 6with CSS Grid & 12分割グリッド
LEVEL 2
12分割グリッドでデザインされたショッピング系サイトをCSS Gridによる12分割グリッドで構築します。
作例の詳細PDF
本書で完成させる作例の詳細についてはPDFで公開していますので、参考にしてください。『おすすめの活用方法』のように、作例を見ないでチャレンジされる方はご注意ください。
本書についてAbout This Book
本書は、デザインカンプと指示書をもとに、Webページをコーディングしてみる実践シリーズです。
- デザインカンプはAdobe XDで作成されています。
- デザインカンプと作例はダウンロードデータに同梱してあります。
作例Case Study
- 本書で作成するのはショッピング系サイトのトップページとコンテンツページです。
- レイアウトにはCSSグリッドを使用します。
- IE11には対応しません。
- モバイルファースト ＆ レスポンシブ で作成します。
制作ステップStep By Step
- STEP 1 ではデザインカンプを解析します。パーツを抽出し、CSSグリッドをどのように活用してレイアウトしていくかを検討します。
- STEP 2 ではHTMLとCSSファイルを用意し、基本的な設定を行います。
- STEP 3～5 ではグリッドを作成します。
- STEP 6 以降では作成済みのグリッドを使用して、トップページやコンテンツページを仕上げていきます。
- 最後の「仕上げと最終チェック」では、完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
- 各ステップでの作業は、次のようなページ構成でまとめています。
もくじContents
- デザインカンプと指示書
- 作例
- デザインカンプの解析
- デザインカンプと指示書からの第一印象
- グリッドとは何か
- 12分割である理由
- COLUMN モバイル用のレイアウトで使用されるグリッド
- CSSグリッドで12分割のグリッドを作ってレイアウトする
- どこでグリッドを作成するか
- デザインカンプから大きなパーツを抽出する
- トップページを構成するパーツ
- コンテンツページを構成するパーツ
- 共通しているパーツ
- パーツのマークアップを検討する
- トップページのマークアップ
- コンテンツページのマークアップ
- ページを区別するクラス名
- 記述順を決める
- 見出しのマークアップを検討する
- トップページ
- コンテンツページ
- COLUMN 見出しのマークアップについて
- マークアップを踏まえてグリッドを考える
- コーディングの手順
- コーディングの基本方針
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- COLUMN Google Fontsの設定
- CSSの基本設定を記述する
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- 12分割グリッドの作成
- グリッドを作成してレイアウトを形にしていく
- 一覧パーツを表示する
- グリッドが必要なところを検討する
- 見出し・説明文・リストの場合
- リストの中身の場合
- グリッドを作成する
- COLUMN 等分割でレスポンシブなグリッドの設定
- １カラムのレイアウトにする
- PC版の設定をする
- 見出しと説明文の表示を整える
- <h2>と<p>の配置を指定する
- <h2>、<p>、<ul>の間隔を調整する
- テキストのデザインを整える
- 12分割グリッドの活用
- 12分割グリッドで複数カラムのレイアウトを作成する
- モバイル版を２カラムレイアウトにする
- グリッドを作成する
- ２カラムレイアウトにする
- PC版を４カラムレイアウトにする
- COLUMN 同じグリッドを使ったレイアウト
- ３カラムや２カラムレイアウトの設定を用意する
- ３カラムレイアウトの設定を用意する
- PC版が３カラムのときのモバイル版の表示を設定する
- ２カラムレイアウトの設定を用意する
- 項目の上下の間隔を調整する
- 画像と項目名の表示を整える
- モバイル版の表示を整える
- PC版の表示を整える
- ３カラムのときの画像の高さを整える
- ４カラムに戻す
- COLUMN 項目が増えたときの表示
- 一覧パーツの仕上げ
- 一覧パーツを仕上げる
- グリッドの左右に余白を入れる
- どこで左右の余白を作成するか
- どうやって左右の余白を作成するか
- 余白のためのグリッドを作成する
- COLUMN グリッドの列の横幅を確認する
- COLUMN パーツグリッド内の12分割グリッドの構造
- 一覧パーツを増やす
- パーツの上下に余白を入れる
- PC版の余白サイズを調整する
- リストを追加する
- 体験一覧のリストを追加する
- 人気商品一覧のリストを追加する
- パーツの背景に色をつける
- パーツをボーダーで囲む
- モバイル版の表示を整える
- PC版の表示を整える
- ボーダー内の12分割グリッドの設定を分ける
- COLUMN ボーダーで囲む設定を他の一覧パーツに適用する
- 装飾画像を表示する
- 装飾画像の配置の調整方法を検討する
- 装飾画像を表示する
- PC版の配置を調整する
- フッター
- フッターの作成
- フッターメニューを表示する
- フッターメニューの表示を整える
- フッター全体の表示を整える
- メニューの中身の配置を整える
- メニューの見出しとリンクの表示を整える
- サイト情報を表示する
- サイト情報の表示を整える
- メニューとサイト情報の間に余白を入れる
- サイト情報の中身の配置を整える
- プロフィールとコピーライトの表示を整えます
- COLUMN フッターのレイアウトに使用したグリッド
- ヘッダー
- ヘッダーの作成
- ナビゲーションを表示する
- Font Awesomeのアイコンを使えるようにする
- ショッピングカートのアイコンを表示する
- ナビゲーションの表示を整える
- メニューとアイコンの表示を整える
- PC版の表示を整える
- キャッチコピーとヘッダー画像を表示する
- キャッチコピーとボタンの表示を整える
- PC版の表示を整える
- ディバイダーを表示する
- ディバイダーを作成する
- HTMLのコードを追加する
- CSSのコードを追加する
- レスポンシブの表示を確認する
- 商品情報（コンテンツページのパーツ）
- コンテンツページと商品情報の作成
- コンテンツページを作成する
- ナビゲーションの表示を調整する
- 人気商品一覧の表示を調整する
- 商品画像を表示する
- 商品画像の配置を整える
- 本文と注文フォームを追加する
- 本文を追加する
- 注文フォームを追加する
- 本文と注文フォームの配置を整える
- PC版の配置を整える
- 本文の表示を整える
- PC版の表示を整える
- 装飾画像を表示する
- リストにアイコンをつける
- 注文フォーム（コンテンツページのパーツ）
- 注文フォームの仕上げ
- 注文フォームの表示を整える
- 価格と数量の表示を整える
- プルダウン型の選択肢の表示を整える
- 「カートに入れる」ボタンの表示を整える
- ショッピングカートのアイコンを表示する
- レスポンシブの表示を確認する
- 仕上げと最終チェック
- レスポンシブを確認する
- HTMLの文法と文書構造を確認する
- トップページ
- コンテンツページ
- デザインカンプの解析
※Digital device mockup set designed by rawpixel.com / Freepik
※Ornamental flowers background designed by Freepik
