【最新!】 独学HTMLとCSSの勉強できるおすすめ本 -入門・基礎から学べる-

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

CHAPTER 1 最初に知っておこう! Webサイトの基本
1-1 よいWebデザインとは
COUMN デザインって、センスが必要?
1-2 様々な種類の Webサイト
1-3 ユーザビリティとは
COLUMN コントラストを確認しよう
1.4 Webサイトの仕組み
1-5 デバイスの種類
1-6 ブラウザーの種類
1.7 制作の流れ
COUMN サイトマップ作成ツール
COUMN ギャラリーサイトを見てみよう
1.8 制作をはじめる前に
COLUMN 様々なテキストエディター

CHAPTER 2 Webの基本構造を作る! HTMLの基本
2-1 HTMLとは
2-2 HTMLファイルを作ろう
2-3 HTMLファイルの骨組み
COLUMN 文字コードによる違い
2.4 HTMLの基本の書き方を身につけよう
2.5 見出しをつけよう
2-6 文章を表示しよう
2.7画像を挿入しよう
Column 読みやすい行数・文字数は?
2.8 リンクをはろう
COLUMN リンク先のページを別タブで表示するには
2.9 リストを表示しよう
COLUMN HTMLのソースコードを見る方法
2-10 表を作ろう
COLUMN コメントアウトを使おう
2-11 フォームを作ろう
COLUMN フォームを動作させるにはプログラミングが必要
2-12 より使いやすいフォームにしよう
2-13 ブロック要素でグループ分けをしよう
2-14 よく使うHTMLタグ一覧

CHAPTER 3
Webのデザインを作る!CSSの基本
3-1 CSSとは
3-2 CSSを適用させる方法
3-3 CSS ファイルを作ろう
3.4 CSSの基本の書き方を身につけよう
3-5 文字や文章を装飾しよう
3-6 Webフォントを使おう
3-7色をつけよう
COLUMN 無彩色をカラーコードで表すと?
COLUMN CSSでもコメントアウトを使おう
3-8 背景を彩ろう
COLUMN 画像のファイル容量を調整しよう
3.9 幅と高さを指定しよう
COUMN 配色ツール
3-10 余白を調整しよう
COLUMN 余白を上手に使ったWebサイト
3-11 線を引こう
3-12 リストを装飾しよう
3-13 クラスとIDを使った指定方法
COLUMN IDを使ってページ内リンクを作成できる
3-14 レイアウトを組もう
COLUMN CSS Flexbox チートシート
COLUMN「float」を使った要素の横並びについて
3-15 デフォルトCSSをリセットしよう
3-16 よく使うCSSプロパティ一覧

CHAPTER 4 フルスクリーンのWebサイトを制作する
4-1 フルスクリーンとは
4-2 フルスクリーンページの制作の流れ
4-3 「head」を記述しよう
4-4 「header」部分を作ろう
4.5 コンテンツ部分を作成しよう
4-6 ファビコンを用意しよう
4.7 フルスクリーンページのカスタマイズ例

CHAPTER 5 2カラムのWebサイトを制作する
5-1 2カラムのレイアウトとは
5-2 2カラムページの制作の流れ
5.3 ページ全体の見出しを作成しよう
5-4 フッター部分を作成しよう
COLUMN 代表的なリセットCSS
5-5 横並びの設定をしよう
5-6 メインエリアを作ろう
5.7 サイドバーを作ろう
5-8 レスポンシブに対応させよう
5-9 カラムページのカスタマイズ例
COUMN HTMLでコンテンツの順序を変えないのはなぜ?

CHAPTER 6 タイル型のWebサイトを制作する
6-1 タイル型レイアウトとは
6-2 タイル型レイアウトの制作の流れ
6-3 ページ上部の紹介文を作成しよう
COUMN 画像を効果的にトリミングしよう①
6-4 タイル型レイアウトを設定しよう
6-5 レスポンシブに対応させよう
COUMN 画像を効果的にトリミングしよう②
6-6 タイル型レイアウトのカスタマイズ例

CHAPTER 7 外部メディアを利用する
7-1 お問い合わせページの制作の流れ
7-2 フォームを設置しよう
7-3 地図を表示しよう
7-4 Facebook プラグインを挿入しよう
COLUMN Facebookプラグインをレスポンシブに対応させよう
7-5 Twitterプラグインを挿入しよう
7-6 YouTube動画を挿入しよう
7-7 レスポンシブに対応させよう
7-8 OGPの設定をしよう
7-9 外部メディアのカスタマイズ例
索引

Mana (著)

出版社: SBクリエイティブ (2019/3/16)、出典:出版社HP

世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書世界一わかりやすい教科書

目次 – 世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

授業感覚での15章からなる構成

全15章構成で、Webデザインスクール、専門学校などの履修環境(15コマ)に合わせています。最終的にはウェブサイトの制作実践、公開までを一気に進められる作りとなっています。

はじめに

本書を手にしているみなさんは、これからwebデザインについての勉強を一から始める、または基本的な知識を再確認したい、といった目的や目標があることと思います。
インターネットはすでに私たちの生活に溶け込んでおり、もはや「ネットを行う」という意識すら薄れています。片手にはスマートフォンがあり、当たり前のように情報収集やSNSでの発信を行います。音声スピーカーに話しかければ音楽やニュースを流してくれます。友人や家族への連絡も、リアルタイムに行うことができます。

身の回りの便利な機能や環境、これらはすべてインターネットの進化による恩恵がもたらすものです。これらが意味すること…それはインターネットを中心とする技術が、産業として定着した証であるとも言えます。さらに進化は止まらず、私たちの想像を超える、便利で豊かな環境をもたらしてくれることでしょう。

テクノロジーは常に進化しますが、1つだけ変わらないものがあります。それが、「基本」や「根幹」の部分です。HTMLが誕生して30年以上の月日が流れていますが、基本となる考え方や技術は変わっていません。情報発信の要として「webサイト」はまだまだ欠かせないものであり、この先も必ず必要とされるでしょう。

本書は webサイト制作における「基本」の部分を常に考え、そこにフォーカスした内容で執筆されました。応用を行うには基礎の確立が必須です。ビジネス、スポーツ、勉強、どんなことでも「基礎」ができていなければ、良い結果を生むことはありません。基礎部分をしっかりと押さえることが大事です。

本書は全15章構成で、専門学校などの履修環境(15コマ)に合わせています。一定のペースで学習することにより、より深い理解度が得られるようにしました。
本書を手にしたみなさんが、webの基礎知識を習得し、新たなステージにステップアップできるよう願っています。

著者を代表して 2019年1月赤間公太郎

株式会社マジカルリミックス赤間公太郎 (著), 株式会社マジカルリミックス狩野咲 (著), 株式会社マジカルリミックス鈴木清敬 (著)

出版社: 技術評論社 (2019/3/1)、出典:出版社HP

世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書世界一わかりやすい教科書

本書の使い方

•••• Lessonパート・・・・

1 節
Lessonはいくつかの節に分かれています。基本的な知識の解説をおこなうものと、記述や操作の手順を段階的にSTEPで区切っているものがあります。
2　STEP/見出し
STEPはその節の作業を細かく分けたもので、より小さな単位で学習が進められるようになっています。STEPによっては実習ファイルが用意されていますので、開いて学習を進めてください。文法や概要解説の節は見出しだけでSTEP番号はありません。
3 実習ファイル
その節またはSTEPで使用する実習ファイルの名前を記しています。該当のファイルを開いて、記述や操作を行います(ファイルの利用方法については、P.006を参照してください)。
4 書式と記述例
HTMLパートでは要素 (タグ)の、CSS パートではルールセットの書式と記述例を掲載しています。書式に関するCSSのプロパティや値は、書式の近くに表形式で紹介しています。
5 コラム
解説を補うための2種類のコラムがあります。
CHECK　Lessonのコード記述や操作手順の中で注意すべきポイントを紹介しています。
COLUMN　Lessonの内容に関連して、知っておきたいテクニックや知識を紹介しています。

本書は、言語の基本学習からはじめてサイト制作と管理までを実践する初学者のための入門書です。ダウンロードできる実習ファイルを使えば、実際に手を動かしながら学習が進められます。さらにLesson末の練習問題で学習内容を確認し、実践力を身につけることができます。なお、本書では基本的に画面をmacOSで紹介していますが、Windowsでもお使いいただけます。

・・・・練習問題パート・・・・

1 Q (Question)
問題にはLessonで学習したことの復習となる課題を用意しました。ソースコードや問題文の空欄を埋める穴埋め問題と、正しい解答を選ぶ選択形式の問題の2種類があります。
2 A (Answer)
練習問題の空欄を埋める用語やコードの一部、選択問題の解答を記しています。練習問題でつまずいたら、Lessonに戻って該当する節を確認し、再度チャレンジしてみてください。
キー表記について
本書ではMacを使って解説をしています。掲載したソフトの画面とショートカットキーの表記はmacOSのものになりますが、Windowsでも(小さな差異はあっても)同様ですので問題なく利用することができます。ショートカットで用いる機能キーについては、MacとWindowsは以下のように対応しています。本書でキー操作の表記が出てきたときは、Windowsでは次のとおり読み替えて利用してください。

Mac		Windows
⌘ command	=	Ctrl
option	=	Alt
Return	=	Enter
Control+クリック	=	右クリック

レッスンファイルのダウンロード
1 webブラウザを起動し、下記の本書webサイトにアクセスします。
http://gihyo.jp/book/2019/978-4-297-10302-6
2 書籍サイトが表示されたら、写真右の[本書のサポートページ]のリンクをクリックしてください。
■本書のサポートページサンプルファイルのダウンロードや正誤表など
3 レッスンファイルのダウンロード用ページが表示されます。下記のIDとパスワードを入力して[ダウンロード] ボタンをクリックしてください。
ダウンロードの注意点
●インターネットの通信状況によってうまくダウンロードできないことがあります。その場合はしばらく時間をおいてからお試しください。
● Macで自動展開されない場合は、ダブルクリックで展開できます。

本書で使用している実習ファイルは、小社webサイトの本書専用ページよりダウンロードできます。ダウンロードの際は、左ページに記載のIDとパスワードを入力してください。 IDとパスワードは半角の小文字で正確に入力してください。

ダウンロードファイルの内容
ダウンロードしたZIPファイルを展開すると、「h5c3_download」というフォルダになります。
1 Lessonごとにフォルダが分かれています。学習するLessonのフォルダを開いてファイルを利用してください。実習ファイルのないLesson (02、07、15) は、フォルダそのものがありません。
2 HTMLパートのLessonフォルダには、HTMLファイルと「完成」フォルダが格納されています。画像 * を使用する学習では「img」フォルダがあります。
3 学習に沿ってコードを記述するファイルです。
4 STEPの最後まで記述を終えた完成ファイルが格納されています。読者自身で記述したコードにエラーがある場合などに、完成ファイルと比較することで記述ミスを見つけることができます。
5 CSSパートのLessonフォルダには、HTMLパートと同様のファイルやフォルダに加え、CSSファイルが格納された「css」フォルダがあります。
6 Lesson14およびLesson15で参照するwebサイトのデータが格納されています。フォルダ内の詳細については、P.285をご覧ください。
7 Lesson14のwebサイト制作実習で利用するテキストや画像などの「素材」ファイルが格納されています。詳細についてはP.285をご覧ください。
※本書の実習ファイルとして提供している写真などの画像ファイルの著作権は、すべて本書の著作権者に帰属しています。本書の学習を目的とした範囲でのみ、使用を許諾しております。上記の目的以外での利用や配布は固く禁じます。

レッスンファイルの保存先
左ページの手順でダウンロードし展開したフォルダは、macOSでは「書類」フォルダ、Windowsでは「ドキュメント」フォルダに保存してください。読者ご自身で保存先を選んだ場合は、本書解説内の該当部分を読み替えて学習を進めてください。

株式会社マジカルリミックス赤間公太郎 (著), 株式会社マジカルリミックス狩野咲 (著), 株式会社マジカルリミックス鈴木清敬 (著)

出版社: 技術評論社 (2019/3/1)、出典:出版社HP

世界一わかりやすい HTML5＆CSS3 コーディングとサイト制作の教科書世界一わかりやすい教科書

はじめに
本書の使い方
レッスンファイルのダウンロード

Lesson1 wwwやwebサイト制作の基本を理解しよう
1-1 webサイトが表示される仕組み
1-2 webサイト制作のキーワード
1-3 webサイトに使用される言語
1-4 コーディングに必要なアプリケーション
1-5 webサイトに使用される画像
1-6 エディタの使い方を学ぶ
Q 練習問題

Lesson2 HTMLコーディングの基本を学ぼう
2-1 HTMLとは
2-2 マークアップとは
2-3 タグと要素と属性
2-4 head body
2-5 head要素の中に入る要素
2-6 webサイトを構成するファイルの管理
2-7 HTMLファイルを作成して保存する
2-8 webサイトの全体像を見てみる
Q 練習問題

Lesson3 画像表示とリンクをマークアップしよう
3-1 画像を表示する
3-2 リンクを設定する
3-3 パスを指定する
Q 練習問題

Lesson4 リストとナビゲーションをマークアップしよう
4-1 順不同リストを作る
4-2 順序付きリストを作る
4-3 定義リストを作る
4-4 リストでナビゲーションを作る
Q 練習問題

Lesson5 表組みをマークアップしよう
5-1 シンプルな表組みを作る
5-2 セルを結合する
5-3 より高度な表組みを作る
Q 練習問題

Lesson6 フォームをマークアップしよう
6-1 フォームの基本を身につける
6-2 入力形式に合わせたフォームパーツを作る
6-3 お問い合わせフォームを作る
Q 練習問題

Lesson7 CSSコーディングの基本を学ぼう
7-1 CSSとは
7-2 CSSの基本ルールを身につける
7-3 HTMLにCSSを組み込む3つの方法
7-4 よく使うセレクタを知る
7-5 特殊なセレクタ「疑似クラス」と「疑似要素」
Q 練習問題

Lesson8 見出しや段落をスタイリングしよう
8-1 文字サイズを調整する
8-2 行間を調整する
8-3 書体を指定する
8-4 文字の色を指定する
8-5 見出しを背景色で装飾する
8-6 見出しを線で装飾する
8-7 見出しの先頭を装飾する
8-8 段落のスタイルを整える
Q 練習問題

Lesson9 CSSレイアウトの基本を学ぼう
9-1 ボックスモデルを理解する
9-2 余白を調整する
9-3 ボックスサイズ(幅・高さ・余白)を計算する
9-4 webサイトの基本レイアウト
Q 練習問題

Lesson10 ページ全体をレイアウトしてみよう
10-1 4つのwebレイアウトパターン
10-2 段組みでレイアウトする
10-3 自由に要素を配置する
10-4 要素を回り込ませる
Q 練習問題

Lesson11 リストとナビゲーションをスタイリングしよう
11-1 リストの装飾について学ぶ
11-2 ナビゲーションを装飾する
11-3 グローバルナビゲーションを作る
11-4 パンくずリストを作る
Q 練習問題

Lesson12 表をスタイリングしよう
12-1 表の装飾について学ぶ
12-2 横線・縦線のみの表を作る
12-3 さまざまな装飾の表を作る
Q 練習問題

Lesson13 フォームをスタイリングしよう
13-1 フォームの装飾について学ぶ
13-2 使いやすい装飾を施す
13-3 ボタンをデザインする
Q 練習問題

Lesson14 webサイト制作を実践してみよう
14-1 コーディングの準備をする
14-2 トップページのHTMLを記述する
14-3 トップページのCSSを記述する
14-4 ご利用案内ページを作る
14-5 交通アクセスページを作る

Lesson15 webサイトを公開しよう
15-1 サーバーとドメインを準備する
15-2 FTPソフトでアップロードする
15-3 webサイトのデータをチェックする
15-4 webサイトを管理する

索引

株式会社マジカルリミックス赤間公太郎 (著), 株式会社マジカルリミックス狩野咲 (著), 株式会社マジカルリミックス鈴木清敬 (著)

