今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典 (今すぐ使えるかんたんPLUSシリーズ)
【【最新!】 独学HTMLとCSSの勉強できる書籍 -入門•基礎から- 】をTech Here!で確認する
本書の使い方
・HTML5の要素、CSS3のプロパティについて解説しています
・主要ブラウザの対応状況がひと目でわかります
・使用できる属性や指定可能な値を簡潔にまとめています
サンプルファイルについて
本書の解説で利用しているサンプルファイルは、本書のサポートページからダウンロード可能です。ブラウザを使い、以下のURLにアクセスしてください。
https://gihyo.jp/book/2018/978-4-7741-9811-8/support
サンプルファイルはZIP形式で圧縮されていますので、展開してご利用ください。
各解説の右上に、対応するサンプルファイルのフォルダーを記載しています。
たとえば、「CSS > 03 > 29_writing-mode」と書かれていた場合は、「CSS」フォルダー内の「03」フォルダーにある、「29_writing-mode」フォルダーの中にサンプルファイルがあります。
–
目次
HTML編
▶︎HTML基礎
HTMLの基礎
カテゴリー
コンテンツモデル
アウトライン
グローバル属性
マイクロデータ
WAI-ARIA
▶基本構造
DOCTYPE ドキュメントタイプを宣言する
html ルート要素を示す
head ヘッダ情報を示す
meta HTML文書に関する情報(メタデータ)を示す
title HTML文書のタイトル要素を示す
base 相対パスの基準となるURLを指定する
link 指定した外部のリソースを参照する
style スタイル情報を記述する
body HTML文書の本文を示す
▶セクション
main HTML文書のメインコンテンツを示す
article 記事コンテンツを示す
section 文章のセクションを示す
header セクションのヘッダー情報を示す
footer 直近のセクションのフッター情報を示す
nav ナビゲーションを示す
aside 補足・余談の情報を示す
address 連絡先の情報を示す
div 特別に機能がない汎用的な範囲を示す
▶テキスト
h1、h2、h3、h4、h5、h6
見出しを示す
p 段落を示す
ol 順序のあるリストを表す
ul 順序のないリストを表示する
li リスト項目を表示する
dl 定義や説明のリストを表示する
dt 定義する用語を表示する
dd 定義した用語の説明を表示する
blockquote 引用文であることを示す
pre ソース中のスペースや改行をそのまま表示する
hr 段落の区切りを示す
▶テキストの装飾と強調
a リンクを示す
em テキストに強勢を付ける
strong テキストに重要性を示す
b 他と区別したいテキストを示す
i 通常のテキストとは少し異なるテキストを示す
u スペルミスや外国固有名詞などを示す
mark ユーザーの操作によって目立たせるテキストを示す
small 細目(さいもく)を示す
s 無効になった内容を示す
cite 文献や作品のタイトルを示す
q 短い引用文であることを示す
dfn 定義語を示す
abbr 略語や頭文字を示す
ruby ルビを振る
rb ルビを振る対象テキストを示す
rt ルビテキストを示す
rp ルビテキストを示す
rtc ルビテキストの集まりを示す
time 日付や時刻を正確に示す
data コンピュータが理解できるデータを示す
sub 下付き文字を表示する
sup 上付き文字を表示する
span 汎用的な範囲を示す
br 改行を示す
wbr 改行が可能な位置を指定する
ins 追加されたことを示す
del 削除された箇所を示す
bdi 他のテキストとは異なる書字方向であることを示す
bdo テキストの書字方向を指定する
code プログラムなどのコードであることを示す
var 変数であることを示す
samp プログラムなどの出力結果であることを示す
kbd ユーザがコンピュータへ入力する内容であることを示す
▶埋め込み要素
img 画像ファイルを表示する
picture レスポンシブ・イメージを指定する
source video要素、audio要素、picture要素で複数の外部リソースを指定する
【実践サンプル①】 ユーザのディスプレイ環境に合わせて異なる画像を表示する
map イメージマップを作成する
area ホットスポット領域を指定する
figure 図表などのまとまりを示す
figcaption figure要素のキャプション(表題)を示す
iframe インラインフレームを表示する
embed 外部アプリケーションやインタラクティブコンテンツを埋め込む
audio 音声コンテンツを埋め込む
video 動画コンテンツを埋め込む
track video要素やaudio要素のトラック情報を指定する
svg SVG画像をHTML文書に埋め込む
object 外部のリソースを埋め込む
▶テーブル
table テーブル(表組み)を作成する
tr テーブル(表組み)の行を表す
th テーブル(表組み)の見出しセルを表す
td テーブル(表組み)のセルを表す
caption テーブル(表組み)のタイトルを表す
thead テーブル(表組み)のヘッダ要素の行グループを表す
tbody テーブル(表組み)のボディ要素の行グループを表す
tfoot ケーブル(表組み)のフッタ要素の行グループを表す
colgroup テーブル(表組み)の列グループを表す
col テーブル(表組み)の列を表す
【実践サンプル②】HTML5でテーブルを作成する
▶フォーム
form フォーム関連の要素を指定する
input フォームの入力要素を作成する
type 「text」 1行のテキスト入力欄を作成する
type 「hidden」 画面には表示されないデータを作成する
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」 RGBカラーの入力欄を作成する
type 「checkbox」 チェックボックスを作成する
type 「radio」 ラジオボタンを作成する
type 「file」 送信するファイルの選択欄を作成する
type「submit」 送信ボタンを作成する
type [image」 画像の送信ボタンを作成する
type 「reset」 入力内容のリセットボタンを作成する
type 「button」 汎用的なボタンを作成する
button ボタンを作成する
textarea 複数行のテキスト入力欄を作成する
select プルダウンメニューを作成する
option select要素、datalist要素の選択肢を作成する
optgroup option要素のグループを作成する
datalist 入力候補を作成する
label 入力コントロールの項目名を表す
output 計算結果を表示する
progress プログレスバー(進行状況)を表示する
meter 特定範囲の測定値を表示する
fieldset 入力コントロールをグループ化する
legend fieldset要素で作られたグループの見出しを作成する
【実践サンプル③】 問い合わせフォームを作る
▶インタラクティブ要素
details 追加の詳細情報を示す
summary 要素の要約を示す
dialog ダイアログを示す
▶スクリプト
script JavaScriptなどクライアントサイドスクリプトを埋め込み
noscript スクリプトが動作しない環境の内容を表す
template スクリプトが利用するHTMLのパーツを表す
canvas グラフィックやアニメーションの描写領域を表す
CSS編
▶CSS基礎
CSSの書式
CSSの組み込み方
ボックスモデル
スタイル適用の優先順位
ベンダープレフィックス
▶セレクタ
全称セレクタ すべての要素を指定する
要素型セレクタ 特定の要素を指定する
子孫セレクタ 子孫要素を指定する
子セレクタ 子要素を指定する
隣接兄弟セレクタ 直後の兄弟要素を指定する
一般兄弟セレクタ 弟要素を指定する
クラスセレクタ クラス名を持つ要素を指定する
IDセレクタ ID名を持つ要素を指定する
属性セレクタ① 特定の属性を持つ要素を指定する
属性セレクタ② 特定の属性と属性値を持つ要素を指定する
属性セレクタ③ 特定の属性値を含む要素を指定する
属性セレクタ④ 属性値が指定の文字列ではじまる要素を指定する
属性セレクタ⑤ 属性値が指定の文字列で終わる要素を指定する
属性セレクタ⑥ 属性値が指定の文字列を含む要素を指定する
属性セレクタ⑦ 属性値が指定の文字列でハイフン区切りで始まる要素を指定 する
:root HTMLドキュメントのルートを指定する
:nth-child(n) n番目の子要素を指定する
:nth-last-child(n) うしろから数えてn番目の子要素を指定する
:nth-of-type(n) 同じ要素のみをカウントして、n番目の子要素を指定する
:first-child 最初の子要素を指定する
:last-child 最後の子要素を指定する
:first-of-type 同じ要素のみをカウントして、最初の子要素を指定する
:last-of-type 同じ要素のみをカウントして、最後の子要素を指定する
:only-child 子要素が1つだけの時に指定する
:only-of-type 要素の種類に関係なく、指定した子要素が1つだけの時に指 定する
:empty 空の要素を指定する
:link リンク先が未訪問の時にスタイルを適用する
:visited リンク先が訪問済みの時にスタイルを適用する
:hover カーソルが乗っている要素にスタイルを適用する
:active 要素がアクティブになった時にスタイルを適用する
:focus 要素がフォーカスされている時にスタイルを適用する
:target アンカーリンクのターゲット先の要素にスタイルを適用する
:lang 特定の言語が指定された要素にスタイルを適用する
:enabled 有効になっている要素にスタイルを適用する
:disabled 無効になっている要素にスタイルを適用する
:checked チェックされている要素にスタイルを適用する
:first-line 要素の1行目にスタイルを適用する
:first-letter 要素の1文字目にスタイルを適用する
:before/::after 要素の前後にコンテンツを挿入する
:not 指定条件に当てはまらない要素にスタイルを適用する
▶文字
color テキストの色を指定する
font-style フォントのスタイルを指定する
font-variant フォントをスモールキャップスに指定する
font-weight フォントの太さを指定する
font-size フォントのサイズを指定する
line-height 行の高さを指定する
font-family フォントの種類を指定する
font フォント関連のプロパティをまとめて指定する
font-stretch フォント幅の拡大・縮小を指定する
font-size-adjust フォントのサイズを調整する
font-feature-settings OpenTypeフォントの機能を制御する
@font-face Webフォントを利用する
text-transform テキストを大文字や小文字表示に指定する
text-align テキストの行揃えの位置を指定する
text-align-last テキストの最終行の揃え位置を指定する
text-justify text-align: justifyの形式を指定する
text-overflow テキストが表示領域をはみ出したときの表示を指定する
text-indent テキストの1行目の字下げ幅を指定する
letter-spacing 文字の間隔を指定する
word-spacing 単語の間隔を指定する
tab-size タブ文字の表示幅を指定する
white-space 要素内のスペース・タブ・改行の表示を指定する
word-break テキストの改行方法を指定する
line-break 改行の禁則処理を指定する
overflow-wrap 単語の途中での改行を指定する
hyphens 単語の途中での折り返す際のハイフン(-)を指定する
direction テキストを表示する方向を指定する
unicode-bidi 文字表記の方向設定の上書き方法を指定する
writing-mode 縦書き、横書きを指定する
text-decoration-line テキストに対する線の種類を指定する
text-decoration-style テキストに対する線のスタイルを指定する
text-decoration-color テキストに対する線の色を指定する
text-decoration テキストに対する線をまとめて指定する
text-emphasis-style テキストに付ける圏点のスタイルを指定する
text-emphasis-color テキストに付ける圏点の色を指定する
text-emphasis テキストに付ける圏点をまとめて指定する
text-emphasis-position テキストに付ける圏点の位置を指定する
text-shadow テキストに影を追加する
vertical-align 縦方向の揃え位置を指定する
▶境界・余白
margin ボックスの外側の余白を指定する
padding ボックスの内側の余白を指定する
border-style ボーダーのスタイルを指定する
border-width ボーダーの幅を指定する
border-color ボーダーの色を指定する
border ボーダーのプロパティをまとめて指定する
border-radius ボーダーの角丸を指定する
border-image-source ボーダーに画像を指定する
border-image-width ボーダー画像の幅を指定する
border-image-slice ボーダー画像の分割位置を指定する
border-image-repeat ボーダー画像の繰り返しを指定する
border-image-outset ボーダー 画像の領域を広げるサイズを指定する
border-image ボーダー画像のプロパティをまとめて指定する
▶背景
background-color 背景の色を指定する
background-image 背景画像を指定する
background-attachment スクロール時の背景画像の表示方法を指定する
background-repeat 背景画像の繰り返しを指定する
background-position 背景画像を表示する位置を指定する
background-clip 背景画像を表示する領域を指定する
background-size 背景画像のサイズを指定する
background-origin 背景画像を表示する基準位置を指定する
background 背景のプロパティー括指定する
linear-gradient 線形グラデーションを指定する
radial-gradient 円形グラデーションを指定する
repeating-linear-gradient 繰り返しの線形グラデーションを指定する
repeating-radial-gradient 繰り返しの円形グラデーションを指定する
▶ボックス
width/height ボックスの幅と高さを指定する
max-width/max-height ボックスの幅と高さの最大値を指定する
min-width/min-height ボックスの幅と高さの最小値を指定する
box-sizing ボックスサイズの計算方法を指定する
box-shadowボックスに影を追加する
box-decoration-break ボックスが改行する時の表示方法を指定する
overflow-x/overflow-y ボックスからコンテンツがはみ出た時の水平方向・垂直方向の表示方法を指定する
overflow ボックスからコンテンツがはみ出た時の表示方法を指定する
outline-style ボックスのアウトラインのスタイルを指定する
outline-width ボックスのアウトラインの幅を指定する
outline-color ボックスのアウトラインの色を指定する
outline ボックスのアウトラインのプロパティをまとめて指定する
outline-offset ボックスのアウトラインとボーダーの間隔を指定する
resize ボックスのリサイズを許可する
display ボックスの種類を指定する
float ボックスの回り込みを指定する
clear ボックスの回り込みを解除する
position ボックスの配置規則を指定する
top/right/bottom/left ボックスの配置位置を指定する
z-index ボックスの配置位置を指定する
visibility ボックスの表示・非表示を指定する
▶テーブル
table-layoutテーブルのレイアウトアルゴリズムを指定
border-collapse テーブルのボーダーの表示形式を指定
border-spacing テーブルのボーダーの間隔を指定する
empty-cells テーブル内の、空のセルの表示形式を指定する
caption-sideテーブルのcaption要素の表示位置を指定する
▶表示
list-style-type リスト項目のマーカーの種類を指定する
list-style-position リスト項目のマーカーの位置を指定する
list-style-image リスト項目のマーカーの画像を指定する
list-styleリスト項目のマーカーをまとめて指定する
opacity 要素の透明度を指定する
cursor マウスポインターのデザインを指定する
content コンテンツを挿入する
quotes contentプロパティで挿入する記号を指定する
counter-increment contentプロパティで挿入するカウンターの更新値を指定する
counter-reset content プロパティで挿入するカウンター値をリセットする
object-fit 画像などをボックスにどのようにフィットさせるか指定する
object-position 画像などをボックスに表示させる位置を指定する
image-orientation 画像を回転させる.
▶段組み
column-count 段組みの列数を指定する
column-fill 段組み内の要素の表示バランスを指定する
column-gap 段組みの列の間隔を指定する
column-rule 段組みの列間に引く罫線のプロパティをまとめて指定する
column-rule-color 段組みの列間に引く罫線の色を指定する
column-rule-style 段組みの列間に引く罫線のスタイルを指定する
column-rule-width段組みの列間に引く罫線の太さを指定する
column-span段組み内の要素が複数の列にまたがるかを指定する
column-width 段組みの列の幅を指定する
columns 段組みの列数と列の幅をまとめて指定する
break-before/break-after/break-inside 改ページや段組みの区切り位置を指定する
▶変形
transform(2D) 要素を2Dに変形させる
transform(3D) 要素を3Dに変形させる
transform-origin 要素を2D・3D変形させる時の中心点を指定する
transform-style 3D変形させる時の子要素の配置方法を指定する
perspective 要素を3D変形させる時の奥行きを指定する
perspective-origin 3D変形させる時の要素の奥行きの基点を指定する
backface-visibility 3D変形させる時の、要素の背面の描画方法を指定する
▶アニメーション
@keyframes アニメーションの動きとタイミングを指定する
animation-name 要素にアニメーション名を指定する
animation-duration アニメーションの1回分の時間を指定する
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 トランジション効果をまとめて指定する
▶フレキシブルボックス
display: flex/display: inline-flex flexboxコンテナを指定する
flex-direction flexboxアイテムを配置する方向を指定する
flex-wrap flexboxアイテムの折り返しを指定する
flex-flow flexboxアイテムの配置する方向と折り返しを指定する
order flexboxアイテムを配置する順番を指定する
flex-grow flexboxアイテムの幅の、伸びる倍率を指定する
flex-shrink flexboxアイテムの幅の、縮む倍率を指定する
flex-basis flexboxアイテムを指定する
flex flexboxアイテムの幅を一括で指定する
justify-content flexboxアイテムをメイン軸に沿って配置する位置を指定する
align-item flexboxアイテムのクロス軸に沿って配置する位置を指定する
align-self flexboxアイテムをクロス軸に沿って配置する位置を個別に指定する
align-content flexboxアイテムをクロス軸に沿って配置する位置を指定する
▶グリッドレイアウト
display: grid/display: inline-grid グリッドレイアウトを指定する
grid-template-rows/grid-template-columnsグリッドレイアウトの行と列のトラックサイズを指定する
grid-template グリッドレイアウトの行と列のトラックサイズをまとめて指定する
grid-row-start/grid-row-end/grid-column-start/grid-column-end 行と列のグリッドアイテムの開始位置と終了位置を指定する
grid-row/grid-column 行と列のグリッドアイテムの位置を指定する
grid-template-areas グリッドレイアウトのエリアを指定する
grid-area グリッドアイテムのエリア名を指定する
grid-row-gap/grid-column-gap グリッドアイテム同士間の行と列の余白を指定する
grid-gapグリッドアイテム同士間の余白をまとめて指定する
grid-auto-flowグリッドアイテムの配置方向を指定する
grid-auto-rows/grid-auto-columns 暗黙のトラックのサイズを指定する
付録
▶CSS関数
CSS関数とは
calc() プロパティ値の計算(四則計算)を行う
counter() カウンターを使用する
attr() 属性値を取得する
rgb()/rgba() 色をRGB・RGBaで指定する
hsl()/hsla() 色をHSL・HSLaで指定する
minmax() グリッドレイアウトでトラックの幅の最小値と最大値を指定する
repeat() グリッドレイアウトでトラックの幅の指定を繰り返す
var() CSS変数を使用する
▶︎ 数値と単位
プロパティに指定する数値と単位
▶カラー
カラーの指定方法
▶イベントハンドラ
イベントハンドラ属性とは
索引
ご注意
■本書をお読みになる前に
・本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた運用は、必ずお客様自身の責任と判断によって行ってください。ソフトウェアの操作や掲載されているサンプルの実行結果など、これらの運用の結果について、技術評論社および著者、サービス提供者はいかなる責任も負いません。
・本書記載の情報は、2018年6月現在のものを掲載しています。ご利用時には変更されている場合もあります。ソフトウェア等はバージョンアップされる場合があり、本書での説明とは機能内容や画面図などが異なってしまうこともあり得ます。本書ご購入の前に、バージョン番号をご確認ください。
・本書では、執筆当時の最新バージョンである以下の環境における、各ブラウザの対応状況を解説しております。
Microsoft Edge 42/Internet Explorer 11 / Google Chrome 61 / Firefox 61 /Opera 53 / Safari 11 / Android 7 (Chrome) / iOS 11 (Safari)
以上の注意事項をご承諾いただいた上で、本書をご利用願います。これらの注意事項をお読みいただかずにお問い合わせいただいても、技術評論社および著者、サービス提供者は対処しかねます。あらかじめ、ご承知おきください。
本文中の会社名、製品名は各社の商標、登録商標です。
