印刷書籍

HTML5＆CSS3デザイン 現場の新標準ガイド

今のWebに必要なものが着実に追加・修正され続けている最新のHTMLとCSSの機能・使い方について、現状に即してまとめた１冊です。

表紙
本書についての著者Note 出版社オフィシャル Amazon
2017年08月28日 マイナビ出版
B5変型 368ページ / 978-4839963699

最新のHTMLとCSSについては『HTML5＆CSS3デザイン　現場の新標準ガイド【第２版】』を参照してください。

はじめに

HTML5の最初の勧告リリースから３年、モバイルが主流となり、Webを取り巻く環境が大きく変化する中で、HTML5とCSS3もWebの現状に合わせてより適したものになるべく、変化しています。

その変化は、HTMLが4から５になったときのような大きなものではありませんが、今のWebに必要なものが着実に追加・修正され続けています。

HTML5で導入されたセマンティクスはAIファーストな時代に必要不可欠なものとなっていますし、CSS3のフレキシブルボックスレイアウトやグリッドレイアウトもいよいよ実用段階となり、これからのWebデザインを大きく変えようとしています。

また、こうした目立つところばかりではなく細部にも手が加えられ、一見ツギハギで拡張されてきたように見えていた部分も、体系立ったものとして成立してきています。

そこで、本書では最新のHTML5とCSS3について、現状に即して１冊にまとめ直しました。

各機能の復習や再確認に、新しい機能の発見に、この本を役立てていただければ幸いです。

本書について

本書ではW3CのHTML5.1およびCSS3の仕様書に基づき、HTMLとCSSの機能・使い方についてまとめています。また、必要に応じてHTML5.2（草案）、WHATWG、CSS4で採用された機能についても紹介しています。

ページ構成

主要ブラウザの対応状況の表示

  • すべての主要ブラウザが対応している場合、アイコンは掲載していません。
  • 対応状況が異なる場合にのみアイコンを掲載。未対応なブラウザには×をつけています。
  • 本書執筆時点の各ブラウザの最新バージョンで対応状況を確認しています。

ベータ版（Chrome 60以降/Safari 11/iOS Safari 11/Firefox 55）が対応している場合はアイコンの下にバージョンを記載しています。

もくじ

Chapter 1 HTML
  • 1-1 HTML5とセマンティクス
  • 1-2 コンテンツモデル
  • 1-3 HTML5の構文規則
Chapter 2 Webページの作成とメタデータ
  • 2-1 Webページの基本設定
    • DOCTYPE宣言　<!DOCTYPE html>
    • ルート要素　<html>
    • メタデータの記述　<head>
    • コンテンツの記述　<body>
  • 2-2 メタデータ
    • ページのタイトル　<title>
    • メタデータ　<meta>
    • 関連したURLについての情報　<link>
    • ベースURL　<base>
    • 内部スタイルシート　<style>
    • スクリプト　<script>
    • スクリプトが動作しない環境用の情報　<noscript>
    • テンプレートの情報　<template>
  • 2-3 ボキャブラリーを使ったメタデータの記述
    • OGP （The Open Graph protocol）
    • schema.org
