書籍概要

ポケットリファレンス

HTML5&CSS3 ポケットリファレンス

著者
発売日
更新日

概要

大好評の『HTML&スタイルシート ポケットリファレンス』に,HTML5&CSS3対応の姉妹版,満を持して登場。使いやすさ,引きやすさ,わかりやすさはそのままに,HTML5とCSS3の技術動向を完全フォローした新版です。よく使われるタグ,プロパティだけに内容をしぼり,誰もが知りたい目的別に紹介。端的なサンプルで無駄なく理解。すべて描き下ろしのイラストは,これまでも評判の楽しさに新たな風を吹き込みます。ブラウザの最新動向にも対応。※本書は,既刊『改訂新版 スタイルシートポケットリファレンス』の一部内容を含んでいます。

こんな方におすすめ

  • ホームページ・ブログ作成者
  • ウェブデザイナー
  • マークアップエンジニア

目次

Chapter 1 HTMLの基本

01 HTMLとは

  • HTMLの概要
  • 要素と文書の構造
  • タグ名・属性・属性値
  • カテゴリー
  • セクション
  • ファイル名
  • ファイルの整理
  • ファイル位置
  • Webサイト内のファイル位置
  • 属性値のバリエーション
  • ブラウザ上でテキストを編集する
  • 表示を隠す
  • 自動でスペルチェックする
  • 翻訳させないようにする

Chapter 2 HTMLリファレンス

02 全体構造

  • HTML文書の構造とDOCTYPE宣言
  • 基本のHTMLファイルを作る
  • Column オフライン時にもブラウザ表示する
  • ページタイトルをつける
  • 文字エンコード方式を指定する
  • 検索エンジン用に概要などを設定する
  • スマートフォンの表示を設定する
  • Column 記号やマークを表示する
  • Column ブラウザでは見えないコメントを入れる
  • 見出しを作る
  • 汎用的に使える要素①
  • 汎用的に使える要素②

03 セクション

  • まとまりを記事として表す
  • まとまりをテーマの区切りとして表す
  • まとまりを補足部分として表す
  • まとまりを主なリンクの集まりとして表す
  • まとまりの最初の部分を表す
  • まとまりの最後の部分を表す
  • セクションの連絡先を入れる
  • ページの主な内容を示す
  • Column HTML5と関連技術の進化

04 テキストの表示

  • 段落を表す
  • 段落のテーマ区切りを入れる
  • 改行を入れる
  • 長い英字や数字の改行位置を表す
  • 重要性や強調を表す
  • 上付き文字・下付き文字にする
  • 追加・削除箇所を表す
  • テキストに適切な意味付けをする①
  • テキストに適切な意味付けをする②
  • 略語であることを表す
  • 長い文章の引用を表す
  • 短いテキストの引用を表す
  • 改行やスペースをそのまま表示する
  • ルビ(ふりがな)を表す
  • 日時を表す
  • ハイライト表示する
  • 文字を書き進める方向をコントロールする

05 リスト

  • リストの種類
  • 順序なしリストを表す
  • 順序付きリストを表す
  • 順番があるリストの文頭の表示を変える
  • 順番があるリストの最初の数字を指定する
  • 文頭にの番号のついたが降順のリストを作る
  • 名前と値の関連付けのリストを表す

06 テーブル

  • 表組を作る要素のセット
  • 表組の境界線を表示する
  • 表組のデータセルを作る
  • 表組のヘッダセルを作る
  • 表組にタイトルをつける
  • Column 表組を読み上げ環境でも利用可能にする
  • 表組の縦方向のセルを結合する
  • 表組の横方向のセルを結合する
  • 表組の横列を3グループにまとめる
  • 表組の縦列をまとめる

07 リンク

  • リンクを表す
  • リンク先の表示ウインドウを指定する
  • リンク先を新しいウインドウで開く
  • ページ内の特定の場所にリンクする
  • 別ページの特定の場所にリンクする
  • メールアドレス用のリンクを表す
  • 電話番号用のリンクを表す
  • ファイルダウンロード用のリンクを表す
  • 特定のキーにリンクを割り当てる
  • リンク先の説明を示す
  • 外部ファイルとの関係を表す
  • ファビコンタイトルバーのアイコンを設定する
  • 閲覧環境ごとに読み込むCSSファイルを設定
  • リンクの基準となるURLを指定する

