こんにちは、さち です。
先日、ウェブサイトを作っているとき、「CSS」を使って1つの「要素」に複数の「線」を付けたいことがありました。
普段、「線」を付けるときは border プロパティだけ使っていましたが、調べてみると他にも方法があることが分かりました。
そこで今回は、「要素」に「線」を付けられる3種類の border outline box-shadow とその使い方についてまとめていきます。
「border」の使い方
サンプル
<div>BORDER</div>
div {
border: solid 8px orange;
border-radius: 15px;
}
書き方
/* サンプル */ border: solid 8px orange; border-radius: 15px; /* それぞれの値の意味 */ border: 線の種類 [線の幅] [線の色]; border-radius: 角の丸みの半径; /* 別々にも書ける */ border-style: solid; border-width: 8px; border-color: orange;
[] で囲んだものは記述を省略できます。
「線の幅」を省略した場合は 3px になります。また、「線の色」を省略した場合は「文字の色」の color プロパティの値と同じになります。
「outline」の使い方
サンプル
<div>OUTLINE</div> <div class="offset">+OFFSET</div>
div {
border: solid 8px orange;
border-radius: 15px;
outline: solid 8px red;
}
.offset {
outline-offset: 4px;
}
outline は border の外縁に付けられる「線」です。
記述の方法は基本的に border と同じですが、 outline-offset プロパティを使って border との余白を調整できるのが特徴です。
outline-offset はマイナスの値も指定可能で、border の上に outline を重ねることもできます。
書き方
/* サンプル */ outline: solid 8px red; outline-offset: 4px; /* それぞれの値の意味 */ outline: 線の種類 [線の幅] [線の色]; outline-offset: border外縁 からの距離; /* 別々にも書ける */ outline-style: solid; outline-width: 8px; outline-color: red;
記述の方法は基本的に border と同じです。
[] で囲んだものは記述を省略できます。
「線の幅」を省略した場合は 3px になります。また、「線の色」を省略した場合は「文字の色」の color プロパティの値と同じになります。
「box-shadow」の使い方
サンプル
<div>BOX SHADOW</div>
div {
border: solid 8px orange;
border-radius: 15px;
box-shadow: 0 0 0 8px darkviolet;
}
box-shadow はもともと「影」を付けるためのプロパティですが、「ぼかし」を掛けない＆「拡張」をすることで「線」を付けたように見せることができます。
もともとが「影」である特性上、「線」は border の外縁に付きます。
書き方
/* サンプル */ box-shadow: 0 0 0 8px darkviolet; /* それぞれの値の意味 */ box-shadow: 横方向の位置 縦方向の位置 ぼかしの強さ 拡張する量 [色];
横方向の位置 縦方向の位置 ぼかしの強さ の値を 0 にして、拡張する量 を調整することで、「線」が付いたような見た目にできます。
[] で囲んだものは記述を省略できます。
「色」の記述を省略した場合は「文字の色」の color プロパティの値と同じになります。
3種類を同時に使う
border outline box-shadow は同時に使用すると、1つの「要素」に3つの「線」を付けられます。
サンプル
<div>ミックス</div>
div {
border: solid 8px orange;
border-radius: 15px;
outline: solid 8px red;
box-shadow: 0 0 0 16px darkviolet;
}
3種類を同時に使ったとき、内側から border outline box-shadow の順になります。
outline と box-shadow はどちらも起点が border の外縁で同じです。box-shadow は outline の下に重なるため、box-shadow は outline の幅より大きくしないと隠れて見えません。
疑似要素の ::after ::before も使えば、もっと多くの「線」を付けられるかもしれませんね。
コメント