CSS border と outline の違い
2024-10-29
CSS の border と outline は、どちらも要素の周りに線を引くためのプロパティですが、いくつかの重要な違いがあります。
border
- 丸みを付けることができる
border-radius を使って、角を丸くすることができます。 - 各辺を個別に設定可能
border-top, border-right, border-bottom, border-left を使って、各辺の幅、色、スタイルを個別に設定できます。 - 要素のサイズに影響する
border は要素の幅と高さを増加させます。
outline
- 主にアクセシビリティのために使用される
outline は、フォーカスされた要素を視覚的に強調するために使用されます。 - すべての辺が同じ
outline はすべての辺が同じ幅、色、スタイルになります。 - 要素のサイズに影響しない
outline は要素のサイズに影響を与えません。
例
/* border の例 */
div {
border: 2px solid black;
border-radius: 5px;
}
/* outline の例 */
input:focus {
outline: 2px dashed blue;
}
要約
- outline は主にアクセシビリティのために使用され、フォーカスされた要素を強調します。
- border は要素の外観をデザインするために使用されます。
/* border の例 */
div {
border: 2px solid black;
border-radius: 5px;
}
解説
border-radius: 5px;: この部分では、div 要素の角を 5 ピクセルの半径で丸くしています。border: 2px solid black;: この部分では、div 要素の周りに幅が 2 ピクセルの黒い実線ボーダーを設定しています。
/* outline の例 */
input:focus {
outline: 2px dashed blue;
}
outline: 2px dashed blue;: この部分では、フォーカスされた入力フィールドの周りに、幅が 2 ピクセルの破線の青いアウトラインを描画します。アウトラインは、要素のサイズに影響を与えず、主にアクセシビリティのために使用されます。input:focus { ... }: このセレクタは、入力フィールドがフォーカスされたとき（クリックされたときなど）にスタイルを適用します。
CSS の border と outline の他にも、要素の外観をカスタマイズする方法があります。
Box-Shadow
- 例:
div { box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); } - 複数の影を重ねることができます。
- 影効果を追加できます。
- テキストに影効果を追加できます。
これらのプロパティを組み合わせて、さまざまな効果を実現できます。
注意
- レスポンシブデザインを意識する
デバイスの幅や解像度に合わせて、レイアウトとデザインを調整しましょう。 - アクセシビリティを考慮する
色覚障害のあるユーザーが理解できるよう、コントラスト比やフォントサイズに注意しましょう。 - 過度の装飾は避ける
多くの装飾は、ユーザーの視覚的な疲労やサイトの読みやすさに影響を与える可能性があります。
css border outline