08 イメージ+その他オブジェクト

  • 画像を挿入する
  • 画像が表示されないときのテキストを指定
  • ブラウザ上の画像サイズを指定
  • イメージ・ムービーなどを挿入する
  • イメージ内に自由にリンクを設定する
  • 説明文つきのコンテンツを表す
  • 音楽を埋め込む
  • ムービーを配置する
  • 複数形式の音楽やムービーを用意する
  • ムービー内に字幕を表示する
  • Column 字幕を制作する

09 フレーム

  • 別ページをページ内の一部に挿入する
  • 要素をページ内の一部に挿入する
  • インラインフレームのサイズを指定する
  • インラインフレーム内のリンク表示先指定

10 フォーム

  • フォームの構成と入力項目の種類
  • フォームの基本的な設定をする
  • フォームからデータを送るときの形式を指定する
  • 入力チェックをするかどうか指定する
  • 1行のテキスト入力項目を作る
  • 複数選択の項目(チェックボックス)を作る
  • 単一選択の項目(ラジオボタン)を作る
  • 入力内容が隠される入力欄を作る
  • ファイルを選択する項目を作る
  • 入力内容に応じた入力欄を作る①
  • 入力内容に応じた入力欄を作る②
  • 複数行のテキスト入力項目を作る
  • ドロップダウンリストを作る
  • ドロップダウンリスト内を一覧で表示する
  • ドロップダウンリスト内をグループ化する
  • リスト内をグループ化して一覧で表示する
  • 非表示の項目を作る
  • 入力内容をリセットするボタンを作る
  • 入力内容を送信するボタンを作る
  • 画像を用いた送信ボタンを作る
  • 要素を組み合わせたボタンを作る
  • フォーム部品の項目名を表す
  • 複数のフォーム部品をまとめる
  • 入力項目を自動補完する
  • 送信時に入力されているかチェックを行う
  • フォームデータの送信先が異なるボタンを作る
  • 入力フォームを自由に配置する
  • 入力例を表示する
  • 数値の入力を制限する
  • テキストの入力を制限する
  • ページを開いてすぐに入力できるようにする
  • テキストボックスで入力候補を表示する
  • ある範囲内での測定値を表示する
  • 進捗状況を表示する

Chapter 3 スタイルシートの基本

11 スタイルシートとは

  • CSSの考え方
  • スタイルシートの基本的な書き方

12 スタイルシートの設定パターン

  • 別ファイルのスタイルを読み込む
  • ヘッダにスタイルを記述する
  • 要素にスタイルを直接記述する
  • 要素に定義済みのスタイルを適用

13 適用メディアの設定パターン(メディアクエリー)

  • 対象とするユーザー環境をCSSファイル内に指定

14 スタイルシートの適用対象(セレクタ)

  • 全要素を指定する
  • 指定のIDやクラスを持つ要素を指定する
  • 特定の組み合わせの要素を指定する
  • 特定の属性や属性値を持つ要素を指定する
  • ユーザー操作で変化する要素を指定する①
  • ユーザー操作で変化する要素を指定する②
  • 特定の場所や順番で要素を指定する①
  • 特定の場所や順番で要素を指定する②
  • 要素内の1行目や1文字目を指定する
  • 要素の前後を指定する
  • その他のセレクタを指定する

Chapter 4 CSSプロパティリファレンス

15 フォント

  • 文字の表示フォントを指定する
  • 文字の大きさを指定する
  • 文字の太さを指定する
  • 文字の傾きを指定する
  • 英文字のスモールキャップスを指定する
  • 行の高さを指定する
  • 文字スタイルの一括指定する
  • 文字の色を指定する
  • Web上のフォントを指定する

16 テキスト

  • 英文字の大文字/小文字を指定する
  • スペース・タブ・改行の扱いを指定する
  • 単語内の改行を指定する
  • 単語内の改行をハイフンでつなぐ指定をする
  • 段落内のテキストの表示位置(揃え)を指定する
  • 単語間の幅を指定する
  • 文字間の幅を指定する
  • 文章の1行目の字下げを指定する
  • 文字の上下・中央の線を指定する
  • 傍点の形を指定する
  • 傍点の色を指定する
  • 傍点の形と色の一括指定する
  • 文字に影を表示する

