6ステップでマスターする 「最新標準」HTML+CSSデザイン

~フレキシブルボックスレイアウトを使った、レスポンシブWebデザインの本格的レイアウトテクニック~

マルチデバイス対応のレスポンシブなWebサイトをステップ・バイ・ステップで作成。最新標準のHTML+CSSをマスターすることを目的とした一冊です。

出版日 2016年8月
ISBN 4839960224
ISBN-13 978-4839960223
出版社 マイナビ出版
ページ数 320ページ
判型 B5変型

はじめに これからのWebページ制作

Webページ制作を取り巻く環境は、ここ数年で大きく変化しています。

スマートフォンやタブレットといったモバイルデバイスからのアクセスがPCを凌駕し、それとともにWebページのデザインも1段組みをベースとしたシンプルなものが求められるようになっています。

HTML5は2014年に正式勧告がリリースされ、2年が経とうとしていますが、まもなくHTML5.1の勧告もリリースされる予定です。CSSはさまざまな機能がCSS3やCSS4の規格として採り入れられ、策定作業が進められています。

同時に、OSレベルでのサポートの打ち切りなどにより、ブラウザの世代交代も強制的に進んでおり、主要ブラウザは最新のHTML+CSSをフルにサポートした状態になっています。

こうした現状をあらためてみると、

そろそろHTML5+CSS3の真価を発揮させてもいい時期

になったのではないでしょうか。そこで、本書では古いブラウザに縛られた時代には使い切ることができなかった機能をふんだんに活用し、今どきのWebページをシンプルなステップで形にしていく方法をまとめました。

巻末にはリファレンスも用意していますので、これからWebページ制作を学びはじめる方にも、最新のHTML+CSSに興味がある方にも、これからのWebページ制作に求められるスキルやテクニックをまとめた1冊として、役立てていただければ幸いです。

本書について

本書は、マルチデバイスに対応したWebサイトをステップ・バイ・ステップで作成し、最新標準のHTML+CSSをマスターすることを目的としています。

サンプルの制作ポイント: フレキシブルボックスレイアウト / HTML5 (HTML5.1) + CSS3 / SVG / セマンティクス など

対応ブラウザ

本書のサンプルは主要ブラウザに対応しています。詳しくは著者NOTEを参照してください。

Chrome / Firefox / Edge / IE / Safari / iOS Safari / Android

制作ステップ

本書のサンプルは6ステップで制作・アレンジしていきます。

  1. 下準備

    ページ作成の下準備を行います。

  2. トップページの作成: コンテンツ編

    トップページのコンテンツ部分を作成します。

  3. トップページの作成: ナビゲーション編

    トップページのヘッダーとフッターを作成します。

    完成サンプル: トップページ

  4. コンテンツページの作成

    コンテンツ/アバウト/お問い合わせページを作成します。

    完成サンプル: コンテンツページ / アバウトページ / お問い合わせページ

  5. 記事一覧ページの作成

    記事の概要をリストアップしたページを作成します。

    完成サンプル: 記事一覧ページ

  6. デザインのアレンジ

    ヘッダーのデザインやページの色などをアレンジしていきます。

    アレンジサンプル

もくじ

Chapter 1
下準備
  • 1-3Webページのベースを用意する
    • 1-3-1 HTMLファイルに記述する設定
    • 1-3-2 CSSファイルに記述する設定
Chapter 2
トップページの作成
コンテンツ編
  • 2-1ヒーローイメージ
    • 2-1-1 画像に重ねるテキストを表示する
    • 2-1-2 Webフォントで表示して字間を調整する
    • 2-1-3 ブラウザ画面いっぱいに画像を表示する
    • 2-1-4 SVGでロゴ画像を表示する
    • 2-1-5 リンクボタンを表示する
  • 2-2概要(アイコン+テキスト)
    • 2-2-1 概要のテキストを表示する
    • 2-2-2 アイコンを表示する
    • 2-2-3 3つの概要を横に並べる
  • 2-3概要(画像+テキスト)
    • 2-3-1 画像とテキストを表示する
    • 2-3-2 画像とテキストを横に並べてレイアウトする
  • 2-4概要(画像+テキスト: 逆配置)
    • 2-4-1 コンテンツCをベースに新しいブロックを作成する
    • 2-4-2 画像の横幅を固定して並び順を変更する
Chapter 3
トップページの作成
ナビゲーション編
  • 3-1サイト情報
    • 3-1-1 サイト情報を表示する
    • 3-1-2 フッターのデザインを指定する
  • 3-2フッターメニュー
    • 3-2-1 フッターメニューを作成する
    • 3-2-2 3つのメニューを横に並べる
  • 3-3コピーライト
    • 3-3-1 コピーライトを表示する
    • 3-3-2 フッター内のパーツのレイアウトを調整する
  • 3-4SNSメニュー
    • 3-4-1 SNSメニューを表示する
    • 3-4-2 SNSメニューのデザインを指定する
  • 3-5ヘッダーのサイト名
  • 3-6ナビゲーションメニュー
    • 3-6-1 ナビゲーションメニューを作成する
    • 3-6-2 大きい画面ではナビゲーションメニューを横に並べる
  • 3-7トグルボタン
    • 3-7-1 トグルボタンを作成する
    • 3-7-2 トグルボタンでナビゲーションメニューを開閉する
Chapter 4
コンテンツページの作成
コンテンツ/アバウト/お問い合わせ
  • 4-1コンテンツページ
    • 4-1-1 コンテンツページを作成する
    • 4-1-2 記事のデザインを指定する
    • 4-1-3 パンくずリストを表示する
  • 4-2アバウトページ
    • 4-2-1 アバウトページを作成する
    • 4-2-2 画像と沿革を表示する
  • 4-3お問い合わせページ
    • 4-3-1 お問い合わせページを作成する
    • 4-3-2 地図を表示する
Chapter 5
記事一覧ページの作成
カード型/サムネイル型
  • 5-1記事一覧A: カード型(画像+テキストを上下に配置)
    • 5-1-1 記事一覧Aのページを作成する
    • 5-1-2 記事の概要を表示する
    • 5-1-3 ブラウザ画面の横幅に応じて概要を横に並べて表示する
  • 5-2記事一覧B: カード型(画像+テキストを左右に配置)
  • 5-3記事一覧C: サムネイル型(画像+テキストを重ねて配置)
Chapter 6
デザインのアレンジ
  • 6-1ヘッダーの色をアレンジする
  • 6-2ヘッダーとヒーローイメージを一体化したデザインにする
  • 6-3ヘッダーを画面上部に固定する
  • 6-4関連記事メニューを追加する
  • 6-5メタデータを記述する
  • 6-6ページの基本色をアレンジする