EP EBISUCOM - エビスコム電子書籍出版部
実践
シリーズ

HTML&CSS
コーディング・
プラクティスブック 2
with Flexbox & vm・remを活用したレイアウト

HTML&CSS コーディング・プラクティスブック 2
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のマークアップを検討する
        • (1)のマークアップ
        • (1)のマークアップのパターン
        • (2)~(6)のマークアップ
        • 見出しのマークアップ
        • クラスによるパーツの区別
      • レイアウトのポイントを確認する
        • コンテンツと左右の余白
        • コンテンツを揃えた縦のライン
        • パーツの上下の余白
        • デザインが共通している箇所
    • コーディングの準備
      • HTML / CSS / 画像の準備
        • 画像を用意する
        • HTMLとCSSを用意する
        • HTMLの基本設定を記述する
        • Google Fontsの設定
        • ファビコンの設定
        • CSSの基本設定を記述する
        • デザインカンプの文字の色とフォント
      • 表示を確認する準備
        • モバイル版とPC版の画面サイズ
        • 特定の画面サイズで表示を確認する方法
    • パーツの設定 [ヘッダーとヒーローイメージ]
      • ヘッダーとヒーローイメージ
      • ヒーローイメージを表示する
        • ヒーローイメージを画面の高さに合わせる
        • キャッチコピーのPCでの表示位置を調整する
        • 矢印を追加する
        • 疑似要素で読み込んだ画像のサイズ指定
      • ヘッダーを作成する
        • ヘッダーの表示を整える
        • 左右に可変な余白を入れる
      • ナビゲーションメニューを機能させる
        • ボタンの表示を整える
        • ナビゲーションメニューをオーバーレイの形で表示する
        • メニューとボタンのデザインを整える
        • メニューの表示位置を微調整する
        • ボタンで開閉する設定を行う
        • PC版のメニューの表示を整える
    • パーツの設定 [コンテンツとフッター]
      • コンテンツとフッター
      • パーツを追加する
        • パーツの背景を設定する
      • 余白の設定を行う
      • タイトルとサブタイトルの表示を整える
    • パーツの設定 [こだわりメニュー]
      • こだわりメニューを追加する
        • 基本的なデザインを整える
        • テキストの横幅と配置を調整する
        • 画像の横幅と配置を調整する
      • こだわりメニューのPC版のレイアウトを整える
        • テキストと画像を横に並べる
        • カフェのレイアウトを整える
        • プレートのレイアウトを整える
        • スイーツのレイアウトを整える
      • イラストを重ねてこだわりメニューを仕上げる
        • イラストを表示する
        • タイトルとサブタイトルを画像の横に並べる
    • パーツの設定 [お知らせ]
      • お知らせを作成する
      • お知らせを追加する
      • テキストの間隔を調整する
        • テキストの間隔
      • リンクの表示を整える
      • 背景の境界に効果を追加する
      • PC版の表示を整える
        • 日付と本文を横並びにする
    • パーツの設定 [営業時間]
      • 営業時間を作成する
      • 背景画像を暗くする
      • 営業時間を追加する
        • 曜日と時間を中央に配置する
        • 時間の文字数増加に対応する
    • パーツの設定 [カフェ情報]
      • カフェ情報を作成する
      • カフェ情報を追加する
      • カフェ情報の表示を整える
      • カフェ情報の配置と間隔を調整する
      • テキストと地図を横に並べる
        • 細かな表示を整える
    • 仕上げと最終チェック
      • IEに対応する
      • レスポンシブを確認する
      • HTMLの文法と文書構造を確認する

Digital device mockup set designed by rawpixel.com / Freepik

Ornamental flowers background designed by Freepik

HTML&CSS コーディング・プラクティスブック既刊一覧