Chapter 3 コンテンツのマークアップ
  • 3-1 コンテンツのマークアップ
  • 3-2 セクション
    • 完結したコンテンツ　<article>
    • ナビゲーション　<nav>
    • 補足・関連情報　<aside>
    • 汎用的なセクション　<section>
  • 3-3 セクションに関する情報
    • キーとなるワード（見出し・タイトル・表題など）
      <h1>/<h2>/<h3>/<h4>/<h5>/<h6>
    • ヘッダー / フッター　<header>/<footer>
    • コンテンツに関する問い合わせ先　<address>
  • 3-4 グルーピング・コンテンツ
    • パラグラフ　<p>
    • パラグラフレベルの区切り　<hr>
    • 整形済みテキスト　<pre>
    • 引用　<blockquote>
    • リスト　<ol> / <ul> / <li>
    • 説明リスト　<dl> / <dt> / <dd>
    • フィギュア　<figure> / <figcaption>
    • メインコンテンツ　<main>
    • 汎用タグ　<div>
  • 3-5 テキストレベル・セマンティクス
    • リンク　<a>
    • 重要　<strong>
    • 強調・強勢　<em>
    • 但し書き・注意　<small>
    • 変更・更新情報　<s>
    • 作品のタイトル・著者名・URL　<cite>
    • 引用　<q>
    • 定義する語句　<dfn>
    • 略語　<abbr>
    • ルビ　<ruby>/<rb>/<rt>/<rtc>/<rp>
    • マシンリーダブルな情報　<data>
    • 日時　<time>
    • コンピュータ・コード　<code>
    • 変数　<var>
    • コンピュータからの出力内容　<samp>
    • コンピュータへの入力内容　<kbd>
    • 上付き　<sup>
    • 下付き　<sub>
    • 学名や慣用句などの語句　<i>
    • 注目してほしい語句　<b>
    • 不明瞭な語句　<u>
    • ハイライト　<mark>
    • 双方向アルゴリズムの隔離　<bdi>
    • 双方向アルゴリズムのオーバーライド　<bdo>
    • 汎用タグ　<span>
    • 改行タグ　<br>
    • 改行を認める箇所　<wbr>
  • 3-6 エディット（編集）
    • 追加したコンテンツ　<ins>
    • 削除したコンテンツ　<del>
  • 3-7 インタラクティブ
    • 追加情報　<details> / <summary>
    • コマンドリスト　<menu> / <menuitem>
  • 3-8 スクリプト
    • テンプレートの活用
  • 3-9 グローバル属性
Chapter 4 CSSの適用
  • 4-1 HTMLドキュメントのプレゼンテーション
  • 4-2 ボックスとボックスモデル
  • 4-3 プロパティ
  • 4-4 セレクタ
    • セレクタの記述形式
    • タイプセレクタ / ユニバーサルセレクタ
    • 属性セレクタ
    • クラスセレクタ / IDセレクタ
    • 言語疑似クラス
    • 構造疑似クラス
    • ルート疑似クラス
    • エンプティ疑似クラス
    • ダイナミック疑似クラス
    • ターゲット疑似クラス
    • インプット疑似クラス
    • 否定疑似クラス
    • ::first-line / ::first-letter疑似要素
    • ::before / ::after疑似要素
    • セレクタの特定性
  • 4-5 メディアクエリ
    • メディアクエリの記述形式
    • ビューポートの横幅／高さ／縦横比
    • ビューポートの向き
    • 解像度（density）
    • 走査方式
    • グリッドベース
    • カラー / カラールックアップテーブル / モノクロデバイス
Chapter 5 ボックスのレイアウト
  • 5-1 ボックスモデル
    • マージン　margin
    • パディング　padding
    • ボーダー　border
    • 横幅と高さ　width / height
  • 5-2 ボックスのレイアウト
    • 基本となるディスプレイタイプ　display
      • アウターディスプレイタイプ
      • インナーディスプレイタイプ
    • その他のディスプレイタイプ　display
      • インラインレベルのインナーディスプレイタイプ
      • 特殊なディスプレイタイプ
      • 特定のレイアウトモードで使用するディスプレイタイプ
    • ブロック
    • インライン
    • ランイン
    • フローレイアウト
    • フローレイアウト（フロールート）
    • フレキシブルボックスレイアウト
    • グリッドレイアウト
    • テーブルレイアウト
    • ルビレイアウト
    • インラインへの埋め込み
    • リスト
    • ボックスを構成しない
  • 5-3 特殊なボックス
    • フロート　float
    • ポジション　position
      • 相対配置
      • 絶対配置
      • 固定配置
      • スティッキー配置
      • ボックスの重なり順　z-index
    • シェイプ　shape-outside
    • エクスクルージョン　wrap-flow
  • 5-4 ボックスに関する付帯事項
    • オーバーフローしたコンテンツの表示方法　overflow
    • 仮想的なボックスのコンテンツ　content
    • ボックスのビジビリティ　visibility
    • ボックスの不透明度　opacity
    • カーソル　cursor
    • アウトライン　outline
    • ボックスの角丸　border-radius
    • ボックスのドロップシャドウ　box-shadow
