試験公開中

このエントリーをはてなブックマークに追加

よくわかるHTML5+CSS3の教科書【第3版】

マイナビ出版

2,800円+税

いちばんわかりやすいHTML+CSSの教科書が、最新トピックをカバー!

関連サイト

本書の関連ページが用意されています。

内容紹介

すらすら読めて、「わかった」を積み重ねる。「Webの知識がこれから必要」で、「将来にわたって長く使える基礎力をつけたい」人のためのHTML5+CSS3本。

本書は、“楽しみながら学べる”HTMLとCSSの入門書です。2018/10現在で最新バージョンのHTML5.2(2017/12勧告)とCSS3をベースとした内容となっています。

本書では、読者が“楽しみながら学べる”ということを実現するために、本書の全体的な構成を工夫しています。先にHTMLを学習してからそれを前提としてCSSを学ぶ、という流れにしてしまうと、前半はHTMLのタグを覚えていくだけの退屈な内容になってしまうからです。

そこで本書では、HTMLをひととおり学習してからCSSへと進むという構成ではなく、HTMLとCSSを少しずつ同時進行させる構成にしてあります。このような進め方にすると、覚えた内容をすぐにブラウザでの表示結果として確認できるため、少しずつできるようになっていく感覚を積み重ねながら、退屈せずに学習を進めることができます。

“楽しみながら学べる”といっても、本書の解説は、表面的に「ページが作れればそれでいい」というものではありません。仕様にしっかりと準拠した使い方で、正しく、かつアクセシビリティに配慮したページを作れるように、サンプルを組み立てています。

まず1章、2章では、インターネットやHTML、CSSについての基本的な解説をしながら、少しだけHTML/CSSを使ってみて、これからの学習にむけての準備をします。

3章では、HTMLやCSSを正しく使うために必要な「カタい文法」の話を学習して、基礎を固めます。

4章からは、いよいよページを作っていきます。4章でページ全体の枠組みを作り、5章でテキストや色の指定について学びます。

6章ではセレクタについて詳しく学習し、CSSでの細かな指定ができるようにします。

7章では画像や動画、音声、背景といったページ内の構造について、8章ではナビゲーション、9章ではフォームやテーブルについての設定方法を学びます。

10章では、ここまで登場していない要素についての設定方法や、配置のテクニックを学びます。第3版では、スマートフォン(スマホ)画面への対応について、詳しい解説を追加しました。

11章を、フレキシブルボックスレイアウトとグリッドレイアウトについて解説する章に変更しました(第3版での変更)。これら2つレイアウト方法の基礎になる部分を身に付けられるようにやさしく解説します。

最後の12章では、それまで学習したことをベースに、1つのページを制作していきます。スマホ、タブレット、PCそれぞれのレイアウトの作り分けを行います(第3版での変更)。ページの制作を、流れで実際に行ってみることで、本書の学習の仕上げを行うことができます。

本書を、これからHTMLとCSSを覚える人が“楽しみながら学ぶ”ための入門書としてご活用いただけましたら幸いです。

■第2版からの変更点

・ 第2版は、2014年3月段階の情報に基づき執筆されました。第3版では、2018年9月段階での情報に基づいて執筆しています。
・ 仕様の変化に応じて、解説やコードを追加・変更・削除しています。ただし、本書の解説の範囲から外れている仕様の内容については説明がないものもあります。
・ HTMLは2017年12月に勧告されたHTML5.2に変更しています。
・ CSSはCSS2.1およびCSS3より、現時点で安定して使用できると判断した内容を使っています。
・ 10章にて、スマートフォンへの対応を解説する節を追加しました。
・ 11章を、フレキシブルボックスレイアウトとグリッドレイアウトについて解説する章に変更しました。
・ 12章にて、ページをスマートフォン、タブレット、PCそれぞれに対応させる内容に変更しました。

書誌情報

  • 著者: 大藤幹
  • 発行日: (紙書籍版発行日: 2018-11-29)
  • 最終更新日: 2018-11-29
  • バージョン: 1.0.0
  • ページ数: 352ページ(PDF版換算)
  • 対応フォーマット: PDF
  • 出版社: マイナビ出版

対象読者

著者について

大藤幹