出版社: 技術評論社 (2019/3/1)、出典:出版社HP

本当によくわかるHTML＆CSSの教科書 (本当によくわかる教科書)

目次 – 本当によくわかるHTML&CSSの教科書シンプルで、デザインの良いサイトが必ず作れる

実際に動かす→理解する

最初にまずは動かし、次に実際の中でそれがどう動くのかを覚えていくスタンスの本です。
この本で文法の基礎を学べますが網羅する辞書としての索引では使えませんがHTMLとCSSの文法と構文をサクッと理解する１巡目としては適切です。

はじめに

本書を手に取っていただき、ありがとうございます。本書を手に取られているということは、きっとWebサイトの制作に興味を持っているのではないでしょうか。あるいは、仕事や転職などでHTMLとCSSの知識を身に付ける必要があるのかもしれません。本書は、今までにWebサイトの制作経験がない人でも理解できるよう、HTMLとCSSの基礎的な内容から実際にWebサイトを作成するまで、ゆっくり丁寧に学習することができます。

基礎的な知識を学習した後に実際にカフェのWebサイトを作成することで、それまでに学習した知識がしっかりと自分のものになっていくでしょう。
Webサイトを制作したことがない人からすると、普段利用しているようなWebサイトを制作することはどれほど難しく時間がかかることか想像がつかないかもしれません。パソコンの操作に自信がない人は、なおさら困難に感じるかもしれません。ですが結論から言うと、Webサイトの制作はあなたが思っているほど難しくはありません。

「Webサイトの制作」は「料理」と同じです。いくらレシピを熟読しても、実際に手を動かさないことには料理の腕前は上達しません。最初から完璧なものを作ることはできませんが、何度も自分の手で挑戦することで徐々に成長していくものです。

また、本書で学習するHTMLやCSSは比較的歴史のある技術です。そのため、本書では昔から現代まで長く大事にされている知識をしっかりとおさえつつ、近年注目を集めている内容も紹介しています。

誰もがはじめは初心者でした。本書での学習をしていく中で、悩んだり、立ち止まることもあるかもしれません。ですが、「Webサイトが作れるようになった自分」に向かって、ゆっくりでいいので、着実に歩みを進めていきましょう。

2018年9月鈴木介翔

鈴木介翔 (著)

出版社: SBクリエイティブ (2018/9/20)、出典:出版社HP

本当によくわかるHTML＆CSSの教科書 (本当によくわかる教科書)

本書の使い方

読み方本書は以下のようなページ構成になっています。HTMLとCSSに関する基礎知識について、図示を多く、やさしく説明しています。デザイン性の高いWeb サイトの作成、運用方法まで解説します。
読み方説明

・作成できる Web サイト
本書を読み進めていくと、最終的に下記のWebサイトが作成できます。「トップページ」「メニュー」「アクセス」「お問い合わせ」といった、Webサイトに必須のページが揃っています。

サンプルファイルの使い方
・サンプルファイルの構成

・ダウンロードファイルについて
本書サンプルファイルのダウンロードの方法について説明します。手順に沿ってダウンロードし、任意の場所に保存してご利用ください。
1 本書のサポートページにアクセス https://isbn.sbcr.jp/95242/
2 「ダウンロード」をクリック
3 「【ダウンロード】本当によくわかるHTML&CSSの教科書」をクリック
4 「本当によくわかるHTML & CSSの教科書.zip」をクリックして zipファイルをダウンロード

本書の使い方
サンプルファイルの使い方

Chapter1　Webサイト制作の事前準備
Lesson1 Webサイトのしくみ
Lesson 2 制作環境の準備

Chapter2　HTMLの基本
Lesson1 HTMLとは
Lesson2 見出しと段落
Lesson3 改行
Lesson4 リンクと画像の表示
Lesson5 ディレクトリ
Lesson6 コメント文の役割と書き方
Lesson7 HTMLの基本構造
Lesson8 文字コード

Chapter3　CSSの基本
Lesson1 CSSの書き方
Lesson2 CSSの参照方法と書式
Lesson3 セレクタの種類
Lesson4 さまざまなCSSスタイル
Lesson5 CSS3の活用

Chapter4　Webサイトの作成
Lesson1 作成する Webサイトとレイアウト
Lesson2 Webサイト制作の前準備
Lesson3 ヘッダー部分の作成
Lesson4 コンテンツ部分の作成(トップページ)
Lesson5 フッターの作成
Lesson6 2ページ目以降の作成
Lesson7 メニューページの作成
Lesson8 アクセスページの作成
Lesson9 お問い合わせページの作成

Chapter5　レスポンシブ対応
Lesson1 レスポンシブ対応のしくみ
Lesson2 作業前の準備
Lesson3 メディアクエリ

Chapter6　Webサイトの集客
Lesson1 ページタイトルの設定
Lesson2 ページの説明文の追加
Lesson3 ページにアイコンを設定する
Lesson4 SNSでの表示設定

Chapter7　Webサイトの公開
Lesson1 サーバーを用意する
Lesson2 サーバーにファイルをアップロードする
付録シングルページサイトの作成
チートシート
奥付

鈴木介翔 (著)

出版社: SBクリエイティブ (2018/9/20)、出典:出版社HP

目次 – 現場で使える最低限の知識がしっかりと身につく HTML/CSS デザイン TextBook

段階別で分かりやすい

入門、基礎、応用の三部構成でわかるところはスキップしながらも、自身のレベルに合わせて腰を添えて学べるぐらい内容が濃いです。何よりコードの解説が豊富です。

はじめに

本書は、HTMLとCSSによるWebページ作成の方法を学習するためのテキストです。初心者の方が、HTMLとCSSの基礎を身に付け、最終的に本格的なWebページを作成できるようになることを目的としています。
本書には、次のような特徴があります。

1 入門、基礎、応用の三部構成でしっかりとマスターできる
初心者の方が無理なく学べるように、入門編、基礎編、応用編の3ステップ構成としました。入門編では、ステップ・バイ・ステップで1つのWebページを作りながらHTMLとCSSの基本事項を学びます。基礎編では、HTMLとCSSの文法を系統的に学びます。応用編では、企業のコーポレートサイトを作成します。この作例を通じて、シングルカラムレイアウト、マルチカラムレイアウトなどのレイアウト方法や、レスポンシブWebデザインなど、実践的なWebページ制作のテクニックを学びます。

2 レイアウトルールを詳しく解説
基礎編では、Webページのレイアウトルールについて、他書と比較してより詳しく解説しています。レイアウトルールはWebページをデザインするための仕組みであり、仕組みが分かると工夫・応用して自分なりのWebページが作れるようになります。

3 CSS設計の手法を解説
Webページを建物にたとえると、HTMLとCSSの文法を学ぶことはノコギリやカンナなどの道具の使い方を学ぶことに当たります。しかし、道具だけ使えても建物は建ちません。構造設計が必要です。Webページの構造設計は、CSS設計です。応用編では、よく使われるCSS設計手法を使ってコーポレートサイトのページを作り上げます。

本書は、大学で情報教育に携わる磯と、Web制作の現場で活躍するWebデザイナーである Glatch(杉谷祐樹・杉谷知佳)という異色のコラボレーションによって作られました。全編にわたり解説は磯が担当しました。第5章と第6章については、作例のデザインを Glatchが担当し、コーディングは磯と Glatchで協力して行いました。他の章も Glatchが現場の目で原稿をチェックし、Web制作現場でのさまざまなノウハウを取り入れています。

文法をしっかり学べ、デザイン性にも優れ、将来Webデザイナーになりたい方に役立つ、そうしたテキストを作りたいと願いつつ、筆をすすめてきました。本書が、これからWebデザインを学ばれる読者の一助となれば、筆者にとって望外の喜びです。

2019年2月磯博

この本を手に取られたあなたへ

本書を手に取ったあなたはどんな方でしょうか? Webデザイナーを目指している、会社でWeb担当を任された、趣味でホームページを作ってみたい、いろいろな理由と偶然の出会いから本書を手に取り、今このページを読んで下さっていることと思います。

本書は数多くあるHTML/CSSの入門書の中でも、とりあえず Webサイトを作れるようになりたいというよりは、仕様をしっかり学んでHTMLを仕事で使うことができるようになるための教科書や参考書のような位置付けです。

今は書籍に限らず初心者が学びやすい学習サイトや動画などの教材も豊富です。しかしそんな中であえて書籍を手に取ったあなたは、きっと体系的に知識を身につけたいと思っているのではないでしょうか? 本書はそんなあなたの希望に添える充実した内容になっていると思います。
反面そのような内容ゆえ、本書を読み進めていく中で難しいなと感じることもあるでしょう。そんなときは一度本書を閉じて、学習サイトや動画などの便利なサービスもどんどん試してみてください。これらのサービスにもHTML/CSSが使われています。HTML/CSS の素晴らしさを身をもって体感すると、学習意欲がまた沸々と湧いてくることと思います。

そしてそれらのサービスで理解ができたら、ぜひ本書に戻ってきてください。仕様をもとに詳しく解説した本書でさらに学ぶと、一時的な理解にとどまらない確かな実力がつくはずです。じっくり腰を据えて本書と向き合っていただけると嬉しいです。

本書に掲載しているサンプルデザインは、架空の企業のコーポレートサイトにしました。コーポレートサイトはカフェやレストランなどのサイトと比べて華やかさやオシャレさにはやや欠けますが、Webデザインの基礎となる要素が詰まっているため、すぐ実践に応用していただけるかと思います。

ここ数年のWebデザインでよく利用されている見せ方や要素を盛り込んでいますので、ぜひサンプルコードをダウンロードして細部まで見てみて下さい。
とにもかくにも上達へのいちばんの近道は、実際に作ってみること。まずは本書のサンプルで実際にHTML/CSSに触れた後は、ぜひ自分の作りたいものを見つけて作ってみましょう。行きづまったときは、いつでも本書を開いて、最後まで仕上げる推進力としてください。はじめは覚えることが多く不安になるかもしれません。しかし手を動かせば動かすほど自然と本書の知識が身体に染み込み、実は思っていたほど難しくないことがわかってきます。何より手を動かしながら徐々に形になっていく過程はとても楽しいものです。

最後に、本書がHTML/CSSの面白さと奥深さを知るきっかけとなってくれたら、それに勝る喜びはありません! そして本書を読んでくれた読者の方と一緒にお仕事ができる日を心待ちにしながら、日進月歩のWebの世界で私たちも日々精進していこうと思います。

2019年2月 Glatch 杉谷祐樹・杉谷知佳

磯博 (著), Ｇｌａｔｃｈ (著)

出版社: ソシム (2019/3/1)、出典:出版社HP

この本の構成と学び方

入門編

Chapter1　イントロダクション
前半は、これからWebページの作り方を学ぶ上で知っておくべき基礎知識がまとめられています。この部分は、分からないところがあっても問題はありませんので、一通り目を通しておいて下さい。後半は、実習のための準備と、エディタAtomのインストール方法と基本的な使い方を説明しています。なお、実習のための準備は必ず行って下さい。

chapter2 HTML/CSS入門
例題を通じてHTMLとCSSの基本を学びます。ここでは実際に手を動かしてコードを入力することが肝心です。入力できたらWebブラウザで表示して確認します。正しく表示されないときは、エラーを見つけて訂正します。それと同時に、解説を読み、何がいけなかったかを理解します。これは、プログラミングを学ぶ際に最も重要なプロセスです。プログラミングの学習では、エラーが出たときが学びのチャンスです。たくさんコードを入力して、失敗しながら学んでいって下さい。例題はそれを表示することが目的であるのではなく、文法を学ぶためにあります。例題を入力することで、コードを書くのに慣れ、文法をしっかりと身に付けて下さい。

基礎編

chapter3 HTMLの基本
chapter4 CSSの基本
これらの章では、HTMLとCSSの文法を詳しく学びます。まずは、解説をよく読んで理解し、サンプルデータのファイルを実行して確かめましょう。理解できたら、こうするとどうなる?」という疑問を持ち、サンプルデータのファイルを変更して試してみましょう。文法を理解するには、解説を読むだけでなく、自分でコードを入力して確かめることが重要です。

応用編

chapter5 シングルカラムレイアウトのページを作る
chapter6 2段組のページを作る
これらの章では、基礎編で学んだ機能を組み合わせて、本格的なWebページを作ります。まずは、サンプルデータにある完成作品を表示して、どのようなページを作るかを確かめて下さい。次に、解説を読んで、それがどのように作られているかを理解していきます。わから
ないところがあったら、基礎編の該当箇所を読み返したり、Webサイトで調べたりしてみましょう。一通り理解できたら、この章で学んだことを応用して自分でデザインしたオリジナルサイトを作ってみて下さい。

応用編で作成するコーポレートサイト

応用編では、次のようなコーポレイトサイトのWebページを作成します。
第5章では、CSSの設計法を学び、それにもとづいてシングルカラムレイアウトのWebページを作成します。
第6章では、2段組のWebページを作成します。スマートフォンやタブレットでの表示に対応したレスポンシブ Webデザインとします。

表記上のルール・ページの構成要素

●コードの色
CSSコードは黒色で表記
HTMLタグは青色で表記
HTMLの要素内容は黒色で表記
変更部分は背景色を濃く表示
●太字
新しい用語、強調やキーワードフレーズをあらわします。
●等幅フォント
プログラムのコードをあらわします。
●Note
本文の補足や、本文に関連したより発展的な内容を記載します。
●Tips
本文に関連するちょっとしたTipsや知識を紹介します。
●Atom Tips
エディタAtomに関する便利なテクニックや知識を紹介します。
●+アルファ
豆知識やより進んだ内容に関するヒントです。

サンプルデータの構成

本書に掲載されている例題のソースコードと、使用している画像、音声、動画ファイルは、次のサポート・ページからダウンロードすることができます。
URL http://www.socym.co.jp/book/1202
このページから「サンプル.zip」と「素材データ.zip」をダウンロードして解凍すると、[サンプル] フォルダと [素材データ] フォルダが作られます。
[サンプル] フォルダには、本書で作成している各種ファイルが章ごとに分けて保存されています。各章のフォルダには [書籍内コード] フォルダがあり、リストX-Xで示されたコードと書籍内の主なコードが保存されています。書籍内の主なコードは、P123-XXX.htmlのようなファイル名で保存しています。「P123」はそのコードが123ページに記載されていることをあらわします。このファイルは、Webブラウザで直接開いて確かめられるようにコードを追加しています。また、第2章、第5章、第6章のフォルダには [完成作品] フォルダがあり、各章で作成しているWebページ作品が保存されています。HTMLファイルをWebブラウザで開いて、作成している作品の確認用にお使い下さい。
[素材データ] フォルダには、画像・音声・動画ファイルが章ごとに分けて保存されています。本書内の例題を入力しながら学習する場合は、[素材データ] フォルダから、必要なファイルをコピーしてご利用下さい。

○サンプル・フォルダの構成

磯博 (著), Ｇｌａｔｃｈ (著)

出版社: ソシム (2019/3/1)、出典:出版社HP

Chapter1 イントロダクション
1-01 Webページについて
1-01-1 インターネットとは?
1-01-2 Webページとは?
1-01-3 Webページが表示される仕組み
1-01-4 URLとは?
1-01-5 Webサイトとは?
1-01-6 索引ファイルとトップページ
1-01-7 Webページを作る言語
1-01-8 Webブラウザとは?
1-01-9 検索エンジンとSEOについて

1-02 HTML5について
1-02-1 HTMLとは?
1-02-2 HTMLの規格
1-02-3 近年のHTMLの歴史
1-02-4 HTML5の特徴
1-02-5 HTML5を取り巻くさまざまな関連技術
1-02-6 HTML5の意義

1-03 CSS3について
1-03-1 CSSとは?
1-03-2 CSSの規格
1-03-3 WebブラウザのHTML/CSSへの対応状況

