たつをの ChangeLog : 2019-11-09

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


教科書として良くまとまっていますね。
今回読んだのは「改定新版」ではなく「旧版」(2013)でしたが、知らなかったことやうろ覚えなことがたくさんあってためになり、読む前に決めた目標を達成しました。
改定新版では、レスポンシブ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; }

たつをの ChangeLog
Powered by chalow