リセットCSS内のタグとスタイルの意味について
リセットCSSを使う目的
ブラウザに元から指定されているスタイルをリセットすることで、ブラウザ間の表示を統一すること。
リセットCSSで指定されているタグとスタイルの意味
特にこだわりはないけど、よく模写でよく使うのがHTML5 Reset Stylesheet | HTML5 Doctorなので、その中に書かれているタグとスタイルの意味を書いていく。
タグやスタイルの中でも使うことが少なかったり、使ったことのないもの中心。
*,
*::before,
・・*::after {
box-sizing: border-box;
}
全ての要素と擬似要素にbox-sizing: border-box;を適用。widthを計算しやすくなる。
blockquote, q {
quotes:none;
}
引用符を表示しない。
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
blockquoteタグとqタグの前後にコンテンツを追加しない。
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
abbrタグとdfnタグのtitle属性にドットの下線を引き、カーソルをヘルプカーソルに変える。ブラウザではカーソルが？で表示される。
table {
border-collapse:collapse;
border-spacing:0;
}
tableタグの隣接したborderを重ねて、間隔を０で表示する。
タグ
blockquote
他のサイトからの引用を示す。
q
こちらも引用。blockquoteが長い文章の引用に対し、qは短い文章や文の一部の引用を示す。
object
外部のコンテンツを埋め込むことができる汎用的なタグ。
pre
整形済みテキストを表す。整形済みテキストとはファイル内のテキストのレイアウトをそのまま反映したもの。
abbr
略語を表す。title属性で省略する前の言葉を示すことができる。
例：HTML（Hypertext Markup Language)
address
文書に関する連絡先・問い合わせ先を表す。
cite
なんらかの作品のタイトルを表す。
code
プログラムのソースコードを表す。インデントや改行などをそのまま表示させるときはさらにpreタグで囲む。
ins
後から挿入、追記されたテキストを表す。下線が引かれる。
del
削除されたテキストを表す。取り消し線が引かれる。
dfn
用語が使われていることを表す。
em
強調したいテキストをイタリック体で表す。ただし重要なテキストを表したい場合はstrongタグを使う。
kbd
keyboardの略。ユーザーが入力する内容を表す。
samp
プログラムによる出力結果のサンプルを表す。
sup
数式や化学式などで使用される上付きテキストを表す。
sub
supタグと逆で、 下付きテキストを表す。
var
プログラムのソースコードの変数を表す。
b
キーワードや製品名、印刷される際の太字などのテキストを表す。強調ではない。
i
声や心の中で思ったことなどのテキストをイタリック体で表す。
fieldset
フォームの内容をまとめる。
legend
fieldsetタグでまとめられたグループの見出しを表す。fieldsetの最初の子要素。
caption
テーブルにタイトルや説明を入れる。tableタグ内に書く。
JavaScriptと合わせて使い、グラフやゲームグラフィックなどの図形を表示する。
figure
テキストから参照される図表などを表す。
figcaption
図表に注釈などをつける。
hgroup
セクションの見出しをまとめる
menu
文字数が少ないリストを表示するためのタグであるが、ulタグと役割が変わらないためほとんど使われない。
details
アコーディオンのような折りたたむ要素を作れる。
summary
detailsタグの中の見出しの役割。
mark
テキストをハイライトして目立たせる。
audio
音声を再生するときに使う。
video
動画を再生するときに使う。
hr
horizontal ruleの略。水平の横線を引き、話題の区切りを表す。
スタイル
outline: 0;
ブラウザ規定のフォーカスを消す。輪郭線を消す。
vertical-align: baseline;
フォントの基準線（フォントの下のライン）に合わせる。
background: transparent;
背景色を透明にする。
参考サイト
2019年版！おすすめのリセットCSSまとめ | Web Design Trends
はじめてのHTML5 第2回『HTML5のさらに詳しいCSSリセット方法』 | HTML5でサイトをつくろう
