ギフトで購入

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

大藤幹

マイナビ出版

3,080円 (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)
最終更新日: 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-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）
２段組みの中に２段組みをつくる
段の高さを揃える
相対配置と絶対配置
相対配置と絶対配置の表示例
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版】 ▲ ページトップへ戻る