17 背景

  • 背景の色を指定する
  • 背景画像を指定する
  • 背景画像のくり返し方を指定する
  • スクロール時の背景画像の固定表示する
  • 背景画像の縦・横位置を指定する
  • 背景画像が表示されるエリアを指定する
  • 背景画像が表示される基準位置を指定する
  • 背景画像の表示サイズを指定する
  • 背景画像のスタイルを一括指定する
  • Column 先行実装されているプロパティを利用する
  • 直線的なグラデーションを表示する
  • 円形のグラデーションを表示する
  • 直線的なグラデーションを繰り返し表示する
  • 円形グラデーションを繰り返し表示する

18 ボーダー

  • 枠線の太さを指定する
  • 枠線の種類を指定する
  • 枠線の色を指定する
  • 枠線スタイルの一括指定する
  • 枠線の角丸を指定する
  • 画像ボーダーのイメージを指定する
  • 画像ボーダーの表示位置を指定する
  • 画像ボーダーの太さを指定する
  • 画像ボーダーの拡張を指定する
  • 画像ボーダーの繰り返しを指定する
  • 画像ボーダーのスタイルを一括指定する
  • ボックスの影を表示する

19 リスト

  • リストマーカーの種類を指定する
  • リストマーカーの画像を指定する
  • リストマーカーの位置を指定する
  • リストスタイルを一括指定する

20 テーブル

  • 表組の縦列の幅を固定する
  • 表組の枠線をセルごとに分離する
  • となり合うセルとの枠線の間隔を指定する
  • 値が入っていないセルの表示方法を指定する
  • 表組のタイトルの表示位置を指定する

21 表示と配置

  • ボックスの幅と高さを指定する
  • ボックスの内側の余白を指定する
  • ボックスの外側の余白を指定する
  • ボックスの配置方法を指定する
  • ボックスの配置位置を指定する
  • ボックスの重ね順を指定する
  • ボックスの回り込みを指定する
  • ボックスの回り込み解除を指定する
  • ボックスからはみ出た内容の表示方法を指定する
  • ボックスの切り抜きを指定する
  • ボックスの種類を指定する
  • 文字が並ぶ方向を指定する
  • ボックスの表示・非表示を指定する
  • 行内のテキストや要素の縦の揃えを指定する

22 インターフェイス

  • 輪郭線(アウトライン)の太さを指定する
  • 輪郭線(アウトライン)の種類を指定する
  • 輪郭線(アウトライン)の色を指定する
  • 輪郭線(アウトライン)の内側の余白を指定する
  • 輪郭線(アウトライン)スタイルを一括指定する
  • 追加するコンテンツを指定する
  • カーソルの種類を指定する
  • 枠の幅/高さのエリアを指定する
  • 要素の大きさを変更できるようにする
  • 領域を超えたテキストの処理を指定する

23 カラム

  • カラムの数を指定する
  • カラムの幅を指定する
  • カラムのスタイルを一括指定する
  • カラムの間隔を指定する
  • カラムの区切り線の色を指定する
  • カラムの区切り線の種類を指定する
  • カラムの区切り線の幅を指定する
  • カラムの区切り線のスタイルを一括指定する

24 トランスフォーム

  • トランスフォームの種類を指定する
  • トランスフォームの3D化を指定する
  • トランスフォームの原点を指定する
  • トランスフォームの種類を指定する
  • 奥行きを指定する
  • 奥行きの消失点を指定する
  • 裏面の可視化

25 トランジション

  • トランジションの内容を指定する
  • トランジションの時間を指定する
  • トランジションの変更具合を指定する
  • トランジションの開始タイミングを指定する
  • トランジションのスタイルを一括指定する

26 アニメーション

  • キーフレームを指定する
  • アニメーションの名前を指定する
  • 1回のアニメーションの時間を指定する
  • アニメーションの変更具合を指定する
  • アニメーションの開始タイミングを指定する
  • アニメーションの繰り返し回数を指定する
  • アニメーションの再生方向を指定する
  • アニメーションの再生状態を指定する
  • アニメーション再生前後の表示を指定する
  • アニメーションのスタイルを一括指定する
  • Column Webサイトの統一感を保つ基本のスタイル
  • APPENDIX
  • 27 Webカラー

    • カラーネーム一覧
    • RGBカラー 16進数値対応表
    • HSLカラー

    サポート

    補足情報

    以下のリンク先に,本書掲載のサンプルを公開しています。動作の確認などにご活用ください。

    正誤表

    本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。

    (2016年2月1日更新)

    P.174 表の「例」項目 4行目

    h1 > p
    h1 + p

    商品一覧