Chapter 6 フレキシブルボックスレイアウト
  • 6-1 フレキシブルボックスレイアウト
  • 6-2 フレックスアイテムの横幅
    • フレキシビリティ　flex
  • 6-3 フレックスアイテムの並び順と並べる方向
    • フレックスアイテムの並び順　order
    • フレックスアイテムを並べる方向　flex-direction
    • フレックスアイテムのマルチライン表示　flex-wrap
  • 6-4 フレックスアイテムの位置揃え
    • 横方向の位置揃え　justify-content
    • 縦方向の位置揃え　align-items
    • マルチラインの位置揃え　align-content
Chapter 7 グリッドレイアウト
  • 7-1 グリッドレイアウト
  • 7-2 グリッドの作成
    • トラックサイズの指定
      grid-template-rows/grid-template-columns

      • フレキシブルにする単位　fr
      • 最小値・最大値の指定　minmax()
      • コンテンツに合わせたサイズにする
        min-content / max-content / auto / fit-content()
      • パターンが連続する設定を指定する　repeat()
      • レスポンシブなグリッドを作成する　repeat()
    • 自動配置の方向　grid-auto-flow
      • 空セルができないように自動配置する
      • トラックの拡張（暗黙のトラック）
  • 7-3 ラインの指定によるグリッドアイテムの配置
    • グリッドアイテムを配置するラインの指定
      grid-row-start/grid-row-end/
      grid-column-start/grid-column-end
  • 7-4 エリアの指定によるグリッドアイテムの配置
    • グリッドエリアの作成　grid-template-areas
    • グリッドアイテムを配置するエリアの指定　grid-area
  • 7-5 グリッドアイテムの間隔
    • グリッドアイテムの間隔　grid-gap
  • 7-6 グリッドの位置揃え
    • 横方向のグリッドの位置揃え　justify-content
    • 縦方向のグリッドの位置揃え　align-content
  • 7-7 グリッドアイテムの位置揃え
    • 横方向のグリッドアイテムの位置揃え　justify-items
    • 縦方向のグリッドアイテムの位置揃え　align-items
      • justify-selfとalign-selfによる調整
    • グリッドの設定をまとめて記述する
    • Edge/IEにおけるグリッドレイアウト
Chapter 8 テーブル
  • 8-1 テーブルレイアウト
    • テーブル　<table>/<caption>/<tr>/<th>/<td>
      • テーブルのボックスモデル
      • 複数の行・列にまたがるセルの作成
  • 8-2 テーブルのグループ
    • 列のグループ　<colgroup>/<col>
    • 行のグループ　<thead>/<tbody>/<tfoot>
  • 8-3 テーブルに関する付帯事項
    • テーブルの列の横幅の決定方法　table-layout
    • ボーダーの間隔　border-spacing
    • 空セルの表示　empty-cells
    • ボーダーの重ね合わせ　border-collapse
    • キャプションの表示位置　caption-side
