実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 2with Flexbox & vm・remを活用したレイアウト
LEVEL 4
カフェ系サイトをHTML&CSSを応用したレスポンシブで構築します。
作例の詳細PDF
本書で完成させる作例の詳細についてはPDFで公開していますので、参考にしてください。『おすすめの活用方法』のように、作例を見ないでチャレンジされる方はご注意ください。
本書についてAbout This Book
本書は、デザインカンプと指示書をもとに、Webページをコーディングしてみる実践シリーズです。
- デザインカンプはAdobe XDで作成されています。
- デザインカンプと作例はダウンロードデータに同梱してあります。
作例Case Study
- 本書で作成するのはカフェ系サイトのページとなっています。
- レイアウトにはFlexbox（フレキシブルボックス）を使用します。
- IE11にも対応します（Polyfillも使用します）
- モバイルファースト ＆ レスポンシブ で作成します。
制作ステップStep By Step
- STEP 1でデザインカンプを解析し、パーツを抽出してHTMLでどのようにマークアップするかを検討します。さらに、レイアウトのポイントや、CSSで設定していく上で注意したい個所などを洗い出します。
- STEP 2ではHTMLとCSSファイルを用意し、基本的な設定を行います。
- STEP 3以降では、パーツ単位でページを形にしていきます。
- 最後の「仕上げと最終チェック」では、完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
- 各ステップでの作業は、次のようなページ構成でまとめています
もくじContents
- デザインカンプと指示書
- 作例
- デザインカンプの解析
- デザインカンプと指示書からの第一印象
- コーディングの手順
- コーディングの基本方針
- デザインカンプから大きなパーツを抽出する
- 区切りごとに主な内容を書き出してみる
- パーツを見せたい流れ（視線の流れ）を確認する
- HTMLのマークアップを検討する
- （１）のマークアップ
- （１）のマークアップのパターン
- （２）～（６）のマークアップ
- 見出しのマークアップ
- クラスによるパーツの区別
- レイアウトのポイントを確認する
- コンテンツと左右の余白
- コンテンツを揃えた縦のライン
- パーツの上下の余白
- デザインが共通している箇所
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- Google Fontsの設定
- ファビコンの設定
- CSSの基本設定を記述する
- デザインカンプの文字の色とフォント
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- パーツの設定 ［ヘッダーとヒーローイメージ］
- ヘッダーとヒーローイメージ
- ヒーローイメージを表示する
- ヒーローイメージを画面の高さに合わせる
- キャッチコピーのPCでの表示位置を調整する
- 矢印を追加する
- 疑似要素で読み込んだ画像のサイズ指定
- ヘッダーを作成する
- ヘッダーの表示を整える
- 左右に可変な余白を入れる
- ナビゲーションメニューを機能させる
- ボタンの表示を整える
- ナビゲーションメニューをオーバーレイの形で表示する
- メニューとボタンのデザインを整える
- メニューの表示位置を微調整する
- ボタンで開閉する設定を行う
- PC版のメニューの表示を整える
- パーツの設定 ［コンテンツとフッター］
- コンテンツとフッター
- パーツを追加する
- パーツの背景を設定する
- 余白の設定を行う
- タイトルとサブタイトルの表示を整える
- パーツの設定 ［こだわりメニュー］
- こだわりメニューを追加する
- 基本的なデザインを整える
- テキストの横幅と配置を調整する
- 画像の横幅と配置を調整する
- こだわりメニューのPC版のレイアウトを整える
- テキストと画像を横に並べる
- カフェのレイアウトを整える
- プレートのレイアウトを整える
- スイーツのレイアウトを整える
- イラストを重ねてこだわりメニューを仕上げる
- イラストを表示する
- タイトルとサブタイトルを画像の横に並べる
- こだわりメニューを追加する
- パーツの設定 ［お知らせ］
- お知らせを作成する
- お知らせを追加する
- テキストの間隔を調整する
- テキストの間隔
- リンクの表示を整える
- 背景の境界に効果を追加する
- PC版の表示を整える
- 日付と本文を横並びにする
- パーツの設定 ［営業時間］
- 営業時間を作成する
- 背景画像を暗くする
- 営業時間を追加する
- 曜日と時間を中央に配置する
- 時間の文字数増加に対応する
- パーツの設定 ［カフェ情報］
- カフェ情報を作成する
- カフェ情報を追加する
- カフェ情報の表示を整える
- カフェ情報の配置と間隔を調整する
- テキストと地図を横に並べる
- 細かな表示を整える
- 仕上げと最終チェック
- IEに対応する
- レスポンシブを確認する
- HTMLの文法と文書構造を確認する
- デザインカンプの解析
※Digital device mockup set designed by rawpixel.com / Freepik
※Ornamental flowers background designed by Freepik