1-04 学習を始めるための準備
1-04-1 Webブラウザをインストールしておく
1-04-2 テキストエディタを用意する
1-04-3 拡張子を表示するようにする
1-04-4 使用するWebブラウザを既定のブラウザにしておく

1-05 Atomのインストールと基本的な使い方
1-05-1 Atomとは
1-05-2 Atomをインストールする
1-05-3 Atomのメニューを日本語表記にする
1-05-4 使い方の基本

Chapter2 HTML/CSS入門 -例題で学ぶWebページの作り方-
2-01 HTML入門
2-01-1 簡単なWebページを作ろう
2-01-2 HTML文書は「要素」の集まり
2-01-3 大文字と小文字の扱い
2-01-4 空白文字の扱い
2-01-5 要素の属性
2-01-6 要素の親子関係
2-01-7 HTML文書の構成
2-01-8 コメント
2-01-9 よく使う要素
2-01-10 id属性とclass属性

2-02 CSS入門
2-02-1 簡単なCSSの例
2-02-2 CSSの書式
2-02-3 空白文字
2-02-4 大文字と小文字
2-02-5 コメント
2-02-6 構文エラーの処理
2-02-7 文字を設定するプロパティ
2-02-8 ブロックボックスとインラインボックス
2-02-9 ブロックボックスのボックスモデル
2-02-10 ボックスを設定するプロパティ
2-02-11 ボックスの大きさの計算
2-02-12 CSSによる簡単なレイアウト例
2-02-13 CSSをHTML文書に適用する方法

2-03 デベロッパーツールの使い方
2-03-1 デベロッパーツールの起動
2-03-2 要素を選択する
2-03-3 要素を編集する
2-03-4 スタイルを確認/編集する
2-03-5 タブレットやスマートフォンでの表示にする

磯博 (著), Ｇｌａｔｃｈ (著)

出版社: ソシム (2019/3/1)、出典:出版社HP

Chapter3 HTMLの基本
3-01 HTML文書の木構造
3-01-1 HTML文書の木構造
3-01-2 要素のカテゴリー
3-01-3 コンテンツモデル

3-02 セクションを定義する要素
3-02-1 文章の構造化
3-02-2 セクションを定義する要素
3-02-3 見出しによるセクションの暗黙的記述

3-03 文章の意味付けと内容のグループ化を行う要素
3-03-1 文章の意味付けを行う要素
3-03-2 内容をグループ化する要素

3-04 リンクの設定
3-04-1 リンクを設定できる要素
3-04-2 リンク先を表示するウィンドウを指定する
3-04-3 指定した位置に移動する
3-04-4 ファイルをダウンロードする
3-04-5 電話発信用リンクを作る
3-04-6 クリッカブルマップを作る

3-05 埋め込みコンテンツの要素
3-05-1 音声と動画を挿入する
3-05-2 レスポンシブイメージ
3-05-3 iframe

3-06 テーブルを作る要素
3-06-1 HTMLによるテーブルの作り方
3-06-2 テーブルのスタイルを設定する

3-07 フォームを作る要素
3-07-1 フォームの基本
3-07-2 ラベル要素による関連付け
3-07-3 コントロールのグループ化
3-07-4 input要素
3-07-5 いろいろなコントロール

Chapter4 CSSの基本
4-01 プロパティの値と単位
4-01-1 値の種類
4-01-2 色の値
4-01-3 URL
4-01-4 単位

4-02 セレクタ
4-02-1 セレクタとは
4-02-2 単純セレクター
4-02-3 セレクタの結合子
4-02-4 セレクタのグループ化
4-02-5 ベンダープレフィックス

4-03 スタイルの優先順位
4-03-1 スタイルシートの種類
4-03-2 スタイルの優先順位

4-04 スタイルの継承
4-04-1 継承とは
4-04-2 プロパティの値の計算方法
4-04-3 inherit値

4-05 @規則・メディアクエリ
4-05-1 @規則
4-05-2 @media規則
4-05-3 メディアクエリ

4-06 フォントとテキストを設定するプロパティ
4-06-1 フォントを設定するプロパティ
4-06-2 Webフォント
4-06-3 テキストを設定するプロパティ

4-07 リストマークの設定とコンテンツの挿入
4-07-1 リストマークの設定
4-07-2 コンテンツの挿入

4-08 ボックスの種類
4-08-1 displayプロパティとボックスの種類
4-08-2 ボックスモデル

4-09 ボックスを設定するプロパティ
4-09-1 ボーダーを設定するさまざまなプロパティ
4-09-2 内容領域の幅と高さの設定に関連するプロパティ
4-09-3 背景を設定するさまざまなプロパティ
4-09-4 ボックスの表示方法を設定するプロパティ

4-10 ボックスの配置法I:通常フロー
4-10-1 ボックスの配置法
4-10-2 通常フローでのボックス配置の概要
4-10-3 ブロックレベルボックスのマージンの決定
4-10-4 インラインボックスの配置

4-11 ボックスの配置法II:浮動化
4-11-1 浮動化の設定
4-11-2 浮動ボックスのマージンとクリアランス
4-11-3 浮動ボックスと通常フローのボックスの重なり順

4-12 ボックスの配置法III:位置決めと重なり順
4-12-1 ボックス配置を設定するプロパティ
4-12-2 相対配置
4-12-3 絶対配置
4-12-4 固定配置
4-12-5 絶対位置決めされた非置換要素の位置と幅の決定
4-12-6 重なり順の設定

4-13 ボックスの配置法V:フレキシブルボックスレイアウト
4-13-1 フレキシブルボックスレイアウトの基本
4-13-2 Holy Grailレイアウト

chapter5 シングルカラムレイアウトのページを作る
5-01 CSS設計入門
5-01-1 00CSS
再利用可能な部品でWebページを作る
5-01-2 BEM
ページの構成要素を体系的に命名する
5-01-3 SMACSS
CSSの規則をカテゴリーに分ける

5-02 シングルカラムレイアウトのページを作成しよう
5-02-1 シングルカラムレイアウトとは?
5-02-2 作成するページと作成方法
5-02-3 Webページ作成上の注意点とデザインTips
5-02-4 フォルダ構成について
5-02-5 HTMLファイル
5-02-6 ベースルール
5-02-7 レイアウトルール(ページ全体のレイアウト)
5-02-8 モジュールルール

Chapter6 2段組のページを作る
6-01 段組の方法
6-01-1 ページ全体のレイアウト方法について
6-01-2 floatプロパティによる段組
6-01-3 positionプロパティによる段組

6-02 2段組のページを作成しよう
6-02-1 作成するページと作成方法
6-02-2 ブログページのデザインTips
6-02-3 フォルダ構成
6-02-4 レイアウト構成とHTMLファイル
6-02-5 第5章のninebox.htmlとの共通設定
6-02-6 ベースルール
6-02-7 レイアウトルール
6-02-8 モジュールルール
6-02-9 Webページをレスポンシブ対応にしよう

Appendix 学習を深め、役立つ情報
A-01-1 HTMLとCSSの仕様・リファレンスなど
A-01-2 JavaScript・Web技術

索引

磯博 (著), Ｇｌａｔｃｈ (著)

出版社: ソシム (2019/3/1)、出典:出版社HP

(サンプルコードDL特典付き)できるポケット Web制作必携 HTML&CSS全事典改訂版 HTML Living Standard & CSS3/4対応

目次 – できるポケット Web制作必携 HTML&CSS全事典改訂版 HTML Living Standard & CSS3/4対応

１冊持ちたいHTML&CSS辞書形式

本書は、HTML Living Standardの仕様に準拠した要素（タグ）と、主要なブラウザーで動作するCSS3およびCSS4のプロパティをすべて掲載しています。

本書の読み方

本書では、HTML Living StandardとCSS3/4で利用できる要素やプロパティについて解説しています。目的の項目は目次やインデックスから探せます。記述例としてサンプルコードを掲載しており、ブラウザーでの表示例は特に記載がない限りGoogle Chromeの画面です。

機能
要素やプロパティがどのように使えるのかを表しています。

対応ブラウザー
要素やプロパティが対応しているブラウザーをアイコンで表しています。詳細は次のページに記載しています。

コード
要素やプロパティの基本的な書式を表しています。

機能の詳細
要素やプロパティの意味や使い方の詳細を解説しています。

要素の詳細
要素のカテゴリーやコンテンツモデル(P.204)、使用できる文脈を示しています。

使用できる属性
要素ごとに使用できる属性の一覧と、各属性の意味や使い方を解説しています。

実践例
いくつかの要素やプロパティを組み合わせる場合や、特徴的な使い方をする場合は、実践例を設けて解説しています。

HTML Living StandardとCSS3/4について
TMLの標準仕様について、以前はW3Cが策定するHTML5と、WHATWGが策定するHTML Living Standardが併存していましたが、2019年5月、HTML Living Standardに統合することで両団体が合意しました。CSSについては、W3Cが策定するCSS3/4のモジュールが最新仕様となります。本書は、これらの仕様に従って解説しています。

チェックマーク
要素やプロパティを「覚えた」ときや「試した」ときにチェックを付けます。

使用頻度
要素やプロパティの使用頻度を4種類のマークで表しています。詳細は次のページに記載しています。

プロパティの詳細
プロパティの初期値、継承の有無、適用される要素、仕様が定義されているモジュールを示しています。

値の指定方法
各プロパティで指定できるキーワードや数値などを解説しています。

サンプルコード
要素やプロパティの記述例を示しています。

ポイント
知っておくと役に立つ情報や注意点を解説しています。

対応ブラウザーについて
本書で解説している要素やプロパティは、執筆時点(2020年1月)における主要ブラウザーの最新バージョンで動作を検証しています。各アイコンは左から、Microsoft Edge(EdgeHTMLレンダリングエンジン版)、Internet Explorer 11、Google Chrome、Firefox、Safari(Mac)、Safari(iOS)、Androidを表しています。Chronium版EdgeはChromeのアイコンを参照してください。
要素やプロパティに対応していないブラウザーのアイコンはオフに(色が薄く)なっています。

使用頻度について
要素やプロパティに付記しているマークは、Web制作の現場で使用する頻度や重要度の目安を、以下の4つのアイテムに例えて表現しています。
POPULAR
ほとんどのHTML/CSS 文書に登場する、Web制作に不可欠な項目です。
USEFUL
数多くのWebサイトで使われ、効率や使いやすさを高める項目です。
SPECIFIC
あまり見かけませんが、特定の用途で能力を発揮する項目です。
RARE
滅多に使う機会のない、マニアックな項目です。

サンプルコードのダウンロード方法
本書に掲載しているサンプルコードと同じファイルを、インプレスブックスのサイトからダウンロードできます。ブラウザーでの表示確認やコーディングの練習にお使いください。
https://book.impress.co.jp/books/1119101084
※上記ページの[特典]を参照してください。ダウンロードにはClub Impressへの会員登録(無料) が必要です。

加藤善規 (著), できるシリーズ編集部 (著)

出版社: インプレス; 改訂版 (2020/2/14)、出典:出版社HP

(サンプルコードDL特典付き)できるポケット Web制作必携 HTML&CSS全事典改訂版 HTML Living Standard & CSS3/4対応

HTML編
ドキュメント
html ルート要素を表す
head メタデータのあつまりを表す
title 文書のタイトルを表す
base 基準となるURL を指定する
link 文書を他の外部リソースと関連付ける
meta 文書のメタデータを表す
style スタイル情報を記述する
セクション
body 文書の内容を表す
article 独立した記事セクションを表す
section 文書のセクションを表す
nav 主要なナビゲーションを表す
aside 補足情報を表す
h1~h6 セクションの見出しを表す
hgroup 見出しをまとめる
header ヘッダーを表す
footer フッターを表す
address 連絡先情報を表す
コンテンツのグループ化
p 段落を表す
blockquote 段落単位での引用を表す
ol 序列リストを表す
ul 順不同リストを表す
menu ツールバーを表す
li リストの項目を表す
pre 整形済みテキストを表す
dl 説明リストを表す
dt 説明リストの語句を表す
dd 説明リストの説明文を表す
figure 写真などのまとまりを表す
figcaption 写真などにキャプションを付与する
main 主要なコンテンツを表す
hr 段落の区切りを表す
div フローコンテンツをまとめる
テキストの定義
a リンクを設置する
em 強調したいテキストを表す
strong 重要なテキストを表す
small 細目や注釈のテキストを表す
s 無効なテキストを表す
cite 作品のタイトルを表す
q 語句単位での引用を表す
dfn 定義語を表す
abbr 略称を表す
ruby ルビを表す
rt ルビテキストを表す
rp ルビテキストを囲む括弧を表す
rb ルビの対象テキストを表す
rtc ルビテキストのあつまりを表す
sup sub 上付き・下付きテキストを表す
time 日付や時刻、経過時間を表す
data さまざまなデータを表す
code コンピューター言語のコードを表す
var 変数を表す
samp 出力テキストの例を表す
kbd 入力テキストを表す
i 質が異なるテキストを表す
b 特別なテキストを表す
u テキストをラベル付けする
mark ハイライトされたテキストを表す
bdi 書字方向が異なるテキストを表す
bdo テキストの書字方向を指定する
span フレーズをグループ化する
br 改行を表す
wbr 折り返し可能な箇所を指定する
ins del 追記、削除されたテキストを表す

埋め込みコンテンツ
picture レスポンシブ・イメージを実現する
source 選択可能なファイルを複数指定する
embed アプリケーションやコンテンツを埋め込む
img 画像を埋め込む
iframe 他のHTML 文書を埋め込む
object 埋め込まれた外部リソースを表す
param 外部リソースが利用するパラメーターを与える
video 動画ファイルを埋め込む
audio 音声ファイルを埋め込む
track テキストトラックを埋め込む
map クリッカブルマップを表す
area クリッカブルマップにおける領域を指定する

テーブル
table 表組みを表す
caption 表組みのタイトルを表す
tr 表組みの行を表す
td 表組みのセルを表す
th 表組みの見出しセルを表す
colgroup 表組みの列グループを表す
col 表組みの列を表す
tbody 表組みの本体部分の行グループを表す
thead 表組みのヘッダー部分の行グループを表す
tfoot 表組みのフッター部分の行グループを表す

フォーム
form フォームを表す
input 入力コントロールを表示する
type=hidden 閲覧者には表示しないデータを表す
type=text 1行のテキスト入力欄を設置する
type=search 検索キーワードの入力欄を設置する
type=tel 電話番号の入力欄を設置する
type=url URLの入力欄を設置する
type=email メールアドレスの入力欄を設置する
type=passwordパスワードの入力欄を設置する
type=date 日付の入力欄を設置する
type=month 月の入力欄を設置する
type=week 週の入力欄を設置する
type=time 時刻の入力欄を設置する
type=datetime-local 日時の入力欄を設置する
type=number 数値の入力欄を設置する
type=range 大まかな数値の入力欄を設置する
type=color GBカラーの入力欄を設置する
type=checkbox チェックボックスを設置する
type=radio ラジオボタンを設置する
type=file 送信するファイルの選択欄を設置する
type=submit 送信ボタンを設置する
type=image 画像形式の送信ボタンを設置する
type=reset 入力内容のリセットボタンを設置する
type=button スクリプト言語を起動するためのボタンを設置する
button ボタンを設置する
label 入力コントロールにおける項目名を表す
select プルダウンメニューを表す
option 選択肢を表す
datalist 入力候補を提供する
optgroup 選択肢のグループを表す
textarea 複数行にわたるテキスト入力欄を設置する
output 計算の結果出力を表す
progress 進捗状況を表す
meter 特定の範囲にある数値を表す
fieldset 入力コントロールの内容をまとめる
legend 入力コントロールの内容グループに見出しを付ける

インタラクティブ
details 操作可能なウィジットを表す
summary ウィジット内の項目の要約や説明文を表す
dialog ダイアログを表す

スクリプティング
script クライアントサイドスクリプトのコードを埋め込む
noscript スクリプトが無効な環境の内容を表す
canvas グラフィック描写領域を提供する
template スクリプトが利用するHTMLの断片を定義する
slot Shadow ツリーとして埋め込む

