by ryou

最近知ったHTML/CSSに関するTips

長らく更新してなかったので、とりあえずここ最近知ったHTML/CSSのTipsを

どのタグにどのタグを入れれるかとか

基本

  • インライン要素の中にはインライン要素しか入れてはいけない。
  • ブロック要素はなんでもOK

インライン要素しか入れれないブロック要素

  • h1~のh系
  • p
  • dt

例外系

  • ol,ulはliしか入れられない
  • dlはdt,ddしか入れられない

さらに

aタグに関してはHTML5で大幅に変更。

aタグの親要素が許すタグであればなんでも入れられるっぽい。

参考

『コンテンツ・モデル』について / HTML5マークアップ時の基本 | HTML5でサイトをつくろう

tableの行にmin-heightを指定したい

table要素のmin-heightは挙動が未定義のため、min-heightは使用してはいけない。

行の最小の高さを指定したい場合は、trの:before(:after)擬似要素に、min-heightとして指定したい高さのheightを指定したtable-cell要素を追加し、そのwidthを0とする。

tr:after {
  content: '';
  display: table-cell;
  height: 100px;
  width: 0;
}

参考

min-height – CSS | MDN(※注記にtable要素がmin-heightの挙動未定義との記述)

JSを使わず、CSSのみで画像のプリロードを行う方法

:before(:after)擬似要素のcontentに画像を指定し、display:noneで非表示にしておく。

body:before {
  content: url(./target01.png), url(./target02.png);
  display: none;
}

参考

LightboxのCSS