実践
シリーズ
シリーズ
HTML&CSS
コーディング・
プラクティスブック 1with Flexbox
LEVEL 2
コーポレート系サイトを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のマークアップを検討する
- 見出しの抽出
- クラスによるパーツの区別
- レイアウトのポイントを確認する
- コンテンツの横幅と左右の余白
- パーツの上下の余白
- デザインが共通している箇所
- IE11に対応する方法を検討する
- コーディングの準備
- HTML / CSS / 画像の準備
- 画像を用意する
- HTMLとCSSを用意する
- HTMLの基本設定を記述する
- Google Fontsの設定
- CSSの基本設定を記述する
- 表示を確認する準備
- モバイル版とPC版の画面サイズ
- 特定の画面サイズで表示を確認する方法
- HTML / CSS / 画像の準備
- パーツの設定 ［ヘッダー］
- ヘッダーを作成する
- サイト名を表示する
- 画像とテキストを横に並べる
- ナビゲーションメニューのボタンを追加する
- ハンバーガーの形にする
- ヘッダーの表示を整える
- PC版のヘッダーの表示を整える
- ヘッダーの中身の横幅を調整する
- ブレークポイントを設定する
- サイト名をPC版の表示にする
- パーツの設定 ［ヒーローイメージ］
- ヒーローイメージを作成する
- ヒーローイメージを表示する
- キャッチコピーを表示する
- キャッチコピーとサブキャッチの表示を整える
- キャッチコピーとサブキャッチの表示順を逆にする
- PC版の表示を整える
- IE11での表示を整える
- パーツの設定 ［メッセージ］
- メッセージを作成する
- メッセージを表示する
- 横幅と余白サイズを調整する
- PC版の表示を整える
- カンプより小さい画面での表示を整える
- パーツの設定 ［サービス］
- サービスを作成する
- タイトルとサブタイトルを表示する
- タイトルとサブタイトルの表示を整える
- サービスの詳細を表示する
- 詳細の表示を整える
- 画像を表示する
- ボタンの表示を整える
- 詳細を横に並べる
- 横に並べた詳細の表示を整える
- ボタンの表示位置を揃える
- ボタンの表示位置が揃う仕組み
- パーツの設定 ［お問い合わせ］
- お問い合わせを作成する
- 見出しと文章を表示する
- 見出しと文章の表示を整える
- フォームを表示する
- 入力フィールドの表示を整える
- フィールド内のテキストの表示を整える
- 送信ボタンの表示を整える
- 送信ボタンのPC版の表示を整える
- PC版の表示を整える
- テキストとフォームを横に並べる（１）
- テキストとフォームを横に並べる（２）
- お問い合わせの中身の横幅に関する設定
- パーツの設定 ［フッター］
- フッターを作成する
- サイト名を表示する
- 住所を表示する
- SNSへのリンクを表示する
- PC版の表示を整える
- サイト名とSNSへのリンクを縦中央で揃える
- お問い合わせとフッターを重ねる
- パーツの設定 ［ナビゲーションメニュー］
- ナビゲーションメニューを作成する
- ナビゲーションメニューをオーバーレイの形で表示する
- メニューの表示を整える
- 閉じるボタンを表示する
- ボタンで開閉する設定を行う
- JavaScriptを追加する
- PC版のナビゲーションメニューの表示を整える
- 仕上げと最終チェック
- ブレークポイントを決める
- フェードインでページを表示する
- IEでの表示を確認する
- レスポンシブを確認する
- HTMLの文法と文書構造を確認する
- Heading-level outline と Structural outline
- デザインカンプの解析
※Digital device mockup set designed by rawpixel.com / Freepik
※Ornamental flowers background designed by Freepik
