復習と知識アップデートの目的で、技術書コーナーから借りて読みました。

• 赤間 公太郎 (著), 原 一宣。 (著), こもりまさあき (監修) / HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。
  
  

  インターネットやWebの世界は、新しい技術や手法が次々と登場してきますが、Webコンテンツ配信のベースになっているのは、今なおHTMLとCSSであることに変わりありません。
  Webデザインの根本的な仕組みや、技術の裏側にある背景を含めて深く理解することで、技術や手法が新しくなっても変わらずに役立つ「自分で考える力」を養うことを目指したものになっています。
  

教科書として良くまとまっていますね。
今回読んだのは「改定新版」ではなく「旧版」(2013)でしたが、知らなかったことやうろ覚えなことがたくさんあってためになり、読む前に決めた目標を達成しました。
改定新版では、レスポンシブWebデザインの話とかあるそうなので機会があったら目を通します。

• 赤間 公太郎 (著), 原 一宣。 (著), こもりまさあき (監修) / HTML5+CSS3の新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈レスポンシブWebデザイン対応〉
  

以下、自分用メモ。

擬似クラス nth-child
table tr:nth-child[2d] { background: #888; }

連続した見出しのマージン調整
h2 + h3 { marin-top: -20pt; } # h2の直後に隣り合ったh3に対する指定

上下マージンの重なり。
"margin-bottom: 20px" の下のが "margin-top: 50px" だったら大きい方(50)が使われる。
70にはならない。

段落の字下げ。
p { text-indent: 1em; }

ol の開始番号。
<ol start="-2">...</ol>
<ol reversed="reversed">...</ol>
<ol><li>...</li><li value="99">...</li>...</ol>

リストによるドロップダウンメニュー。
<nav>
<ul class="clearfix">
<li>aaa<ul><li>xxy</li><li>yyy</li><li>zzz</li></ul></li>
<li>bbb<ul>...</ul></li>
<li>ccc<ul>...</ul></li>
</ul>
</nav>
nav ul li { display: block; float: left; }
nav ul li ul { display: none; }
nav ul li:hover ul { position: absolute; display: block; }
nav ul li ul li { float: none; }

パンくずナビゲーション。パンくずリスト。
<nav>
<ol id="breadcrumbs"><li>...</li><li>...</li><li>...</li></ol>
</nav>
ol#breadcrumbs li { display: inline; list-style-type: none; }
ol#breadcrumbs li:after { content: ">"; }
ol#breadcrumbs li:last-child:after { content: ""; }

label 要素。テキスト部分クリックでもチェックつく。
<input type="checkbox" name="..." value="..." id="bar">
<label for="bar">ばばばばば</label>

フォームを構成する input などの要素はブロックレベル要素に入れる
<form action="...">
<p><input type="text ...></p>

新しい type 属性。
<input type="..." ...>
search, tel, url, email, date, time, datetime, range, color など

要素のグループ化。
<div id="header"> <div id="navi"> ...
＝＞ <header> <nav> <main role="main"> <aside> <footer>

article, section
<article><h1>aaa</h1><p>aaaaaaa</p>
<section><h2>bbb</h2><p>bbbbbb</p></section>
<section><h2>ccc</h2><p>cccccc</p></section>
</article>
<article><h1>kkk</h1><p>kkkk</p>
<section><h2>lmn</h2><p>ppppp</p></section>
...

clearfix おまじない。＃仕様になって欲しい
.clearfix { zoom; 1;}
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }
.clearfix:after { clear:both; }