HTMLの基礎知識
HTMLの基本書式
HTMLの基本構造
ブラウジングコンテキスト
グローバル属性とイベントハンドラーコンテンツ属性
HTMLの関連仕様について
カテゴリーとコンテンツモデル
セクションとアウトライン

CSS編
セレクター
指定した要素にスタイルを適用する
すべての要素にスタイルを適用する
指定したクラス名を持つ要素にスタイルを適用する
指定したID 名を持つ要素にスタイルを適用する
子孫要素にスタイルを適用する
子要素にスタイルを適用する
直後の要素にスタイルを適用する
弟要素にスタイルを適用する。
指定した属性を持つ要素にスタイルを適用する
指定した属性と属性値を持つ要素にスタイルを適用する
指定した属性値を含む要素にスタイルを適用する
指定した文字列で始まる属性値を持つ要素にスタイルを適用する
指定した文字列で終わる属性値を持つ要素にスタイルを適用する
指定した文字列を含む属性値を持つ要素にスタイルを適用する
指定した文字列がハイフンの前にある属性値を持つ要素にスタイルを適用する
:first-child 最初の子要素にスタイルを適用する
:first-of-type 最初の子要素にスタイルを適用する(同一要素のみ)
:last-child 最後の子要素にスタイルを適用する
:last-of-type 最後の子要素にスタイルを適用する(同一要素のみ)
:nth-child(n) n番目の子要素にスタイルを適用する
:nth-of-type(n) n番目の子要素にスタイルを適用する(同一要素のみ)
:nth-last-child(n) 最後からn番目の子要素にスタイルを適用する
:nth-last-of-type(n) 最後からn番目の子要素にスタイルを適用する(同一要素のみ)
:only-child 唯一の子要素にスタイルを適用する
:only-of-type 唯一の子要素にスタイルを適用する(同一要素のみ)
empty 子要素を持たない要素にスタイルを適用する
:root 文書のルート要素にスタイルを適用する
:link 閲覧者が未訪問のリンクにスタイルを適用する
:visited 閲覧者が訪問済みのリンクにスタイルを適用する
:any-link 訪問の有無に関係なくリンクにスタイルを適用する
:active アクティブになった要素にスタイルを適用する
:hover マウスポインターが重ねられた要素にスタイルを適用する
:focus フォーカスされている要素にスタイルを適用する
:focus-within フォーカスを持った要素を含む要素にスタイルを適用する
:host Shadow DOM内部からホストにスタイルを適用する
:target アンカーリンクの移動先となる要素にスタイルを適用する
:lang(言語) 特定の言語コードを指定した要素にスタイルを適用する
:not(条件) 指定した条件を除いた要素にスタイルを適用する
:fullscreen 全画面モードでスタイルを適用する
:left :right 印刷文書の左右のページにスタイルを適用する
:first 印刷文書の最初のページにスタイルを適用する
:enabled 有効な要素にスタイルを適用する
:disabled 無効な要素にスタイルを適用する
:checked チェックされた要素にスタイルを適用する
:default 既定値となっているフォーム関連要素にスタイルを適用する
:in-range :out-of-range 制限範囲内、または範囲外の値がある要素にスタイルを適用する
:valid 内容の検証に成功したフォーム関連要素にスタイルを適用する
:invalid 無効な入力内容が含まれたフォーム関連要素にスタイルを適用する
:required 必須のフォーム関連要素にスタイルを適用する
:optional 必須ではないフォーム関連要素にスタイルを適用する
:read-write 編集可能な要素にスタイルを適用する
:read-only 編集不可能な要素にスタイルを適用する
:defined 定義されているすべての要素にスタイルを適用する
:indeterminate 中間の状態にあるフォーム関連要素にスタイルを適用する
:placeholder-shown プレースホルダーが表示されている要素にスタイルを適用する
::placeholder プレースホルダーの文字列にスタイルを適用する
::first-line 要素の1行目にのみスタイルを適用する
::first-letter 要素の1文字目にのみスタイルを適用する
::before ::after 要素の内容の前後に指定したコンテンツを挿入する
::backdrop 全画面モード時の背後にあるボックスにスタイルを適用する
::cue WEBVTTにスタイルを適用する
::selection 選択された要素にスタイルを適用する
::slotted(セレクター) Slot 内に配置された要素にスタイルを適用する

フォント/テキスト
font-family フォントを指定する
font-style フォントのスタイルを指定する
@font-face 独自フォントの利用を指定する
font-variant-caps スモールキャピタルの使用を指定する
font-variant-numeric数字、分数、序数標識の表記を指定する
font-variant-alternates. 代替字体の使用を指定する
font-variant-ligatures 合字や前後関係に依存する字体を指定する
font-variant-east-asian 東アジアの字体の使用を指定する
font-variant フォントの形状をまとめて指定する
font-size フォントサイズを指定する
font-size-adjust 小文字の高さに基づいたフォントサイズの選択を指定する
font-weight フォントの太さを指定する
line-height 行の高さを指定する
font フォントと行の高さをまとめて指定する
font-stretch フォントの幅を指定する
font-kerning カーニング情報の使用方法を制御する
font-feature-settings OpenType フォントの機能を指定する
text-transform 英文字の大文字や小文字での表示方法を指定する
text-align 文章の揃え位置を指定する
text-justify 文章の均等割付の形式を指定する
text-align-last 文章の最終行の揃え位置を指定する
text-overflow ボックスに収まらない文章の表示方法を指定する
vertical-align 行内やセル内の縦方向の揃え位置を指定する
text-indent 文章の1行目の字下げ幅を指定する
letter-spacing 文字の間隔を指定する
word-spacing 単語の間隔を指定する
tab-size タブ文字の表示幅を指定する
white-space スペース、タブ、改行の表示方法を指定する
word-break 文章の改行方法を指定する
line-break 改行の禁則処理を指定する
overflow-wrap 単語の途中での改行を指定する
hyphens ハイフネーションの方法を指定する
direction 文字を表示する方向を指定する
unicode-bidi 文字の書字方向決定アルゴリズムを制御する
writing-mode 縦書き、または横書きを指定する
text-combine-upright 縦中横を指定する
text-orientation 縦書き時の文字の向きを指定する
text-decoration-line 傍線の位置を指定する
text-decoration-color傍線の色を指定する
text-decoration-style 傍線のスタイルを指定する
text-decoration-thickness 傍線の太さを指定する
text-decoration 傍線をまとめて指定する
text-underline-position 下線の位置を指定する
text-emphasis-style傍点のスタイルと形を指定する
text-emphasis-color 傍点の色を指定する
text-emphasis 文字の傍点をまとめて指定する
text-emphasis-position 傍点の位置を指定する
text-shadow 文字の影を指定する
list-style-image リストマーカーの画像を指定する
list-style-position リストマーカーの位置を指定する
list-style-type リストマーカーのスタイルを指定する
list-style リストマーカーをまとめて指定する
color 文字の色を指定する

色/背景/ボーダー
background-color 背景色を指定する
background-image 背景画像を指定する。
background-repeat 背景画像の繰り返しを指定する
background-position 背景画像を表示する水平・垂直位置を指定する
background-attachment スクロール時の背景画像の表示方法を指定する
background-size 背景画像の表示サイズを指定する
background-origin背景画像を表示する基準位置を指定する
background-clip 背景画像を表示する領域を指定する
background 背景のプロパティをまとめて指定する
mix-blend-mode 要素同士の混合方法を指定する
background-blend-mode 背景色と背景画像の混合方法を指定する
isolation 重ね合わせコンテキストの生成を指定する
opacity 色の透明度を指定する
color-adjust 画面を表示する端末に応じた色の設定を許可する
filter グラフィック効果を指定する
backdrop-filter 要素の背後のグラフィック効果を指定する
linear-gradient() 線形のグラデーションを表示する
radial-gradient() 円形のグラデーションを表示する
repeating-liner-gradient() 線形のグラデーションを繰り返して表示する
repeating-radial-gradient() 円形のグラデーションを繰り返して表示する
shape-outside テキストの回り込みの形状を指定する
shape-margin テキストの回り込みの形状にマージンを指定する
shape-image-threshold テキストの回り込みの形状を画像から抽出する際のしきい値を指定する
caret-color 入力キャレットの色を指定する
border-top-style border-right-style border-bottom-style border-left-style ボーダーのスタイルを指定する
border-style ボーダーのスタイルをまとめて指定する
border-top-width border-right-width border-bottom-width border-left-width ボーダーの幅を指定する
border-width ボーダーの幅をまとめて指定する
border-top-color border-right-color border-bottom-color border-left-color ボーダーの色を指定する
border-color ボーダーの色をまとめて指定する
border-top border-right border-bottom border-left ボーダーの各辺をまとめて指定する
border ボーダーをまとめて指定する
border-block-start-style border-block-end-style border-inline-start-style border-inline-end-style 書字方向に応じてボーダーのスタイルを指定する
border-block-style border-inline-style 書字方向に応じてボーダーのスタイルをまとめて指定する
border-block-start-width border-block-end-width border-inline-start-width border-inline-end-width border-block-width border-inline-width 書字方向に応じてボーダーの幅を指定する
border-block-start-color border-block-end-color border-inline-start-color border-inline-end-color border-block-color border-inline-color 書字方向に応じてボーダーの色を指定する
border-block-start border-block-end border-inline-start border-inline-end border-block border-inline 書字方向に応じてボーダーの各辺をまとめて指定する
border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius ボーダーの角丸を指定する
border-radius ボーダーの角丸をまとめて指定する
border-image-source ボーダーに利用する画像を指定する
border-image-width ボーダー画像の幅を指定する
border-image-slice ボーダー画像の分割位置を指定する
border-image-repeat ボーダー画像の繰り返しを指定する
border-image-outset ボーダー画像の領域を広げるサイズを指定する
border-image ボーダー画像をまとめて指定する

ボックス/テーブル
width height ボックスの幅と高さを指定する
max-width max-height ボックスの幅と高さの最大値を指定する
min-width min-height ボックスの幅と高さの最小値を指定する
max-block-size max-inline-size 書字方向に応じてボックスの幅と高さの最大値を指定する
min-block-size min-inline-size 書字方向に応じてボックスの幅と高さの最小値を指定する
margin-top margin-right margin-bottom margin-left ボックスのマージンの幅を指定する
margin ボックスのマージンの幅をまとめて指定する
padding-top padding-right padding-bottom padding-left ボックスのパディングの幅を指定する
padding ボックスのパディングの幅をまとめて指定する
margin-block-start margin-block-end margin-inline-start margin-inline-end 書字方向に応じてボックスのマージンの幅を指定する
margin-block margin-inline 書字方向に応じてボックスのマージンの幅をまとめて指定する
padding-block-start padding-block-end padding-inline-start padding-inline-end 書字方向に応じてボックスのパディングの幅を指定する
padding-block padding-inline 書字方向に応じてボックスのパディングの幅をまとめて指定する
overflow-x overflow-y ボックスに収まらない内容の表示方法を指定する
overflow ボックスに収まらない内容の表示方法をまとめて指定する
outline-style ボックスのアウトラインのスタイルを指定する
outline-width ボックスのアウトラインの幅を指定する
outline-color ボックスのアウトラインの色を指定する
outline ボックスのアウトラインをまとめて指定する
outline-offset アウトラインとボーダーの間隔を指定する
resize ボックスのサイズ変更の可否を指定する
display ボックスの表示型を指定する
position ボックスの配置方法を指定する
top right bottom left ボックスの配置位置を指定する
float ボックスの回り込み位置を指定する
clear ボックスの回り込みを解除する
clip-path クリッピング領域を指定する
box-shadow ボックスの影を指定する
box-decoration-break 分割されたボックスの表示方法を指定する
box-sizing ボックスサイズの算出方法を指定する
z-index ボックスの重ね順を指定する
visibility ボックスの可視・不可視を指定する
table-layout 表組みのレイアウト方法を指定する
border-collapse 表組みにおけるセルの境界線の表示形式を指定する
border-spacing 表組みにおけるセルのボーダーの間隔を指定する
empty-cells 空白セルのボーダーと背景の表示方法を指定する
caption-side 表組みのキャプションの表示位置を指定する
scroll-behavior ボックスにスクロール時の動きを指定する
scroll-snap-type スクロールにスナップさせる方法を指定する
scroll-snap-align ボックスをスナップする位置を指定する
scroll-margin-top scroll-margin-right scroll-margin-bottom scroll-margin-left スナップされる位置のマージンの幅を指定する
scroll-margin スナップされる位置のマージンの幅をまとめて200 指定する
scroll-padding-top scroll-padding-right scroll-padding-bottom scroll-padding-leftスクロールコンテナーのパディングの幅を指定する
scroll-padding スクロールコンテナーのパディングの幅をまとめて指定する
scroll-margin-block-start scroll-margin-block-end scroll-margin-inline-start scroll-margin-inline-end 書字方向に応じてスナップされる位置のマージンの幅を指定する
scroll-margin-block scroll-margin-inline 書字方向に応じてスナップされる位置のマージンの幅をまとめて指定する
scroll-padding-block-start scroll-padding-block-end scroll-padding-inline-start scroll-padding-inline-end 書字方向に応じてスクロールコンテナーのパディングの幅を指定する
scroll-padding-block scroll-padding-inline 書字方向に応じてスクロールコンテナーのパディングの幅をまとめて指定する

段組み
column-count 段組みの列数を指定する
column-width 段組みの列幅を指定する
columns 段組みの列幅と列数をまとめて指定する
column-gap 段組みの間隔を指定する
column-span 段組みをまたがる要素を指定する
column-fill 段組みの内容を揃える方法を指定する
column-rule-style 段組みの罫線のスタイルを指定する
column-rule-width 段組みの罫線の幅を指定する
column-rule-color 段組みの罫線の色を指定する
column-rule 段組みの罫線の幅とスタイル、色をまとめて指定する
widows 先頭に表示されるブロックコンテナーの最小行数を指定する
orphans 末尾に表示されるブロックコンテナーの最小行数を指定する
break-before break-after ボックスの前後での改ページや段区切りを指定する
break-inside ボックス内での改ページや段区切りを指定する

フレキシブルボックス
displayフレキシブルボックスレイアウトを指定する
flex-direction フレックスアイテムの配置方向を指定する
flex-wrap フレックスアイテムの折り返しを指定する
flex-flow フレックスアイテムの配置方向と折り返しをされる指定する
order フレックスアイテムを配置する順序を指定する
flex-grow フレックスアイテムの幅の伸び率を指定する
flex-shrink フレックスアイテムの幅の縮み率を指定する
flex-basis フレックスアイテムの基本の幅を指定する
flex フレックスアイテムの幅をまとめて指定する
justify-content ボックス全体の横方向の揃え位置を指定する
align-content ボックス全体の縦方向の揃え位置を指定する
place-content ボックス全体の揃え位置をまとめて指定する
justify-self 個別のボックスの横方向の揃え位置を指定する
align-self 個別のボックスの縦方向の揃え位置を指定する
place-self 個別のボックスの揃え位置をまとめて指定する
justify-items すべてのボックスの横方向の揃え位置を指定する
align-items すべてのボックスの縦方向の揃え位置を指定する
place-items すべてのボックスの揃え位置をまとめて指定する

グリッドレイアウト
display グリッドレイアウトを指定する
grid-template-rows グリッドトラックの行のライン名と高さを指定する
grid-template-columns グリッドトラックの列のライン名と幅を指定する
grid-template-areas グリッドエリアの名前を指定する
grid-template グリッドトラックをまとめて指定する
grid-auto-rows 暗黙的グリッドトラックの行の高さを指定する
grid-auto-columns 暗黙的グリッドトラックの列の幅を指定する
grid-auto-flow グリッドアイテムの自動配置方法を指定する
grid グリッドトラックとアイテムの配置方法をまとめて指定する
grid-row-start grid-row-end アイテムの配置と大きさを行の始点・終点を基準に指定する
grid-row アイテムの配置と大きさを行方向を基準にまとめて指定する。
grid-column-start grid-column-end grid-column アイテムの配置と大きさを列方向を基準に指定する
grid-area アイテムの配置と大きさをまとめて指定する
row-gap 行の間隔を指定する
column-gap 列の間隔を指定する
gap 行と列の間隔をまとめて指定する