1級ウェブデザイン技能士。大学卒業後、複数のソフトハウスに勤務し、CADアプリケーション、航空関連システム、医療関連システム、マルチメディアタイトルなどの開発に携わる。1996年よりWebの基本技術に関する書籍の執筆を開始し、2000年に独立。その後、ウェブコンテンツJIS(JIS X 8341-3)ワーキング・グループ主査、情報通信アクセス協議会・ウェブアクセシビリティ作業部会委員、ウェブデザイン技能検定特別委員、技能五輪全国大会ウェブデザイン職種競技委員などを務める。現在の主な業務は、Webデザインに関連する書籍の執筆のほか、全国各地での講演・セミナー講師など。2015年3月より名古屋在住。
著書は『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集 Ver2.0対応版』『Webプロフェッショナルのための黄金則 XHTML+CSS虎の巻』『世界の「最先端」事例に学ぶ CSSプロフェッショナル・スタイル』(マイナビ)、『TECHNICAL MASTERはじめてのHTML+CSS HTML5対応』『詳解HTML5.1&HTML4.01&XHTML1.0辞典』『詳解HTML&CSS&JavaScript辞典』(秀和システム)、『10日でおぼえる CSS/CSS3入門教室』(翔泳社)、『わかりやすい「WAI-ARIA 1.0」 仕様解説書』(Kindle用電子書籍)など50冊を超える。

目次

Chapter 1 はじめる準備

  • Chapter 1-1 インターネットとサーバーについて
  • インターネットの仕組み
  • 「インターネットにWebページを公開する」とは
  • Webページを入れる場所に注意
  • Chapter 1-2 本書で使用するソフトウェアについて
  • テキストエディタ
  • ブラウザ
  • FTPクライアント

Chapter 2 オリエンテーション

  • Chapter 2-1 HTMLの役割、CSSの役割
  • HTMLってどんなモノ?
  • CSSってどんなモノ?
  • Chapter 2-2 HTMLのタグをつけてみよう
  • テキストを「大見出し」と「段落」に分ける
  • タグを英語にする
  • さらにタグを短くする
  • ページ全体の枠組みを作る
  • Chapter 2-3 CSSを使ってみよう!
  • CSSファイルを読み込ませる
  • 読み込ませたCSSの内容を確認する
  • CSSを書き換えてみる

Chapter 3 文法的なカタい話

  • Chapter 3-1 HTMLのタグを正しくつける意味
  • CSSを独立させるメリット
  • HTMLのタグを正しくつけるメリット
  • 正しいHTMLは万能データ
  • Chapter 3-2 HTMLの基礎知識
  • HTMLの専門用語
  • 属性とは?
  • 半角スペース・改行・タブの表示
  • 特別な書き方が必要となる文字
  • コメントの書き方
  • Chapter 3-3 HTMLのバージョンについて
  • HTML4.01とXHTML1.0
  • HTML5
  • COLUMN 大文字と小文字の区別
  • Chapter 3-4 CSSの基礎知識
  • CSSの専門用語
  • 書き方のルール
  • コメントの書き方
  • Chapter 3-5 CSSのバージョンについて
  • 現在使用されているのはCSS2.1とCSS3の一部

Chapter 4 ページ全体の枠組み

  • Chapter 4-1 HTMLの全体構造
  • <!DOCTYPE html>
  • html要素
  • COLUMN HTML4.01とXHTML1.0のDOCTYPE宣言
  • head要素とbody要素
  • title要素
  • meta要素
  • Chapter 4-2 CSSの組み込み方
  • link要素
  • COLUMN CSSファイルの文字コードの指定方法
  • style要素
  • style属性
  • COLUMN CSSの中にさらに別のCSSを読み込む
  • Chapter 4-3 グローバル属性
  • 使用頻度の高いグローバル属性
  • id属性
  • class属性
  • title属性
  • lang属性
  • id属性
  • Chapter 4-4 背景を指定する(1)
  • background-colorプロパティ
  • background-imageプロパティ
  • COLUMN 背景画像のURLについて
  • background-repeatプロパティ

Chapter 5 テキスト

  • Chapter 5-1 テキスト関連の要素
  • 要素の分類
  • 従来のブロックレベル要素に該当する要素
  • 従来のインライン要素に該当する要素(1)
  • 従来のインライン要素に該当する要素(2)
  • リンク
  • COLUMN ページ内の特定の場所にリンクする
  • ルビ
  • Chapter 5-2 色の指定方法
  • 色の値の指定形式
  • 色に関連するプロパティ
  • Chapter 5-3 テキスト関連のプロパティ
  • フォント関連プロパティ
  • COLUMN 値の継承について
  • フォント関連の値をまとめて指定する
  • テキスト関連プロパティ
  • 縦書き用プロパティ

Chapter 6 CSSの適用先の指定方法

  • Chapter 6-1 よく使う主要なセレクタ
  • タイプセレクタ
  • ユニバーサルセレクタ
  • クラスセレクタ
  • IDセレクタ
  • 疑似クラス
  • 結合子
  • Chapter 6-2 その他のセレクタ
  • 属性セレクタ
  • その他の疑似クラス
  • 疑似要素
  • その他の結合子
  • Chapter 6-3 セレクタの組み合わせ方
  • セレクタの基本単位
  • Chapter 6-4 指定が競合した場合の優先順位
  • 優先順位の決定方法
  • COLUMN「 !important」はユーザースタイルシートでも使用できる
  • セレクタからの優先度の計算方法

