画像や要素に枠線を付ける方法
画像やブロックに枠線を付けるには、borderプロパティを利用しましょう。
サンプルコード
5pxで赤色の枠線を付ける例です。
div {
border: 5px solid red ;
}デモ
枠線を付けた例です。borderプロパティには、幅(5px)、スタイル(solid)、色(purple)の3つを順不同で指定します。
全方向
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid purple ;
}
</style>
</head>
<body>
<div>枠線が付きます。</div>
</body>
</html>特定の方向
特定の方向にだけ枠線を付けるには、borderではなく、border-top(上)、border-right(右)、border-bottom(下)、border-left(左)を利用します。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div {
border-left: 5px solid purple ;
}
</style>
</head>
<body>
<div>左枠にだけ枠線が付きます。</div>
</body>
</html>関連記事
- br要素みたいに要素する方法
- CSSでbr要素と同じように改行させるには、\Aとwhite-spaceプロパティを利用します。
- テキストに影を付ける方法
- テキストに影を付けるには、text-shadowを利用します。
- テーブルの枠線の隙間をなくす方法
border-collapse: collapseを指定すれば、テーブルのセル間の枠線をなくせます。- 計算式で値を指定する方法
- %(パーセンテージ)とpx(ピクセル)を混ぜた計算式で、幅などの値を指定します。
- 三角形を作る方法
- CSSで三角形を作るには、横幅、高さが0の要素に幅の厚い枠線を付けます。