アニメーション
@keyframes アニメーションの動きを指定する
animation-name アニメーションを識別する名前を指定する
animation-duration アニメーションが完了するまでの時間を指定する
animation-delay アニメーションが開始されるまでの待ち時間を指定する
animation-play-state アニメーションの再生、または一時停止を指定する
animation-timing-function アニメーションの加速曲線を指定する
animation-fill-mode アニメーションの再生前後のスタイルを指定する
animation-iteration-count アニメーションの繰り返し回数を指定する
animation-direction アニメーションの再生方向を指定する
animation アニメーションをまとめて指定する
transition-property トランジションを適用するプロパティを指定する
transition-duration トランジションが完了するまでの時間を指定する
transition-timing-function トランジションの加速曲線を指定する
transition-delay トランジションが開始されるまでの待ち時間を指定する。
transition トランジションをまとめて指定する

トランスフォーム
transform 平面空間で要素を変形する
transform 3D空間で要素を変形する
transform-origin 変形する要素の中心点の位置を指定する
perspective 3D空間で変形する要素の奥行きを表す
transform-style 3D空間で変形する要素の子要素の配置方法を指定する
perspective-origin 3D空間で変形する要素の視点の位置を指定する
backface-visibility 3D空間で変形する要素の背面の表示方法を指定する
transform-box 変形の参照ボックスを指定する

コンテンツ
touch-action タッチ画面におけるユーザーの操作を指定する
cursor マウスポインターの表示方法を指定する
content 要素や疑似要素の内側に挿入するものを決定する
counter-incrementカウンター値を更新する
counter-reset カウンター値をリセットする
quotes content プロパティで挿入する記号を指定する
will-change ブラウザーに対して変更が予測される要素を指示する
object-fit 画像などをボックスにフィットさせる方法を指定する
object-position 画像などをボックスに揃える位置を指定する
pointer-events ポインターイベントの対象になる場合の条件を指定する
all 要素のすべてのプロパティを初期化する

CSSの基礎知識
CSSの基本書式
CSSをHTML文書に組み込むには
メディアタイプとメディアクエリ
CSSにおけるボックスモデル
ボックスの種類と要素の分類
スタイルの優先順位
スタイルの継承
単位付きの数値の指定方法
色の指定方法
カスタムプロパティ
calc()関数
CSSのファイルの種類の指定とMIMEタイプ

加藤善規 (著), できるシリーズ編集部 (著)

出版社: インプレス; 改訂版 (2020/2/14)、出典:出版社HP

(サンプルコードDL特典付き)できるポケット Web制作必携 HTML&CSS全事典改訂版 HTML Living Standard & CSS3/4対応

HTML タグインデックス
A
a リンクを設置する
abbr 略称を表す
address 連絡先情報を表す
area クリッカブルマップにおける領域を指定する
article 独立した記事セクションを表す
aside 補足情報を表す
audio 音声ファイルを埋め込む

B
b 特別なテキストを表す
base 基準となるURLを指定する
bdi 書字方向が異なるテキストを表す
bdo テキストの書字方向を指定する
blockquote 段落単位での引用を表す
body 文書の内容を表す
br 改行を表す
button ボタンを設置する

C
canvas グラフィック描写領域を提供する
caption 表組みのタイトルを表す
cite 作品のタイトルを表す
code コンピューター言語のコードを表す
col 表組みの列を表す
colgroup 表組みの列グループを表す

D
data さまざまなデータを表す
datalist 入力候補を提供する
dd 説明リストの説明文を表す
del 追記、削除されたテキストを表す
details 操作可能なウィジットを表す
dfn 定義語を表す
dialog ダイアログを表す
div フローコンテンツをまとめる
di 説明リストを表す
dt 説明リストの語句を表す

E
em 強調したいテキストを表す
embed アプリケーションやコンテンツを埋め込む

F
fieldset 入力コントロールの内容をまとめる
figcaption 写真などにキャプションを付与する
figure 写真などのまとまりを表す
footer フッターを表す
form フォームを表す

H
h1~h6 セクションの見出しを表す
headメタデータのあつまりを表す
header ヘッダーを表す
hgroup 見出しをまとめる
hr 段落の区切りを表す
html ルート要素を表す

I
i 質が異なるテキストを表す
iframe 他のHTML文書を埋め込む
img 画像を埋め込む
input 入力コントロールを表示する
type=button スクリプト言語を起動するためのボタンを設置する
type=checkbox チェックボックスを設置する
type=color RGBカラーの入力欄を設置する
type=date 日付の入力欄を設置する
type=datetime-local 日時の入力欄を設置する
type=email メールアドレスの入力欄を設置する
type=file 送信するファイルの選択欄を設置する
type=hidden 閲覧者には表示しないデータを表す
type=image 画像形式の送信ボタンを設置する
type=month 月の入力欄を設置する
type=number 数値の入力欄を設置する
type=password パスワードの入力欄を設置する
type=radio ラジオボタンを設置する
type=range 大まかな数値の入力欄を設置する
type=reset 入力内容のリセットボタンを設置する
type=search 検索キーワードの入力欄を設置する
type=submit 送信ボタンを設置する
type=tel 電話番号の入力欄を設置する
type=text 1行のテキスト入力欄を設置する
type=time 時刻の入力欄を設置する
type=url URLの入力欄を設置する
type=week 週の入力欄を設置する
ins 追記、削除されたテキストを表す。

K
kbd 入力テキストを表す

L
label 入力コントロールにおける項目名を表す
legend 入力コントロールの内容グループに見出しを付ける
ll リストの項目を表す
link 文書を他の外部リソースと関連付ける

M
main 主要なコンテンツを表す
map クリッカブルマップを表す
mark ハイライトされたテキストを表す
menu ツールバーを表す
meta 文書のメタデータを表す
meter 特定の範囲にある数値を表す

N
nav 主要なナビゲーションを表す
noscript スクリプトが無効な環境の内容を表す

O
object 埋め込まれた外部リソースを表す
ol 序列リストを表す
optgroup 選択肢のグループを表す
option 選択肢を表す
output 計算の結果出力を表す

P
p 段落を表す
param 外部リソースが利用するパラメーターを与える
picture レスポンシブ・イメージを実現する
pre 整形済みテキストを表す
progress進捗状況を表す

Q
q 語句単位での引用を表す

R
rb ルビの対象テキストを表す
rp ルビテキストを囲む括弧を表す
rt ルビテキストを表す。
rtc ルビテキストのあつまりを表す
rubyルビを表す

S
s 無効なテキストを表す
samp 出力テキストの例を表す
script クライアントサイドスクリプトのコードを埋め込む
細目や注釈のテキストを表す
select 文書のセクションを表す
slot プルダウンメニューを表す
small Shadowツリーとして埋め込む
source 選択可能なファイルを複数指定する
span フレーズをグループ化する
strong 重要なテキストを表す
style スタイル情報を記述する
sub 上付き・下付きテキストを表す
summaryウィジット内の項目の要約や説明文を表す
sup 上付き・下付きテキストを表す

T
table 表組みを表す
tbody 表組みの本体部分の行グループを表す
td 表組みのセルを表す
templateスクリプトが利用するHTMLの断片を定義する
textarea 複数行にわたるテキスト入力欄を設置する
tfoot 表組みのフッター部分の行グループを表す
th 表組みの見出しセルを表す
thead 表組みのヘッダー部分の行グループを表す
time 日付や時刻、経過時間を表す
title 文書のタイトルを表す
tr 表組みの行を表す
track テキストトラックを埋め込む

U
u テキストをラベル付けする
ul 順不同リストを表す

V
var 変数を表す
video 動画ファイルを埋め込む

W
wbr
折り返し可能な箇所を指定する

CSS プロパティインデックス
A
align-content ボックス全体の縦方向の揃え位置を指定する
align-items すべてのボックスの縦方向の揃え位置を指定する
align-self 個別のボックスの縦方向の揃え位置を指定する
all 要素のすべてのプロパティを初期化する
animation アニメーションをまとめて指定する
animation-delay アニメーションが開始されるまでの待ち時間を指定する
animation-direction アニメーションの再生方向を指定する
animation-duration アニメーションが完了するまでの時間を指定する
animation-fill-mode アニメーションの再生前後のスタイルを指定する
animation-iteration-countアニメーションの繰り返し回数を指定する
animation-name アニメーションを識別する名前を指定する
animation-play-state アニメーションの再生、または一時停止を指定する
animation-timing-function アニメーションの加速曲線を指定する

B
backdrop-filter 要素の背後のグラフィック効果を指定する
backface-visibility 3D空間で変形する要素の背面の表示方法を指定する
background 背景のプロパティをまとめて指定する
background-attachment スクロール時の背景画像の表示方法を指定する
background-blend-mode 背景色と背景画像の混合方法を指定する
background-clip 背景画像を表示する領域を指定する
background-color 背景色を指定する。
background-image 背景画像を指定する
background-origin 背景画像を表示する基準位置を指定する
background-position 背景画像を表示する水平・垂直位置を指定する
background-repeat 背景画像の繰り返しを指定する
background-size 背景画像の表示サイズを指定する
border ボーダーをまとめて指定する
border-block 書字方向に応じてボーダーの各辺をまとめて指定する
border-block-color 書字方向に応じてボーダーの色を指定する
border-block-end 書字方向に応じてボーダーの各辺をまとめて指定する
border-block-end-color書字方向に応じてボーダーの色を指定する
border-block-end-style 書字方向に応じてボーダーのスタイルを指定する
border-block-end-width 書字方向に応じてボーダーの幅を指定する
border-block-start 書字方向に応じてボーダーの各辺をまとめて指定する
border-block-start-color書字方向に応じてボーダーの色を指定する
border-block-start-style 書字方向に応じてボーダーのスタイルを指定する
border-block-start-width書字方向に応じてボーダーの幅を指定する
border-block-style書字方向に応じてボーダーのスタイルをまとめて指定する
border-block-width 書字方向に応じてボーダーの幅を指定する
border-bottom ボーダーの各辺をまとめて指定する
border-bottom-color ボーダーの色を指定する
border-bottom-left-radius ボーダーの角丸を指定する
border-bottom-right-radius ボーダーの角丸を指定する
border-bottom-style ボーダーのスタイルを指定する
border-bottom-width ボーダーの幅を指定する
border-collapse 表組みにおけるセルの境界線の表示形式を指定する
border-color ボーダーの色をまとめて指定する
border-image ボーダー画像をまとめて指定する
border-image-outset ボーダー画像の領域を広げるサイズを指定する
border-image-repeat ボーダー画像の繰り返しを指定する
border-image-slice ボーダー画像の分割位置を指定する
border-image-source ボーダーに利用する画像を指定する
border-image-width ボーダー画像の幅を指定する
border-inline 書字方向に応じてボーダーの各辺をまとめて指定する
border-inline-color 書字方向に応じてボーダーの色を指定する
border-inline-end 書字方向に応じてボーダーの各辺をまとめて指定する
border-inline-end-color 書字方向に応じてボーダーの色を指定する
border-inline-end-style 書字方向に応じてボーダーのスタイルを指定する
border-inline-end-width 書字方向に応じてボーダーの幅を指定する
border-inline-start 書字方向に応じてボーダーの各辺をまとめて指定する
border-inline-start-color 書字方向に応じてボーダーの色を指定する
border-inline-start-style 書字方向に応じてボーダーのスタイルを指定する
border-inline-start-width書字方向に応じてボーダーの幅を指定する
border-inline-style 書字方向に応じてボーダーのスタイルをまとめて指定する。
border-inline-width 書字方向に応じてボーダーの幅を指定する
border-left ボーダーの各辺をまとめて指定する
border-left-color ボーダーの色を指定する
border-left-style ボーダーのスタイルを指定する
border-left-width ボーダーの幅を指定する
border-radius ボーダーの角丸をまとめて指定する
border-right ボーダーの各辺をまとめて指定する
border-right-color ボーダーの色を指定する
border-right-style ボーダーのスタイルを指定する
border-right-width ボーダーの幅を指定する
border-spacing 表組みにおけるセルのボーダーの間隔を指定する
border-style ボーダーのスタイルをまとめて指定する
border-top ボーダーの各辺をまとめて指定する
border-top-color ボーダーの色を指定する
border-top-left-radius ボーダーの角丸を指定する
border-top-right-radiusボーダーの角丸を指定する
border-top-style ボーダーのスタイルを指定する
border-top-width ボーダーの幅を指定する
border-width ボーダーの幅をまとめて指定する
bottom ボックスの配置位置を指定する
box-decoration-break 分割されたボックスの表示方法を指定する
box-shadow ボックスの影を指定する
box-sizing ボックスサイズの算出方法を指定する
break-after ボックスの前後での改ページや段区切りを指定する
break-before ボックスの前後での改ページや段区切りを指定する
break-inside ボックス内での改ページや段区切りを指定する

C
caption-side 表組みのキャプションの表示位置を指定する
caret-color 入力キャレットの色を指定する
clear ボックスの回り込みを解除する
clip-path クリッピング領域を指定する
color 文字の色を指定する
color-adjust 四脚を表示する端末に応じた色の設定を許可する
column-count 段組みの列数を指定する
column-fill 段組みの内容を揃える方法を指定する
column-gap 段組みの間隔を指定する
column-gap 列の間隔を指定する
column-rule 段組みの罫線の幅とスタイル、色をまとめて指定する
column-rule-color 段組みの罫線の色を指定する
column-rule-style 段組みの罫線のスタイルを指定する
column-rule-width 段組みの罫線の幅を指定する
column-span 段組みをまたがる要素を指定する
column-width 段組みの列幅を指定する
columns 段組みの列幅と列数をまとめて指定する
content 要素や疑似要素の内側に挿入するものを決定する
counter-increment カウンター値を更新する
counter-reset カウンター値をリセットする
cursor マウスポインターの表示方法を指定する

D
direction 文字を表示する方向を指定する
display グリッドレイアウトを指定する
display フレキシブルボックスレイアウトを指定する
display ボックスの表示型を指定する

E
empty-cells 空白セルのボーダーと背景の表示方法を指定する

F
filter グラフィック効果を指定する
flex フレックスアイテムの幅をまとめて指定する
flex-basis フレックスアイテムの基本の幅を指定する
flex-direction フレックスアイテムの配置方向を指定する
flex-flow フレックスアイテムの配置方向と折り返しを指定する
flex-grow フレックスアイテムの幅の伸び率を指定する
flex-shrink フレックスアイテムの幅の縮み率を指定する
flex-wrap フレックスアイテムの折り返しを指定する
float ボックスの回り込み位置を指定する
font フォントと行の高さをまとめて指定する
@font-face 独自フォントの利用を指定する
font-family フォントを指定する
font-feature-settings OpenTypeフォントの機能を指定する
font-kerning カーニング情報の使用方法を制御する
font-size フォントサイズを指定する
font-size-adjust 小文字の高さに基ついたフォントサイズの選択を指定する
font-stretch フォントの幅を指定する
font-style フォントのスタイルを指定する
font-variant フォントの形状をまとめて指定する
font-variant-alternates 代替字体の使用を指定する
font-variant-caps スモールキャビタルの使用を指定する
font-variant-east-asian 東アジアの字体の使用を指定する
font-variant-ligatures 合字や前後関係に依存する字体を指定する
font-variant-numeric 数字、分数、序数標識の表記を指定する
font-weight フォントの太さを指定する

