CSS基礎 練習問題 65:レイアウトに影響しない輪郭線
要素の周囲に線を引く際、ボーダー(border)とは異なり、線の太さが要素の幅や高さの計算(レイアウト)に影響を与えない輪郭線を引きたい場合、正しいプロパティはどれか。
- outline
- border
- box-shadow
- padding
- stroke
正解と解説を見る
正解:outline
要素の幅や高さの計算に影響を与えずに周囲に線を引くことができるプロパティ「outline」が正解です。
【正解の理由】
「outline(=アウトライン)」は要素の外側に描画されますが、物理的なスペース(太さ)を占有しないため、レイアウトを崩さずにフォーカス時の枠線などを示すのに使われます。
【不正解の理由】
• 「border」は要素の境界線であり、指定した太さの分だけ要素全体のサイズが大きくなりレイアウトに影響を与えます
• 「box-shadow」は要素に影をつけるためのもので、線のような表現も可能ですが、単なる枠線を描く本来の目的とは異なります
• 「padding」は要素の内側の余白(コンテンツと境界線の間のスペース)を指定するもので、線ではありません
• 「stroke」はSVG(=ベクター画像フォーマット)の図形の輪郭線の色を指定するプロパティであり、通常のHTML要素の枠線には使いません