過去ウェブデザイン技能検定ではCSSの初期値があっているかどうかといった問題が出題されたことがあります。
リセットやらノーマライズやら自分でCSSを作成されている方や、長く経験されている方などにとっては当たり前の内容になってしまいますが、テキストエディターの自動入力や予測変換に頼りっぱなしになっていたりすると案外忘れてきていたりする内容もあるかと思いますので、すべての初期値というわけではありませんが、是非この機会に見直してみてはいかがでしょうか。
色々なプロパティの初期値
display
- 初期値:
inline - 説明: 多くの要素のデフォルト表示形式。例：
<span>,<a>。ブロックレベル要素の初期値はblock。例：<div>,<section>。
position
- 初期値:
static - 説明: 要素は通常の文書の流れに従って配置される。
float
- 初期値:
none - 説明: 要素はデフォルトで浮動しない。
clear
- 初期値:
none - 説明: 要素はデフォルトで浮動解除を行わない。
overflow
- 初期値:
visible - 説明: 内容があふれた場合に見えるようになる。
z-index
- 初期値:
auto - 説明: 要素の積み重ね順序が自動的に設定される。
visibility
- 初期値:
visible - 説明: 要素はデフォルトで表示される。
line-height
- 初期値:
normal - 説明: フォントサイズに応じた適切な行の高さが設定される。
text-align
- 初期値:
start（またはleft） - 説明: テキストが左揃えになる。
margin
- 初期値:
0 - 説明: 要素の外側の余白が設定されない。
padding
- 初期値:
0 - 説明: 要素の内側の余白が設定されない。
border
- 初期値:
none - 説明: 要素の周りに境界線が表示されない。
background-repeat
- 初期値:
repeat - 説明: 背景画像が縦横に繰り返される。
background-position
- 初期値:
0% 0% - 説明: 背景画像が左上に配置される。
list-style-type
- 初期値:
disc - 説明: リスト項目の先頭に黒丸が表示される。
table-layout
- 初期値:
auto - 説明: テーブルのレイアウトが自動的に決定される。
caption-side
- 初期値:
top - 説明: テーブルのキャプションが上部に表示される。
border-collapse
- 初期値:
separate - 説明: テーブルセルの境界が分離される。
empty-cells
- 初期値:
show - 説明: 空のテーブルセルが表示される。
quotes
- 初期値:
none - 説明: 擬似要素
:beforeおよび:afterのための引用符が表示されない。
counter-reset
- 初期値:
none - 説明: カウンタがリセットされない。
counter-increment
- 初期値:
none - 説明: カウンタが増加しない。
resize
- 初期値:
none - 説明: 要素がリサイズできない。
outline-style
- 初期値:
none - 説明: 要素の周りにアウトラインが表示されない。
outline-color
- 初期値:
invert - 説明: 要素の周囲の色とコントラストを持つようにアウトラインの色が自動的に調整される。
検定の対策としては初期値以外にも様々な値があるということを考えると初期値だけ覚えていても難しいとは思いますが、日ごろから制作などをしている方などは初期値だけ気を付けていれば、他の値に関してはある程度カバーできるのではないでしょうか。
