実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 4with Flexbox & マルチページ
LEVEL 1
コーポレート系サイトのトップページとコンテンツページを基本的な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～5ではコンテンツページを作成します。
- STEP 6以降ではトップページを作成します。
- 最後の「仕上げと最終チェック」では、完成ページがレスポンシブになっていることを確認し、HTMLの文法チェックや文書構造の確認を行います。
- 各ステップでの作業は、次のようなページ構成でまとめています
もくじContents
- デザインカンプと指示書
- 作例
- デザインカンプの解析
- デザインカンプと指示書からの第一印象
- デザインカンプから大きなパーツを抽出する
- 共通しているパーツを確認する
- パーツのマークアップを検討する
- 見出しのマークアップを検討する
- トップページ
- コンテンツページ
- レイアウトのポイントを確認する
- 左右の余白と横幅の最大値
- 見出しと文章のフォント
- サブタイトルのフォント
- コーディングの手順
- コーディングの基本方針
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- COLUMN Google Fontsの設定
- CSSの基本設定を記述する
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- 記事とヘッダー画像（コンテンツページのパーツ）
- 記事とヘッダー画像を作成する
- 記事を表示する
- 見出しと文章のフォントまわりの表示を整える
- タイトル<h1>の表示を整える
- タイトル内の改行<br>の有効・無効を切り替える
- 小見出し<h2>と文章<p>の表示を整える
- サブタイトル<div>の表示を整える
- 見出しと文章の間隔を調整する
- <h1>・<h2>の上下マージンを調整する
- <p>の上下マージンを調整する
- 見出しと文章の間隔を確認する
- 記事の横幅とまわりの余白を調整する
- モバイル版の横幅と余白を調整する
- PC版の横幅と余白を調整する
- 余白の重ね合わせを確認する
- 小見出しにマーク画像を付ける
- PC版の表示を整える
- PC版の最小幅での表示を整える
- ヘッダー画像を表示する
- 画像の高さを固定して切り抜く
- PC版の表示を整える
- メッセージ（コンテンツページのパーツ）
- メッセージパーツを作成する
- メッセージを表示する
- PC版の表示を整える
- ボタンを追加する
- ボタンの特徴を確認する
- ボタンを表示する
- PC版の表示を整える
- カーソルを重ねたときの表示を整える
- COLUMN ホバーステートのプレビュー
- ヘッダーとフッター
- ヘッダーとフッターを作成する
- ヘッダーとフッターの基本的なレイアウトを設定する
- ヘッダーとフッターの中身を記述する
- ヘッダーとフッターの横幅と余白を調整する
- サイト名の表示を整える
- ナビゲーションメニューの表示を整える
- 住所の表示を整える
- コピーライトの表示を整える
- コンテンツページの表示を確認する
- トップページの作成
- トップページを作成する
- トップページに合わせて編集する
- メッセージの文章の表示を整える
- PC版の表示と横幅を整える
- COLUMN メッセージのパターンと余白
- ヒーローヘッダー（トップページのパーツ）
- ヒーローヘッダーを作成する
- ヒーローヘッダーを表示する
- 画像の表示を整える
- 画像にテキストを重ねる
- テキストの表示を整える
- 間隔を調整する
- 見出し内の改行と文章の表示を整える
- テキストと画像を横並びにして重ねる
- どのようにレスポンシブにするかを検討する
- テキストの表示を整える
- テキストと画像を横に並べる
- 横幅と高さを整える
- テキストを画像に重ねる
- レスポンシブの表示を確認する
- メッセージ（トップページのパーツ）
- メッセージパーツを作成する
- メッセージパーツを追加する
- メッセージの中身を右側に配置する
- ヒーローヘッダーと同じ横幅にする
- 人気のシステム（トップページのパーツ）
- 「人気のシステム」パーツを作成する
- 「人気のシステム」パーツを表示する
- ３つの項目を追加する
- １つ目の項目を追加する
- 残りの項目を追加する
- ３つの項目の表示を整える
- 画像の表示を整える
- テキストの表示を整える
- 横幅を整える
- 画像とテキストを横並びにする
- どのようにレスポンシブにするかを検討する
- 画像とテキストを横に並べる
- テキストの表示を整える
- 画像とテキストの並びを逆にする
- レスポンシブの表示を確認する
- 仕上げと最終チェック
- ブレークポイントを決める
- トップページの場合
- コンテンツページの場合
- IEに対応する
- レスポンシブを確認する
- HTMLの文法と文書構造を確認する
- トップページ
- コンテンツページ
- ブレークポイントを決める
- デザインカンプの解析
※Digital device mockup set designed by rawpixel.com / Freepik
※Ornamental flowers background designed by Freepik