G
gap 行と列の間隔をまとめて指定する
grid グリッドトラックとアイテムの配置方法をまとめて指定する
grid-area アイテムの配置と大きさをまとめて指定する
grid-auto-columns 暗黙的グリッドトラックの列の幅を指定する
grid-auto-flow グリッドアイテムの自動配置方法を指定する
grid-auto-rows 暗黙的グリッドトラックの行の高さを指定する
grid-column アイテムの配置と大きさを別方向を基準に指定する
grid-column-end アイテムの配置と大きさを同方向を基準に指定する
grid-column-start アイテムの配置と大きさを列方向を基準に指定する
grid-row アイテムの配置と大きさを行方向を基準にまとめて指定する
grid-row-end アイテムの配置と大きさを行の始点・終点を基準に指定する
grid-row-start アイテムの配置と大きさを行の始点・終点を基準に指定する
grid-template グリッドトラックをまとめて指定する
grid-template-areas グリッドエリアの名前を指定する
grid-template-columns グリッドトラックの列のライン名と幅を指定する
grid-template-rows グリッドトラックの行のライン名と高さを指定する

H
height ボックスの幅と高さを指定する
hyphens ハイフネーションの方法を指定する

I
isolation 重ね合わせコンテキストの生成を指定する

J
justify-content ボックス全体の横方向の揃え位置を指定する
justify-items すべてのボックスの横方向の揃え位置を指定する
justify-self 個別のボックスの横方向の揃え位置を指定する

K
@keyframes アニメーションの動きを指定する

L
left ボックスの配置位置を指定する
letter-spacing 文字の間隔を指定する
linear-gradient() 線形のグラデーションを表示する
line-break 改行の禁則処理を指定する
line-height 行の高さを指定する
list-style リストマーカーをまとめて指定する
list-style-image リストマーカーの画像を指定する
list-style-position リストマーカーの位置を指定する
list-style-type リストマーカーのスタイルを指定する
margin ボックスのマージンの幅をまとめて指定する
margin-block 書字方向に応じてボックスのマージンの幅をまとめて指定する
margin-block-end 書字方向に応じてボックスのマージンの幅を指定する
margin-block-start 書字方向に応じてボックスのマージンの幅を指定する
margin-bottom ボックスのマージンの幅を指定する
margin-inline 書字方向に応じてボックスのマージンの幅をまとめて指定する
margin-inline-end 書字方向に応じてボックスのマージンの幅を指定する
margin-inline-start 書字方向に応じてボックスのマージンの幅を指定する
margin-left ボックスのマージンの幅を指定する
margin-right ボックスのマージンの幅を指定する
margin-top ボックスのマージンの幅を指定する
max-block-size 書字方向に応じてボックスの幅と高さの最大値を指定する
max-height ボックスの幅と高さの最大値を指定する
max-inline-size 書字方向に応じてボックスの幅と高さの最大値を指定する
max-width ボックスの幅と高さの最大値を指定する
min-block-size 書字方向に応じてボックスの幅と高さの最小値を指定する
min-height ボックスの幅と高さの最小値を指定する
min-inline-size 書字方向に応じてボックスの幅と高さの最小値を指定する
min-width ボックスの幅と高さの最小値を指定する
mix-blend-mode 要素同士の混合方法を指定する

O
object-fit 画像などをボックスにフィットさせる方法を指定する
object-position 画像などをボックスに揃える位置を指定する
opacity 色の透明度を指定する
order フレックスアイテムを配置する順序を指定する
orphans 末尾に表示されるブロックコンテナーの最小行数を指定する
outline ボックスのアウトラインをまとめて指定する
outline-color ボックスのアウトラインの色を指定する
outline-offset アウトラインとボーダーの間隔を指定する
outline-style ボックスのアウトラインのスタイルを指定する
outline-width ボックスのアウトラインの幅を指定する
overflow ボックスに収まらない内容の表示方法をまとめて指定する
overflow-wrap 単語の途中での改行を指定する
overflow-x ボックスに収まらない内容の表示方法を指定する
overflow-y ボックスに収まらない内容の表示方法を指定する

P
padding ボックスのパディングの幅をまとめて指定する
padding-block 書字方向に応じてボックスのパディングの幅をまとめて指定する
padding-block-end 書字方向に応じてボックスのパディングの幅を指定する
padding-block-start 書字方向に応じてボックスのパディングの幅を指定する
padding-bottom ボックスのパディングの幅を指定する
padding-inline 書字方向に応じてボックスのパディングの幅をまとめて指定する
padding-inline-end 書字方向に応じてボックスのパディングの幅を指定する
padding-inline-start 書字方向に応じてボックスのパディングの幅を指定する
padding-left ボックスのパディングの幅を指定する
padding-right ボックスのパディングの幅を指定する
padding-top ボックスのパディングの幅を指定する
perspective 3D空間で変形する要素の奥行きを表す
perspective-origin 3D空間で変形する要素の視点の位置を指定する
place-content ボックス全体の揃え位置をまとめて指定する
place-items すべてのボックスの揃え位置をまとめて指定する
place-self 個別のボックスの揃え位置をまとめて指定する
pointer-events ポインターイベントの対象になる場合の条件を指定する
position ボックスの配置方法を指定する

Q
quotes contentプロパティで挿入する記号を指定する

R
radial-gradient() 円形のグラデーションを表示する
repeating-liner-gradient() 線形のグラデーションを繰り返して表示する
repeating-radial-gradient() 円形のグラデーションを繰り返して表示する
resize ボックスのサイズ変更の可否を指定する
right ボックスの配置位置を指定する
row-gap 行の間隔を指定する

S
scroll-behavior ボックスにスクロール時の動きを指定する
scroll-margin スナップされる位置のマージンの幅をまとめて指定する
scroll-margin-block 書字方向に応じてスナップされる位置のマージンの幅をまとめて指定する
scroll-margin-block-end 書字方向に応じてスナップされる位置のマージンの幅を指定する
scroll-margin-block-start 書字方向に応じてスナップされる位置のマージンの幅を指定する
scroll-margin-bottom スナップされる位置のマージンの幅を指定する
scroll-margin-inline 書字方向に応じてスナップされる位置のマージンの幅をまとめて指定する
scroll-margin-inline-end 書字方向に応じてスナップされる位置のマージンの幅を指定する
scroll-margin-inline-start 書字方向に応じてスナップされる位置のマージンの幅を指定する
scroll-margin-left スナップされる位置のマージンの幅を指定する
scroll-margin-right スナップされる位置のマージンの幅を指定する
scroll-margin-top スナップされる位置のマージンの幅を指定する
scroll-padding スクロールコンテナーのパディングの幅をまとめて指定する
scroll-padding-block 書字方向に応じてスクロールコンテナーのパディングの幅をまとめて指定する
scroll-padding-block-end 書字方向に応じてスクロールコンテナーのパディングの幅を指定する
scroll-padding-block-start 書字方向に応じてスクロールコンテナーのパディングの幅を指定する
scroll-padding-bottom スクロールコンテナーのパディングの幅を指定する
scroll-padding-inline 書字方向に応じてスクロールコンテナーのパディングの幅をまとめて指定する
scroll-padding-inline-end 書字方向に応じてスクロールコンテナーのパディングの幅を指定する
scroll-padding-inline-start 書字方向に応じてスクロールコンテナーのパディングの幅を指定する
scroll-padding-left スクロールコンテナーのパディングの幅を指定する
scroll-padding-right スクロールコンテナーのパディングの幅を指定する
scroll-padding-top スクロールコンテナーのパディングの幅を指定する
scroll-snap-alignボックスをスナップする位置を指定する
scroll-snap-type スクロールにスナップさせる方法を指定する
shape-image-threshold テキストの回り込みの形状を画像から抽出する際のしきい値を指定する
shape-margin テキストの回り込みの形状にマージンを指定する
shape-outside テキストの回り込みの形状を指定する

T
table-layout 表組みのレイアウト方法を指定する
tab-size タブ文字の表示幅を指定する
text-align 文章の揃え位置を指定する
text-align-last 文章の最終行の揃え位置を指定する
text-combine-upright 縦中横を指定する
text-decoration 傍線をまとめて指定する
text-decoration-color 傍線の色を指定する。
text-decoration-line 傍線の位置を指定する
text-decoration-style 傍線のスタイルを指定する
text-decoration-thickness 傍線の太さを指定する
text-emphasis 文字の傍点をまとめて指定する
text-emphasis-color 傍点の色を指定する
text-emphasis-position傍点の位置を指定する
text-emphasis-style 傍点のスタイルと形を指定する
text-indent 文章の1行目の字下げ幅を指定する
text-justify 文章の均等割付の形式を指定する
text-orientation 縦書き時の文字の向きを指定する
text-overflow ボックスに収まらない文章の表示方法を指定する
text-shadow 文字の影を指定する
text-transform 英文字の大文字や小文字での表示方法を指定する
text-underline-position 下線の位置を指定する
top ボックスの配置位置を指定する
touch-action タッチ画面におけるユーザーの操作を指定する
transform 3D空間で要素を変形する
transform 平面空間で要素を変形する
transform-box 変形の参照ボックスを指定する
transform-origin 変形する要素の中心点の位置を指定する
transform-style 3D空間で変形する要素の子要素の配置方法を指定する
transition トランジションをまとめて指定する
transition-delay トランジションが開始されるまでの待ち時間を指定する
transition-duration トランジションが完了するまでの時間を指定する
transition property トランジションを適用するプロパティを指定する
transition-timing-function トランジションの加速曲線を指定する

U
unicode-bidi 文字の書字方向決定アルゴリズムを制御する

V
vertical-align 行内やセル内の縦方向の揃え位置を指定する
visibility ボックスの可視・不可視を指定する

W
white-space スペース、タブ、改行の表示方法を指定する
widows 先頭に表示されるブロックコンテナーの最小行数を指定する
width ボックスの幅と高さを指定する
will-change ブラウザーに対して変更が予測される要素を指示する
word-break 文章の改行方法を指定する
word-spacing 単語の間隔を指定する
writing-mode 縦書き、または横書きを指定する

Z
z-index ボックスの重ね順を指定する

本書に掲載されている情報について

●本書の情報は、すべて2020年1月現在のものです。

●HTMLについては、執筆時点で最新のHTML Living Standardの仕様に基づいています。HTML Living Standardで定義されていない一部の仕様については、HTML5の仕様を掲載しています。なお、本文中ではHTML Living StandardをHTML Standardと記載しています。

●CSSについては、CSS3およびCSS4で仕様の詳細が定義されており、多くのブラウザーで実装がなされているプロパティを中心に掲載しています。CSS3および4で定義が刷新されていないプロパティは、CSS2.1の情報を掲載しています。

●本書では、Windows10がインストールされているパソコンを前提に画面を再現しています。要素やプロパティのコードの表示例は、主にGoogle Chromeの画面を掲載しています。それ以外のブラウザーの場合は、画面とブラウザー名を併記しています。
「できる」「できるシリーズ」は、株式会社インプレスの登録商標です。
本書に記載されている会社名、製品名、サービス名は、一般に各開発メーカーおよびサービス提供元の登録商標または商標です。なお、本文中にはTMおよびRマークは明記していません。

加藤善規 (著), できるシリーズ編集部 (著)

出版社: インプレス; 改訂版 (2020/2/14)、出典:出版社HP

HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウトスタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)

目次 – HTML5/CSS3モダンコーディングフロントエンドエンジニアが教える3つの本格レイアウト

実際の業務フローに近い経験を

それぞれの機能をトピックに章分けされているテキストもありますが、本書では、一通りウェブページの一部が変更された場合でも、変更する箇所を最小限にして、また拡張しやすいきれいなコードの書き方を自然に学べる1冊になっています。

はじめに

HTMLやCSSのコーディングでは、「わかる」と「できる」は別物です。断片的な知識によって部分的な修正や改変はできても、ページまるごとのデザインや自分の作りたいイメージを一から組み上げようとすると、どうすればいいのかわからず手が動かなかった経験はありませんか?

この本は、そういった方々のコーディングスキルを1段上のステージへ引き上げるためにあります。

本書は1冊を3つのPARTに分け、Web制作の中でよく見られる3種類のレイアウトのサイトを1つずつ紹介しています。そして、それらのデザインイメージを元にHTMLとCSSをゼロから組み上げていくという、現場のフロントエンドエンジニアがたどるフローに限りなく近い形でHTML5とCSS3を学んでいける構成になっています。リアルなモチベーションが保てるように、サンプルサイトのデザインにもこだわりました。

1つのサイトの中にはたくさんのHTMLの要素やCSSのプロパティが詰まっています。実際にコーディングを進めながら、それらの知識が必要になったタイミングで深い解説を挟むことで、実用的な知識を飽きずに無理なく身につけられる構成にしています。ゼロからのコーディングを3回も繰り返せば、だんだんとイメージをコードに変換するコツがつかめてくることでしょう。

さらに、本書では「モダン」なコーディングを意識しています。Webでの表現は日々リッチになっていき、それらを実現する高機能なHTML5やCSS3に対応していないレガシーブラウザは徐々に淘汰されつつあります。しかし、レガシーブラウザのために複雑になった古いコードからなかなか脱却できていない現場も多いことでしょう。

本書ではHTML5に対応していないレガシーブラウザを切り捨て、現実的な範囲での次世代のブラウザを対象としたシンプルでモダンなコーディングを意識しています。本書がレガシーブラウザ対応の第一歩を踏み出す手助けになればと願っています。

HTMLCSSコーディングでイメージを形にする力がつけば、そこからできることは無限に広がります。一緒にコーディングを楽しみましょう!

吉田真麻

吉田真麻 (著)

出版社: 翔泳社 (2015/11/3)、出典:出版社HP

Part0イントロダクション
A 本書で作成するサイト
PART1 スタンダードレイアウト
PART2 グリッドレイアウト
PART3 シングルページレイアウト
対応ブラウザ
B コーディングの進め方
ダウンロード
コーディングの前知識と注意点
C デベロッパーツールの使い方
デベロッパーツールの起動
要素の検証
選択した要素の確認
D 本書の読み方
謝辞

Part1 スタンダードレイアウト
Chapter 01 このPARTで作るサイト
スタンダードレイアウト
このレイアウトの特徴
サイトを構成する要素。

Chapter 02 ベースのコーディング
ファイル構成
要素とサイズの確認
HTMLコーディング
CSSコーディング

Chapter 03 ヘッダーのコーディング
要素とサイズの確認
サイトロゴ
グローバルナビゲーション

Chapter 04メイン領域のコーディング
要素とサイズの確認
HOT TOPIC(特集コンテンツ)
NEWS(更新履歴リスト)
ARTICLES(記事ブロック)

Chapter 05 サイドメニューのコーディング
要素とサイズの確認
ランキング
ドキュメントリスト
車フォーム

Chapter 06 フッターのコーディング
要素とサイズの確認
フッターメニュー
コピーライト
★ セルフコーディングにチャレンジ
ランキングの見せ方

Part2 グリッドレイアウト
Chapter 07 このPARTで作るサイト
グリッドレイアウト
このレイアウトの特徴
サイトを構成する要素

Chapter 08 ベースのコーディング
ファイル構成
要素とサイズの確認
HTMLコーディング
CSS コーディング

Chapter 09 ボックスのコーディング
要素とサイズの確認
HTMLのコーディング
CSSのコーディング
Masonryの導入
カテゴリによって色を変える

Chapter 10 中ボックスと大ボックスのコーディング
要素とサイズの確認
HTMLのコーディング
CSSのコーディング
画像が読み込まれるまでの時間を考慮する

Chapter 11 ナビゲーションのコーディング
要素とサイズの確認
HTMLのコーディング
CSSのコーディング
サイトロゴのコーディング
ナビゲーションリンクのコーディング –

★★ セルフコーディングにチャレンジ
ホバーしたときの「MORE」表示

Part3 シングルページレイアウト
Chapter 12 このPARTで作るサイト
シングルページレイアウト
このレイアウトの特徴
サイトを構成する要素

Chapter 13 ベースのコーディング
ファイル構成
要素とサイズの確認
HTMLコーディング
CSSコーディング
Webフォントを使用する