Chapter 9 テキスト
  • 9-1 書式設定
    • フォントサイズ　font-size
    • フォント　font-family
    • フォントの太さ　font-weight
    • 斜体　font-style
    • フォントの幅　font-stretch
    • 字形　font-variant
    • 行の高さ　line-height
    • 書式設定をまとめて記述する　font
    • フォントリソースの指定　@font-face
  • 9-2 行内のコンテンツの位置揃え
    • 行揃え　text-align
    • 垂直方向の位置揃え　vertical-align
  • 9-3 改行・タブ・スペースのコントロール
    • 改行・タブ・スペースの反映と自動改行の有無
      white-space
    • 単語の改行ルール　word-break
    • 長い単語の改行ルール　overflow-wrap
    • ハイフネーション　hyphens
    • タブ幅　tab-size
    • 単語の間隔　word-spacing
    • 文字の間隔　letter-spacing
    • １行目のインデント　text-indent
  • 9-4 テキストの装飾
    • テキストの色　color
    • テキストトランスフォーム　text-transform
    • 下線・上線・取り消し線　text-decoration
    • 圏点　text-emphasis
    • テキストのドロップシャドウ　text-shadow
  • 9-5 テキストのレイアウト
    • マルチカラムレイアウト　columns
      • 段の間隔　column-gap
      • 区切り線　column-rule
      • 複数段にまたがる表示　column-span
      • 段組みの高さの処理　column-fill
    • 横書き・縦書き　writing-mode
      • 縦書きの中の文字の向き　text-orientation
      • 縦中横　text-combine-upright
Chapter 10 エンベディッド・コンテンツ
  • 10-1 エンベディッド・コンテンツ
    • 画像　<img>
      • 画像の選択肢と選択に使用する情報　srcset/sizes属性
      • イメージマップ　<map>/<area>
      • サーバーサイドイメージマップ
    • 画像　<picture>/<source>
    • インラインフレーム　<iframe>
    • オブジェクト　<object>
    • ビデオ / オーディオ　<video>/<audio>
      • テキストトラック　<track>
    • Canvas　<canvas>
    • SVG　<svg>
  • 10-2 画像・ビデオの表示エリアへのフィッティング
    • 画像・ビデオの表示エリアへのフィッティング　object-fit
      • 画像の表示位置の調整　object-position
  • 10-3 CSSによる画像の表示
    • 背景画像　background-image
      • 背景画像の表示位置の基点　background-origin
      • 背景画像のサイズ　background-size
      • 背景画像の表示位置　background-position
      • 背景画像の繰り返し　background-repeat
      • 背景画像の表示エリア　background-clip
      • 背景画像の固定対象　background-attachment
      • 背景色　background-color
      • 背景の設定をまとめて指定する　background
    • ボーダー画像　border-image
    • 分割されたインラインボックスの背景とボーダー　box-decoration-break
    • グラデーション画像を作成する関数
    • CSSで画像の選択肢を用意する　image-set()
    • 画像の拡大処理のアルゴリズム　image-rendering
Chapter 11 フォーム
  • 11-1 フォーム
    • フォーム　<form>
  • 11-2 フォームコントロール
    • 入力フィールド / ボタン　<input>
      • テキストフィールド
      • 日時のコントロール
      • 数値・色のコントロール
      • 選択肢
      • 特殊なコントロール
      • ボタン
    • ボタン　<button>
    • プルダウン型の選択肢　<select>/<option>
    • 複数行のテキストフィールド　<textarea>
  • 11-3 フォームコントロールの属性
Chapter 12 特殊効果
  • 12-1 トランスフォーム
    • 2Dトランスフォーム　transform
      • 変形処理の実行順と処理結果
      • ローカル座標系の原点の位置　transform-origin
      • 2Dの変換マトリクス（変換行列）
    • 3Dトランスフォーム　transform
      • ローカル座標系の原点の位置　transform-origin
      • ３Dの変換マトリクス（変換行列）
      • 裏面の表示　backface-visibility
      • 子要素の透視投影　perspective/perspective-origin
      • ３次元の変換処理の子要素への適用　transform-style
  • 12-2 アニメーション
    • トランジション　transition
    • キーフレームによるアニメーション　animation
  • 12-3 エフェクト
    • フィルタ　filter
    • マスク　mask
    • クリッピングパス　clip-path
    • ブレンド　mix-blend-mode
      • 背景画像のブレンド　background-blend-mode
CSS APPENDIX
  • 単位
  • 色の値
  • CSS-wideキーワード
  • 数式　calc()
  • 変数　var()