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

HTML&CSS
コーディング・
プラクティスブック 1
with Flexbox

HTML&CSS コーディング・プラクティスブック 1
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版の画面サイズ
        • 特定の画面サイズで表示を確認する方法
    • パーツの設定 [ヘッダー]
      • ヘッダーを作成する
      • サイト名を表示する
        • 画像とテキストを横に並べる
      • ナビゲーションメニューのボタンを追加する
        • ハンバーガーの形にする
      • ヘッダーの表示を整える
      • PC版のヘッダーの表示を整える
        • ヘッダーの中身の横幅を調整する
        • ブレークポイントを設定する
        • サイト名をPC版の表示にする
    • パーツの設定 [ヒーローイメージ]
      • ヒーローイメージを作成する
      • ヒーローイメージを表示する
      • キャッチコピーを表示する
        • キャッチコピーとサブキャッチの表示を整える
        • キャッチコピーとサブキャッチの表示順を逆にする
      • PC版の表示を整える
      • IE11での表示を整える
    • パーツの設定 [メッセージ]
      • メッセージを作成する
      • メッセージを表示する
      • 横幅と余白サイズを調整する
      • PC版の表示を整える
      • カンプより小さい画面での表示を整える
    • パーツの設定 [サービス]
      • サービスを作成する
      • タイトルとサブタイトルを表示する
        • タイトルとサブタイトルの表示を整える
      • サービスの詳細を表示する
        • 詳細の表示を整える
        • 画像を表示する
      • ボタンの表示を整える
      • 詳細を横に並べる
        • 横に並べた詳細の表示を整える
      • ボタンの表示位置を揃える
        • ボタンの表示位置が揃う仕組み
    • パーツの設定 [お問い合わせ]
      • お問い合わせを作成する
      • 見出しと文章を表示する
        • 見出しと文章の表示を整える
      • フォームを表示する
      • 入力フィールドの表示を整える
        • フィールド内のテキストの表示を整える
      • 送信ボタンの表示を整える
        • 送信ボタンのPC版の表示を整える
      • PC版の表示を整える
        • テキストとフォームを横に並べる(1)
        • テキストとフォームを横に並べる(2)
        • お問い合わせの中身の横幅に関する設定
    • パーツの設定 [フッター]
      • フッターを作成する
      • サイト名を表示する
      • 住所を表示する
      • 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

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