Chapter 14 ヘッダーのコーディング
要素とサイズの確認
サイトタイトル
ディスクリプション
ボタン

Chapter 15 セクション1(ABOUT ME)のコーディング
要素とサイズの確認
見出しのコーディング
自己紹介文のコーディング

Chapter 16 セクション2(WORKS)のコーディング
要素とサイズの確認
作品紹介部分のコーディング

Chapter 17 セクション3 (MY SKILLS)のコーディング
要素とサイズの確認
スキル紹介部分のコーディング
アイコンフォントを使用する
アイコン部分のコーディング

Chapter 18 セクション4(CONTACT)とフッターのコーディング
要素とサイズの確認
問い合わせフォームのコーディング
フッターのコーディング

Chapter 19 スマートフォン対応の下準備
現時点での表示の確認
メディアクエリを使用してレスポンシブWebデザインを実現する
Chapter 20 スマートフォン対応のコーディング
現時点での表示の確認
ヘッダーのコーディング
セクション1(ABOUT ME)のコーディング
セクション2(WORKS)のコーディング
セクション3(MY SKILLS)のコーディング
セクション4(CONTACT)のコーディング

★★★ セルフコーディングにチャレンジ
見出しのデザインバリエーション
WORKSのインタラクション

APPENDIX
セルフコーディングにチャレンジコーディング例
Part1 セルフコーディングにチャレンジコーディング例
ランキングの見せ方
Part2 セルフコーディングにチャレンジコーディング例
ホバーしたときの「MORE」表示
Part3 セルフコーディングにチャレンジコーディング例
見出しのデザインバリエーション
WORKSのインタラクション

索引

COLUMN
HTML5で新しくなった要素の分類
Flexbox
CSSプリプロセッサ(CSSメタ言語)

本書で作成するサンプルサイトについて
以下のURLでサンプルサイトの表示を確認できます。
PART1 スタンダードレイアウト
http://www.shoeisha.com/book/hp/mcoding/1/
PART2 グリッドレイアウト
http://www.shoeisha.com/book/hp/mcoding/2/
PART3 シングルページレイアウト
http://www.shoeisha.com/book/hp/mcoding/3/

また、これらのサンプルファイルは以下のURLからダウンロードできます。詳細は PARTOの「ダウンロード」(P.6)を参照してください。
http://www.shoeisha.co.jp/book/download/9784798141572

吉田真麻 (著)

出版社: 翔泳社 (2015/11/3)、出典:出版社HP

目次 – スラスラわかるHTML&CSSのきほん第2版

なぜそう書くかを追求した１冊!

タイトル通り、本書はスラスラ学習できるよう組み立てられております。ステップバイステップで少しずつ書いての実習なので、動作を実感しながら作業を進めらます。また止まってしまったとしても参照してすぐ確認できる流れになっております。最終章ではサイトを実際に公開してみることもするので、一連の流れで基本的なウェブコンテンツが作成できます。Windows / Macともに対応です。

スラスラわかるHTML&CSSのきほん第2版

狩野祐東 (著)

出版社: SBクリエイティブ; 第2版 (2018/4/14)、出典:出版社HP

はじめに

「スラスラ読めて」「スラスラわかって」、1冊終えた後には「スラスラ作れる」ようになりたい人、あつまれ!!
本書は2013年に刊行され、13刷、4万部突破を達成して、入門書としてたいへん好評を博した『スラスラわかるHTML & CSSのきほん』の全面改訂版です。架空のカフェ「KUJIRA Cafe」のWebサイトを作りながら、HTMLやCSSの基礎を実習形式で少しずつマスターしていきます。

この実習では、どんなページでも使う基本的なものからフォーム画面の作成に使用するものまで、頻出のHTMLタグをカバー。CSSは、フォントサイズや背景の指定に始まり最新のフレックスボックスまで、重要機能を厳選して紹介。少し書いては表示を確認するという流れで実習するので、動作を実感しながら作業を進められます。最終章ではサイトの公開にも挑戦。Webサイト制作の一連のステップを経験できるようになっています。

スマートフォンの普及とブラウザの高機能化にともない、Web サイトの制作手法やテクニックは、2013年当時とは大きく変わりました。今回の改訂にあたっては、こうした時代の変化に合わせて内容を一から見直し、これからのWebデザインに役立つHTMLやCSSの機能を中心に取り上げています。また、レスポンシブデザインという手法を導入して、パソコンだけでなくスマートフォンにも対応。現代的なWebサイト作りに必要な知識を、らくらく身につけることができます。

この本が目指したのは「楽しく作りながら、ずっと使えるしっかりした基礎知識の習得ができる」こと。丁寧な操作説明とわかりやすい解説で、HTMLとCSSに初めて触れる方でもつまずくことなく、内容を理解しながら読み進められるように心がけました。本書がみなさまのお役に立てることを、心より願っています。

本書はたくさんの方に支えられて完成しました。撮影協力に快諾してくださったeatos baked sweets (旧ホタルカフェ)の阿部早栄氏、阿部敏寛氏、サンプルサイトのテキスト作成にご協力いただいた加治佐志津氏。そして、編集者の友保健太氏。この場を借りて厚く御礼申し上げます。

最後に、お父さんの仕事が遅くて約束していた釣りに行けなかった息子の怜葉と、サンプルサイトのデザインに協力してくれた妻さやかの忍耐力に感謝します。

狩野祐東

本書の使い方

『スラスラわかるHTML & CSSのきほん』へようこそ! 初めての方でもHTMLとCSSが無理なく学習できるように、本書は実習を中心に組み立てられています。架空のカフェ「KUJIRA Cafe」のWebサイトを作りながら、HTMLの記述からサイトの公開まで、Webサイト作りに必要なことを体験できます。

実習で制作するWebサイト

本書で作成するWebサイトは全5ページ。HTML、CSSを駆使して、パソコンにもスマートフォンにも対応したWebサイトを作成します。操作を詳しく紹介しているので、HTMLを書いたことがなくても始められます。作成するWebサイトは最新のHTML5.2に準拠。標準仕様に沿った解説で、ずっと使える正しい知識が身に付きます。
Fig 本書で作成する「KUJIRA Cafe」Webサイトの完成図

紙面の見方

動作環境

本書の操作手順の説明には、以下の環境を使用しています。
>>Windows 10 + Edge 16
>>macOS High Sierra 10.13 + Safari 11
画面の細かな違いはありますが、Windows 7/8、旧バージョンのMac OS Xでも実習できます。Windows 8は、デスクトップ画面に切り替えてご使用ください。
本書で作成するWebサイトは、Internet Explorer 11 以上、Safari 11 で動作確認をしています。ただし、Webブラウザによって多少表示が異なる場合があります。

実習用サンプルデータの準備

実習を始める前に、本書のサポートサイトからサンプルデータをダウンロードして解凍し、パソコンにコピーしておきます。サンプルデータには実習に使う画像ファイル、アプリケーション、完成したWebサイトなどが含まれています。
サンプルデータのダウンロード
・http://isbn.sbcr.jp/93156/
サンプルデータは、Windowsをお使いの方は「ドキュメント」フォルダに、Macをお使いの方は「書類」フォルダにコピーしておいてください。操作手順は次のとおりです。

実習
実習用サンプルデータをダウンロードして、「ドキュメント」フォルダにコピーする(Windows)
① Edge(Windows7/8 の場合はInternet Explorer)を起動し、アドレスバーに上記URLを入力してEnterキーを押します❶。本書の紹介ページが開いたら、サポート情報の項目から画面の指示に従ってサンプルデータ「surasu ra-2nd.zip」をダウンロードします。
② ウィンドウ下部のダイアログで[保存]をクリックし❷、ダウンロードが完了したら、[フォルダーを開く]をクリックします❸。ダウンロード先のフォルダが開きます。
③ ダウンロードした「surasura-2nd.zip」をダブルクリックして解凍します❹。
解凍してできた「サンプル」フォルダを、サイドバーの「ドキュメント」にドラッグします❺。

実習
実習用サンプルデータをダウンロードして、「書類」フォルダにコピーする(Mac)
① Safariを起動し、アドレスバーに前ページに記載のURLを入力してreturnキーを押します❶。本書の紹介ページが開いたら、サポート情報の項目から画面の指示に従ってサンプルデータ「surasura-2nd.zip」をダウンロードします。
② Dockの「ダウンロード」❷－「surasura-2nd.zip」❸をクリックして解凍します。
なお、設定によってはダウンロードした時点でファイルが解凍され、zipファイルではなく「サンプル」フォルダが表示される場合があります。そのときは[Finderで開く]をクリックします。
③ Finderウィンドウが開くので、解凍してできた「サンプル」フォルダを、サイドバーの「書類」にドラッグします❹。

スラスラわかるHTML&CSSのきほん第2版

狩野祐東 (著)

出版社: SBクリエイティブ; 第2版 (2018/4/14)、出典:出版社HP

chapter01 Webサイト制作を始める前に
01 Webサイトとその構成要素
1 Webサイトは複数のWeb ページの集合
2 一度に表示される画面一つひとつがWebページ
3 Webページを構成するファイル
02 Webブラウザの機能と種類
1 Webブラウザの機能
2 パソコンに保存されたファイルをブラウザで開いてみよう
3 Webブラウザの種類
03 Webサイトを公開するまで
1 Webサイト制作の流れ
04 制作に使うソフトのインストール
1 OSの初期設定を変更しよう
2 テキストエディタをインストールしよう
3 FTPクライアントをインストールしよう

chapter02 HTMLの基礎
01 HTMLはWebページを制作するための言語
1 HTMLの特徴とその役割
2 HTMLは世界標準の言語
02 HTMLの基本的な書式
1 基本の書式と名称
2 タグの記述は半角で
3 インデント
4 空要素
03 親子、子孫、兄弟〜HTMLの階層関係
1 親要素と子要素
2 祖先要素と子孫要素
3 兄弟要素

chapter03 制作の準備と基本のHTML
01 Webサイト制作の準備
1 フォルダを作成する
2 「images」フォルダに画像をコピーする
3 index.htmlファイルを作成する
02 すべてのHTMLで共通するタグ
1 HTMLを書いてみよう(1)
2 HTMLを書いてみよう(2)
3 正しく記述できたか確認してみよう

chapter04 見出し、段落、リスト
01 見出しテキスト
1 カフェのロゴとNews 見出しを追加する
02 テキストの段落
1 ニュースの短い記事を追加する
03 ナビゲーションの設置
1 ナビゲーションを作成する
04 番号なしリスト(非序列リスト)
1 ナビゲーションの項目を追加する

chapter05 リンクと画像の挿入
01 サイト内リンクと相対パス
1 ナビゲーションと大見出しにリンクを追加する
02 外部サイトへのリンクと絶対パス
1 ニュース記事の一部にリンクを追加する
03 画像の表示
1 ロゴを画像に差し替え、キービジュアルを追加する
04 キーボードで入力しにくい文字の表示
1 フッターのテキストを作成する
05 ページの部分ごとに要素をまとめる
1 ヘッダー部分をまとめる
2 キービジュアルをまとめる
3 ページの中心となるニュース記事部分をまとめる
4 フッター部分をまとめる
5 CSSのために全体を1つにまとめる
06 class属性
1 CSS適用への準備をする
07 コメント文
1ヘッダー/メイン/フッター部分にコメントを追加する

chapter06 2ページ目以降を効率的に作成する
01 index.html以外のファイルの作成
1 index.htmlから2ページ目以降のHTMLファイルを作成する
02 段落にテキストと画像を含める
1 店舗案内の見出しを追加する
2 画像とテキストを追加する
03 テキストを太字にする・改行する
1 署名部分のテキストを修飾する
04 id属性と特定の場所へのリンク
1 index.htmlの「News」見出しへリンクする
05 テーブル(表)
1 店舗情報のテーブルを作成する(1)
2 店舗情報のテーブルを作成する(2)
06 番号付きリスト(序列リスト)
1 access.htmlを作成する
07 CSS適用を考えた要素のグループ化
1 menu.htmlを作成する

chapter07 CSSの基礎 ,
01 HTMLの「見た目」を整えるCSS
1 CSSの特徴とその役割
2 CSSはタグが作るボックスの表示を操作するもの
02 CSSの基本的な書式
1 基本の書式と名称
2 全体の設定や条件指定などをする「@ルール」
3 コメント文
03 主なセレクタと書き方
1 セレクタの種類
04 CSSを書く場所
1 CSSを記述できる場所
05 CSSファイルを作成する
1 外部CSSファイルを作成する
06 HTMLファイルとCSSファイルを関連付ける
1 style.cssへのリンクを設定する

chapter08 CSSでページのスタイルを調整
01 背景色の設定
1 ページ全体の背景色を変更する
02 テキスト色、フォントサイズの設定
1 ページ全体のフォントの種類を指定する
2 見出しのテキスト色を変える
3 見出しのフォントサイズを指定する
03 マージン、ボーダー、パディング
1 ボックスモデルを変更する
2 下線を引く
3 News 見出しの上下に空きスペースを作る
04 行間の調整
1 ニュース記事の行間を指定する
05 リンクテキスト色の変更
1 リンクのスタイルを調整する
06 コンテンツの行揃え
1 ロゴ画像をウィンドウの中央に配置する
07 ブロック表示/インライン表示の変更
1 ナビゲーションメニューのリスト項目を横並びにする
08 背景画像の指定
1 ナビゲーションに背景画像を適用する
09 スタイルを上書きする
1 ナビゲーションのリンク色を変更する
10 繰り返さない背景画像
1 フッターに背景画像を適用する
11 ページの最大幅の設定
1・ページ全体を中央に配置する
12 ページに固有のスタイルを適用
1 index.htmlのデザインを仕上げる

chapter09 フロート、テーブル、フレックスボックス
01 テキストの回り込み
1 あいさつ文のスタイルを調整する(1)
2 あいさつ文のスタイルを調整する(2)
02 テーブルの整形
1 テーブルの大まかなスタイルを調整する
2 見出しセルのスタイルを調整する
03 フレックスボックスで2コラムレイアウト
1 2つのボックスを横に並べる
2 テキストが含まれるボックスのサイズを固定する
04 <練習> access.htmlのスタイルを作成しよう
1 地図の画像を中央揃えで配置する

chapter10 フォームの作成、
01 フォームの基礎知識
1 フォームの機能
2.HTMLにできること、できないこと
3 フォーム関連のタグ
02 お問い合わせページの概要
1 contact.htmlの動作
2 result.htmlをコピーする
03 フォーム全体の親要素
1 contact.htmlにフォーム全体の親要素を作成する
04 プルダウンメニュー
1 お問い合わせ種別を選ぶプルダウンメニューを作成する
05 ラジオボタンとチェックボックス
1 来店したことがあるかどうかを尋ねるラジオボタンを作成する
2 どこで知ったかを答えてもらうチェックボックスを作成する
06 テキストフィールド
1 お問い合わせ件名を入力するためのテキストフィールドを作成する
07 テキストエリア
1 お問い合わせ内容を入力するためのテキストエリアを作成する
08 送信ボタン
1 送信ボタンを作成する
09 ラベル
1 プルダウンメニューにラベルを付ける
2 そのほかの部品にもラベルを付ける
10 フォームのスタイルと属性セレクタ
1 フォーム全体と各入力部品のスタイルを調整する

chapter11 モバイル端末に対応する
01 レスポンシブデザイン
1 スマートフォンに対応したWebサイトを作るには
2 レスポンシブデザインのテクニック
3 モバイル端末での表示を確認するには
02 ビューポートの設定
1 表示設定を変更する
03 画像をレスポンシブデザインに対応させる
1 画像を伸縮できるようにする
04 メディアクエリとブレイクポイント
1 メディアクエリを使用する
05 ページ全体とナビゲーションのモバイル対応
1 モバイル表示のときだけページの左右にスペースを作る
2 ロゴ画像のサイズを少し小さくする
3 ナビゲーションのリストを縦に並べる
06 コラムレイアウトの調整
1 2コラムレイアウトを解除して、シングルコラムにする
2 about.htmlのスタイルも調整
07 フォームの調整
1 フォーム部品の幅を画面にフィットさせる