Chapter 7 ページ内の構造

  • Chapter 7-1 基本構造を示す要素
  • セクションについて
  • 見出しでセクションの範囲と階層を判断するためのルール
  • セクションをあらわす要素
  • 基本構造を示すその他の要素
  • main要素
  • header要素
  • footer要素
  • address要素
  • Chapter 7-2 画像・動画・音声関連要素
  • 画像
  • img要素
  • alt属性について
  • 動画と音声
  • video要素とaudio要素
  • source要素117
  • Chapter 7-3 ボックス関連プロパティ
  • ボックスとは?
  • ボックスの構造
  • ボックスの初期状態
  • マージン
  • marginプロパティの指定方法
  • マージンが隣接している場合の注意
  • パディング
  • ボーダー
  • ボーダーの線種の初期値に注意
  • ボーダーの表示例
  • 幅と高さ
  • パーセンテージで高さを指定する場合の注意
  • COLUMN widthとheightの発音
  • 角を丸くする
  • Chapter 7-4 背景を指定する(2)
  • 背景画像の表示位置を指定する
  • 表示位置の基準
  • 背景画像の表示例
  • 背景画像をウィンドウに固定する
  • 背景画像の固定の表示例
  • COLUMN 数値が0のときは単位を省略できる
  • 背景画像の表示サイズを変更する
  • 複数の背景画像を指定する
  • 背景関連プロパティの一括指定
  • backgroundの値を指定する際の注意事項
  • Chapter 7-5 配置方法を指定するプロパティ
  • フロートの基本
  • フロートの解除
  • フロートによる2段組みレイアウト
  • 段にする範囲をグループ化する
  • floatプロパティを指定する
  • 段にしないところの段組みを解除する
  • フロートによる3段組みレイアウト(1)
  • フロートによる3段組みレイアウト(2)
  • 2段組みの中に2段組みをつくる
  • 段の高さを揃える
  • 相対配置と絶対配置
  • 相対配置と絶対配置の表示例
  • COLUMN 絶対配置による段組み
  • インライン要素の縦位置の指定
  • インライン要素の「ディセンダ」に注意
  • vertical-alignプロパティ
  • COLUMN 文字コードを指定しているのに文字化けする!?

Chapter 8 ナビゲーション

  • Chapter 8-1 ナビゲーションに関連する要素172
  • ナビゲーションのセクション
  • リスト関連の要素
  • 3種類のリスト要素
  • ul要素とol要素の子要素
  • 用語説明型のリスト
  • COLUMN dl要素はもともとは「定義リスト」だった!?
  • Chapter 8-2 リスト関連のプロパティ ・
  • 行頭記号を変える
  • 行頭記号を画像にする
  • 行頭記号の表示位置を設定する
  • リスト関連プロパティの一括指定
  • Chapter 8-3 表示形式を変えるプロパティ
  • 表示形式を変更する
  • displayプロパティの使用例
  • 見えない状態にする
  • visibilityプロパティの使用例
  • はみ出る部分の表示方法を設定
  • Chapter 8-4 ナビゲーションの作り方
  • ナビゲーションのマークアップ
  • リストの項目を横に並べる
  • リンクの範囲を確認する
  • リンクの範囲を拡張する
  • 表示を調整する
  • カーソルが上にあるときの処理

Chapter 9 フォームとテーブル

  • Chapter 9-1 フォーム関連の要素
  • フォーム全体を囲む要素
  • 入力欄やボタンを生成する要素
  • input要素の使用例
  • COLUMN 仕様上はもっと多くの部品が用意されている!?
  • 複数行のテキスト用の入力欄
  • 要素内容をラベルとして表示するボタン
  • メニューを構成する要素
  • フォーム部品とテキストを関連づける要素
  • label要素の使い方
  • フォーム部品などをグループ化する要素
  • Chapter 9-2 フォーム関連のプロパティ
  • リサイズ可能にする
  • ボックスに影をつける
  • アウトライン
  • Chapter 9-3 テーブル関連の要素
  • テーブルを構成する要素
  • table要素
  • th要素とtd要素
  • セルを連結させる
  • テーブルにキャプションをつける
  • 表の横列をグループ化する
  • Chapter 9-4 テーブル関連のプロパティ
  • 隣接するボーダーを1本の線にする
  • キャプションをテーブルの下に表示させる

Chapter 10 その他の機能とテクニック

  • Chapter 10-1 その他の要素
  • 主題の変わり目
  • 追加と削除
  • スクリプト ・
  • スクリプトが動作しない環境向けには
  • インラインフレーム
  • Chapter 10-2 その他のプロパティ
  • width・heightプロパティの適用範囲の変更
  • コンテンツの追加
  • 引用符の設定
  • Chapter 10-3 clearfix について
  • フロートで不都合なこと
  • フロートを指定した要素は親要素からはみ出す
  • clearプロパティを使用した場合の不都合
  • フロートの不都合を解消する(1)
  • フロートの不都合を解消する(2)
  • clearfixの原型
  • 現在のclearfixのコード
  • Chapter 10-4 メディアクエリー
  • メディアクエリーとは?
  • CSS3での拡張点
  • メディアクエリーの書き方
  • 出力媒体の指定
  • @mediaについて
  • Chapter 10-5 スマートフォンの画面に対応させる
  • Webページが小さく表示される理由とその対処法
  • 同じサンプルをスマートフォンで表示させるとどうなるか
  • スマートフォンでは幅980ピクセル分が縮小表示される
  • 縮小しないで実サイズで表示させる方法
  • 出力先に合わせて異なるサイズの画像を表示させる方法
  • スマートフォンでの画像表示の確認
  • ピクセル密度に合った画像だけを読み込ませる方法
  • ピクセル密度ではなく画像サイズを指定する方法
  • COLUMN sizes属性の指定方法
  • 条件に合致したときに使う画像について詳細に指定する方法

Chapter 11 フレキシブルボックスとグリッド

  • Chapter 11-1 フレキシブルボックスレイアウトの基本
  • ブロックレベル要素を横に並べる簡単な方法
  • 子要素を横に並べる
  • 子要素の順番を変える
  • 横に並べた要素を複数行にする
  • フレキシブルボックスレイアウトは複数行にできる
  • Chapter 11-2 フレキシブルボックスレイアウト関連のその他のプロパティ
  • 横並びと縦並びを切り替えるプロパティ
  • flex-directionプロパティ
  • COLUMN rowは横並びでcolumnは縦並びとは限らない!?
  • 並べた子要素の幅をフレキシブルに変化させる
  • flexプロパティ
  • COLUMN flexプロパティの正体
  • フレキシブルボックスレイアウトの総合的な使用例
  • Chapter 11-3 グリッドレイアウトの基本
  • ボックスを格子状に区切って子要素を配置する
  • グリッドレイアウトによる3段組み
  • グリッドをわかりやすく定義する別の方法
  • grid-template-areasプロパティとgrid-areaプロパティ
  • 実際のWebページに近いレイアウトの例
  • COLUMN かなり奥が深いグリッドレイアウト

Chapter 12 ページをまるごと作ってみよう

  • Chapter 12-1 サンプルページの概要を把握する
  • 1. 完成イメージを確認しよう
  • 2. サンプルのファイル構成を確認しよう
  • 3. サンプルページ作成の流れを確認しよう
  • Chapter 12-2 HTMLの構造の確認
  • 1. サンプルページの概略構造を把握しよう
  • 2. サンプルページのhead要素の内容を確認しよう
  • 3. サンプルページのbody要素の内容を確認しよう
  • 4. CSS適用前の表示の確認
  • Chapter 12-3 スマートフォン向けの表示指定
  • 1. CSSファイル内のコメントを確認しよう
  • 2. スマートフォン向けCSSの表示確認について
  • 3. スマートフォン向けの「ページ全体」の表示を指定しよう
  • 4. スマートフォン向けの「ヘッダー」の表示を指定しよう
  • 5. スマートフォン向けの「メインコンテンツ」の表示を指定しよう
  • 6. スマートフォン向けの「フッター」の表示を指定しよう
  • Chapter 12-4 タブレット向けの表示指定
  • 1. タブレット向けの「ページ全体」の表示を指定しよう
  • 2. タブレット向けの「ヘッダー」の表示を指定しよう
  • 3. タブレット向けの「メインコンテンツ」の表示を指定しよう
  • 4. タブレット向けの「フッター」の表示を指定しよう
  • COLUMN 文字色と背景色のコントラスト比について
  • Chapter 12-6 パソコン向けの表示指定
  • 1. パソコン向けの「ページ全体」の表示を指定しよう
  • 2. パソコン向けの「ヘッダー」の表示を指定しよう
  • 3. パソコン向けの「メインコンテンツ」の表示を指定しよう
  • 4. パソコン向けの「フッター」の表示を指定しよう

Appendix 巻末資料

  • Appendix 1 HTML5の要素の分類
  • Appendix 2 HTML5の要素の配置のルール
Home 書籍一覧 よくわかるHTML5+CSS3の教科書【第3版】 ▲ ページトップへ戻る