chapter12 Webサイトの公開
01 Webサイト公開までの準備
1 Webサーバーの契約
02 Webサーバーに接続
1 FTPクライアントを設定する
03 ファイルのアップロード
1 「cafe」フォルダのすべてのファイルをアップロードする
04 Webサイトの最終確認
1 ブラウザでWebサイトにアクセスする
INDEX
HTML要素一蘭
CSSプロパティ一覧

Column
さあ、実習を始めよう
HTMLのバージョン
「http://」とか「https://」って何?
クラス名の付け方
テキストに「<>」が入っているけど大丈夫?
CSSの色指定
長さ・大きさの単位
CSSのバージョン
マージンのたたみ込み
バリデーションサービスで間違いを見つけよう
ほかのサイトのHTMLやCSSを解読してみよう

スラスラわかるHTML&CSSのきほん第2版

狩野祐東 (著)

出版社: SBクリエイティブ; 第2版 (2018/4/14)、出典:出版社HP

目次 – これから学ぶHTML/CSS

手を動かく、覚えるが身につく

実際に手を動かして学んでもらえるように工夫したことが挙げられます。すべてのHTML、および、CSSのソースコードを掲載していますので、それらを入力、表示させて確認できます。

はじめに

PCに電源を入れてログインした後、まず起動するソフトウェアは何でしょうか?PCの使い方にもよりますが、恐らくEdaeやSafari、Chromeなどのブラウザと答える人が多いのではないでしょうか。特にプライベートでPCを利用する場合は、まずブラウザを起動して…、ということは多いと思います。スマートフォンやタブレットではどうでしょうか?こうなると専用のアプリを利用することも多いでしょうが、何かあるごとにiPhoneやiPadならばSafariを、AndroidならばChromeを起動しているのではないでしょうか。

これらのブラウザを利用した際、そこに表示された画面にはほぼ間違いな<HTMLとCSSが使われています。ということは、現代の情報社会で、情報の流れの一番終端にHTML/CSSが位置付けられており、その意味で、このHTML/CSS抜きでは情報社会は成り立たないといっても過言ではありません。

では、情報社会の仕組みを作っている人たち、つまり、IT技術者たちの中でHTML/CSSの専門家は誰かと聞かれたら、Webデザイナ、あるいは、Webコーダーと答えるのが正論です。確かに、WebデザイナやWebコーダーがHTML/CSSの専門家ではありますが、彼らだけがHTMLやCSSを知っておけばいいのかというと、答えはNoです。

ブラウザに表示されるさまざまなものの裏にWebシステムがかかわっている現状を考えると、これらWebシステムを作成するプログラマも、このHTML/CSSを習得しておく必要があると言わざるを得ません。その一方で、現在出版されているHTML/CSSの解説本のほとんどがWebデザイナ向けのものです。WebプログラマがWebプログラマの視点で、Webプログラミングに必要なHTML/CSSを解説する書籍があってもいいのではないだろうか、という思いが本書を執筆した理由です。

本書を終えた読者が、本書で得た技術でもって、よりユーザビリティの高いWebシステムを作成できるようになれば、こんなにうれしいことはありません。

2019年4月
齊藤新三

これから学ぶHTML/CSS

齊藤新三 (著), 山田祥寛 (著)

出版社: インプレス (2019/6/21)、出典:出版社HP

Chapter1 Webの仕組みとHTML/CSSの役割
1-1 HTMLとWeb・インターネットの関係
1-1-1インターネットはコンピュータネットワークの一種
1-1-2ハイパーテキストとHTML
1-1-3 Web
1-2 CSSの役割
1-2-1 HTMLにスタイルを設定するCSS
1-3 HTMLとCSSの歩み
1-3-1ゆがめられたHTMLとCSS
1-3-2本来のHTMLとCSSに戻る道程
1-3-3ブラウザ対応状況の調べ方
1-3-4システムとHTML・CSSの関係

Chapter2 HTML/CSSを作成・表示する環境を作ろう
2-1 HTML/CSSを表示するための環境を構築する
2-1-1 Webサーバの用意
2-1-2 XAMPPとは
2-1-3 XAMPPのダウンロード
2-1-4 WindowsへのXAMPPのインストール
2-1-5 MacへのXAMPPのインストール
2-1-6 Apacheの起動と確認
2-2 URLとドキュメントルート
2-2-1 localhostとは
2-2-2ドキュメントルート
2-2-3 URLとドキュメントルートの関係
2-3 HTMLとCSSを作成するツール
2-3-1 HTMLとCSSのファイルはテキストファイル
2-3-2コーディングしやすいツールを使おう
2-3-3文字コードはUTF-8で保存

Chapter3初めてのHTM
3-1初めてのhtmlファイル作成
3-1-1始まりはいつもHelloWorld!
3-2 HTMLのお約束事
3-2-1 HTMLを構成しているものはタグ
3-2-2 HTML文書の基本構造
3-2-3ヘッダ要素に記述するタグ
3-3 HTML文書の注意点
3-3-1半角スペースと制御文字の扱い
3-3-2 HTML文字参照
3-3-3 HTML中のコメント

Chapter4基本の文書タグ
4-1改行を表すbrタグ
4-1-1ソースコード中の改行
4-1-2改行を表すタグ―br
4-2段落を表すpタグ
4-2-1段落を表すタグ―p
4-3見出しを表すhタグ
4-3-1見出しを表すタグ―h1
4-3-2見出しは6段階

Chapter5文章を束ねるタグと一部となるタグ
5-1段落を束ねるsectionタグ
5-1-1段落を束ねるタグ―section
5-1-2 sectionタグを重ねる
5-1-3章と節と項のすべてがsectionタグ
5-2ヘッダとフッタ
5-2-1ヘッダを表すタグ―header
5-2-2フッタを表すタグ―footer
5-3自己完結した文書ブロックの扱い
5-3-1自己完結した文書ブロックを囲むタグ―article
5-3-2一番中心となるコンテンツを表すタグ―main
5-3-3各ページ共通のフッタとヘッダ
5-3-4コンテンツを整理するその他のタグ
5-4テキストに意味を与えるタグ
5-4-1重要な要素を強調するタグ―strong
5-4-2フォントサイズを小さくするタグ―small
5-4-3インラインタグリファレンス

Chapter6リスト表示タグ
6-1リスト表示のタグ
6-1-1リスト表示の基本はulとli
6-1-2番号付きリストはol
6-2説明リスト表示のタグ
6-2-1説明リストはdlとdtとddの組み合わせ
6-3リストの入れ子
6-3-1リストタグ内にリストタグを入れる

Chapter7テーブル表示タグ
7-1テーブル表示の基本
7-1-1テーブル表示の基本はtableとtrとtd
7-1-2各行のセルの数はそろえる
7-1-3テーブルの枠線はCSSの役割
7.2テーブル内のヘッダとフッタ
7-2-1ヘッダを表すtheadとth
7-2-2列がヘッダとなる場合
7-2-3フッタを表すtfoot
7-3セルの結合
7-3-1横方向の結合はcolspan属性
7-3-2縦方向の結合はrowspan属性
7-4テーブルのキャプション
7-4-1テーブルにキャプションが付けられるタグーcaption

Chapter8リンクとコンテンツ埋め込みタグ
8-1別コンテンツへジャンプするリンク
8-1-1ハイパーリンクを作成するタグーa
8-1-2ハイパーリンクを別ウィンドウで開くtarget属性
8-1-3同一階層のファイルへのリンク
8-1-4別階層のファイルへのリンク
8-1-5ページ内リンク
8-2画像の埋め込み
8-2-1画像を表示するタグimg

Chapter9フォーム関連タグ
9-1フォーム関連タグの基本
9-1-1フォームとは
9-1-2フォームを作成するタグ一form
9-1-3ボタンを表示するタグーbutton
9-2テキストー行コントロール
9-2-1基本のコントロールであるinputタグとtype属性
9-2-2ラベルを表すタグ-label
9-2-3inputタグの主な属性
9-2-4必須入力を表す属性required
9-2-5inputのバリエーション
9-2-6フォームをグループ化するタグ一fieldset
9-3ラジオボタンとチェックボックス
9-3-1ラジオボタンもチェックボックスもinputタグ
9-3-2単一選択のラジオボタン
9-3-3複数選択のチェックボックス
9-4ドロップダウンリスト
9-4-1ドロップダウンリストはselectタグとoptionタグの組み合わせ
9-5複数行の入力欄
9-5-1複数行のコントロールtextareaタグ

Chapter10 CSSの基本
10-1スタイル宣言とCSS
10-1-1スタイルを変更する属性-style属性
10-1-2スタイル宣言を複数記述
10-1-3主なプロパティ
10-2 CSSルールセット
10-2-1スタイルを効率よく適用する仕組みとしてのCSSルールセット
10-2-2 CSSルールセットの書き方の基本
10-2-3 CSSルールセットは複数記述できる
10-3 CSSルールセットの外部ファイル化
10-3-1 CSSルールセットを外部ファイルに記述
10-3-2外部CSSファイルの読み込み
10-3-3 cssファイルのコメント
10-3-4スタイルの優先順位

Chapter11 CSSセレクター
11-13種類のセレクタ
11-1-1要素セレクタの問題点
11-1-2スタイルの適用先をidで指定するidセレクター
11-1-3スタイルの適用先をclassで指定するクラスセレクター
11-1-4 3種類のセレクタのまとめ
11-2セレクタの組み合わせ
11-2-1子孫セレクタと子セレクター
11-2-2兄弟セレクター
11-2-3疑似セレクター
11-2-4属性セレクター
11-3リストとテーブル用のCSS記述
11-3-1リスト用CSS記述
11-3-2テーブル用CSS記述
11-3-3テーブルの列にスタイルを適用するタグ

Chapter12 CSSレイアウト
12-1ボックスモデル
12-1-1ボックスモデルとは
12-1-2ボックスのサイズを設定するプロパティーwidthとheight
12-1-3スタイルを設定するためだけのタグdivとspan
12-1-4ボックスの余白を設定するプロパティーmarginとpadding
12-1-5ボックスの並び方を決めるプロパティーdisplay
12-1-6ボックス内に収まらないコンテンツの表示に関するプロパティーoverflow
12-2ボックスを浮かす12-2-1ボックスを浮かすプロパティーfloat
12-3フロートレイアウト
12-3-1フロートレイアウトに欠かせないclearプロパティ
12-3-2フロートレイアウトの手順
12-3-3サイズがなくなるボックスへの対応
12-3-4フロートクリア専用のクラス
12-4ポジション
12-4-1ボックスの位置を指定するプロパティーposition
12-4-2あるときからfixedに代わるsticky
12-4-3何かを基準にした位置に表示されるabsoluteと基準になるrelative

Chapter13レスポンシブレイアウト
13-1レスポンシブレイアウト
13-1-1フロートレイアウトで横並びナビを作ってみる
13-1-2レスポンシブレイアウトとは
13-1-3メディアクエリによるcssファイルの切り替え
13-1-4 cssファイル内でメディアクエリを利用する
13-2 displayプロパティの活用
13-2-1ボックスをインラインで表示するinline-block
13-2-2フレックスボックスレイアウト
13-2-3グリッドレイアウト

これから学ぶHTML/CSS

齊藤新三 (著), 山田祥寛 (著)

出版社: インプレス (2019/6/21)、出典:出版社HP

本書の使い方

本書のひとつの特徴として、実際に手を動かして学んでもらえるように工夫したことが挙げられます。すべてのHTML、および、CSSのソースコードを掲載していますので、それらを入力、表示させて確認できます。

本書の進め方
Web製作に関する技術というのは(Web製作に限りませんが)、書籍を読むだけでは身に付きません。実際にソースコードを入力し、表示させてみてください。その後、解説を読むという流れで進めていってください。

PIE対応について
本書掲載のサンプルソースコードは、モダンブラウザと呼ばれる以下のブラウザで表示確認しています。
・GoogleChrome73
・FireFox66
・MicrosoftEdge42
・Safari12

バージョン番号については、原稿執筆時点での最新バージョンです。さらに、Microsoft Internet Explorer(IE)11でも表示確認を行っています。ただし、ブラウザによってはサポートしていないタグや属性、CSSプロパティなどがあるため、サンプルによってはすべてのブラウザで同じように表示されない場合があります。その場合は、その旨を記載していますので、参考にしてください。

Chapter14について
本書はChapter13までしか掲載していませんが、番外編として、より実践的な内容をChapter14としてPDFの形で提供しています。こちらは、サンプルと一緒にダウンロードできるようになっています。Chapter13まで一通り終えられた後、ぜひ、読んでみてください。

ダウンロードサンプルの扱い
最初に記載した通り、本書ではすべてのソースコードを掲載していますのでダンロードサイトからサンプルをダウンロードする必要はありません。とはいえ成形や正常に表示した状態の確認のために、サンプルをダウンロードしたい場合は、以下のページよりダウンロードできます。
インプレスのダウンロードサイト
URL:https://book.impress.co.jp/books/1118101065
WINGSプロジェクトのダウンロードサイト
URL:https://wings.msn.to/index.php/-/A-03/978-4-295-00638-1/

ダウンロードしたファイルはzip圧縮されており、全ソースファイルが含まれています。このzipファイルを解凍すると、図0-1のように各Chapterごとにchap03~chap14のフォルダに分かれており、その中にそのChapterで解説するサンプルソースファイルが入っています。
一例として図0-2にchap03のフォルダ内のファイルを掲載しています。
図0-1:サンプルソース収納のフォルダ

図0-2:「chap03」フォルダ内のファイル

コードの書式
入力するHTMLコードやCSSコードは、次のようなピンク地の囲み内に示しています。

HelloWorld!

なお、紙面の都合上2行にわたっていても、続けて1行で入力すべきコードの継続位置には、次の例のように⇒アイコンを入れています。

こちらからダウンロード⇒

リファレンスや構文
本書はHTMLやCSSのリファレンス本ではありません。あくまで解説のための本ですので、辞書的な使い方には向きません。とはいえ、一度解説を読んだ後にもう一度確認したい場合などのために、各種タグや属性などは次のようなリファレンス形式で掲載しています。
タグ
説明ハイパーリンクを作成する
属性
href リンク先を記述する
target リンク先の開き方を指定する
download リンク先を表示させずにダウンロード処理する
rel リンク先との関係を指定する

また、重要な構文については書式や説明と共に、次のような赤い枠で囲んで示しています。
構文コメントタグ

タグで囲まれた部分がコメントして扱われ画面には表示されない

会話の登場人物「本書では、要所要所に会話が登場します。その登場人物は以下の3人です。特に、キョウタくんは本書の読者を想定しており、このキョウタくんがHTML、および、CSSを学習していく過程を読者の学習過程と重ね合わせることで、本書が進んでいきます。この3人の会話によって、ソースコードの登場理由や補足事項が説明されたり、話の流れが変わったりします。ぜひ、キョウタくんと同じ立場に立って会話も楽しんでください。

ワトソン先生プログラミングサークルの顧問で准教授。専門は、HTML/CSS、JavaScript、PHP、JavaなどWeb全般。
一歩ずつ進んでいこう!

ユーコさん:プログラミングサークルの部長で理系の大学3年生。サーバサイドプログラミングからフロントのHTML/CSSまで何でもこなすフルスタックエンジニアを目指して就活中。
わからないことは何でも聞いてね!

キョウタくん:理系の大学1年生。システム開発に興味を持ち始めてプログラミングサークルの戸を叩く。プログラミングの前にHTML/CSSなどのWebの勉強をした方がいいと勧められて、勉強中。
よーし、頑張るぞ!

これから学ぶHTML/CSS

齊藤新三 (著), 山田祥寛 (著)

出版社: インプレス (2019/6/21)、出典:出版社HP