【CSS】borderによく似た、outlineというCSSプロパティを試してみます【実験】

　どうも！LSSです！！

以前からちょっと気になっていたCSSプロパティ「outline」を試してみます。

これまでもよく使ってきた「border」とよく似ていますが、ちょっと違う？らしく、本の説明を見てもイマイチよく分からないものでｗ

そういう時は、試してみるに限りますね^^

ちなみに手元の本には、「borderは線の太さの分、要素が大きくなり、レイアウトに影響」「outlineは線を引いても要素の大きさは変わらず、レイアウトも変わらない」てな事が書かれています。

まずはテスト用のボックスを用意します

てすと

コード

<div style="width: 200px; height: 50px; border: 1px solid black;">てすと</div>

<div>を一つ用意します。

で、

width: 200px;　横幅は200ピクセルで、
height: 50px;　高さは50ピクセルとし、
border: 1px solid black;　幅1ピクセルの一本線、色は黒のborderで囲みます。

この<div>に対して色々効果を与えてみます。

borderを装飾用にしてみます

てすと

コード

<div style="width: 200px; height: 50px; border: 10px outset pink;">てすと</div>

borderの太さを10ピクセルに、線の種類を outset に変えて、色もピンクにしてみました。

borderをoutlineに変えてみます

てすと

コード

<div style="width: 200px; height: 50px; outline: 10px outset lightblue;">てすと</div>

「border」をそのまま「outline」に書き換え、あと分かりやすいように色をlightblueに変えてみました。

ここまでの３つを、比較のために並べてみると…
（※一応、３つそれぞれに間に一行ずつ空行を挟んでいます）

てすと

てすと

てすと

こんな感じになります。
「ちょっと表示位置がずれてるかな？」ぐらいで、まだあまり違いが分からないですね。

borderとoutlineを同時に適用してみます

てすと

コード

<div style="width: 200px; height: 50px; border: 10px outset pink; outline: 10px outset lightblue;">てすと</div>

実に分かりやすい結果になりましたね^^ 

空行を開けずに３つ続けて置いてみると…

まずはborderから。

てすと

てすと

てすと

次にoutline。

てすと

てすと

てすと

…おや？ｗ

最後にborder＋outline。

てすと

てすと

てすと

コード

<p>まずはborderから。</p>
<p> </p>
<div style="width: 200px; height: 50px; border: 10px outset pink;">てすと</div>
<div style="width: 200px; height: 50px; border: 10px outset pink;">てすと</div>
<div style="width: 200px; height: 50px; border: 10px outset pink;">てすと</div>
<p> </p>
<p>次にoutline。</p>
<p> </p>
<div style="width: 200px; height: 50px; outline: 10px outset lightblue;">てすと</div>
<div style="width: 200px; height: 50px; outline: 10px outset lightblue;">てすと</div>
<div style="width: 200px; height: 50px; outline: 10px outset lightblue;">てすと</div>
<p> </p>
<p>…おや？ｗ</p>
<p> </p>
<p>最後にborder＋outline。</p>
<p> </p>
<div style="width: 200px; height: 50px; border: 10px outset pink; outline: 10px outset lightblue;">てすと</div>
<div style="width: 200px; height: 50px; border: 10px outset pink; outline: 10px outset lightblue;">てすと</div>
<div style="width: 200px; height: 50px; border: 10px outset pink; outline: 10px outset lightblue;">てすと</div>

なるほどね

連続的に並べてみて、ようやくoutlineの特性が見えてきました^^

その名の通り「外側の線」であって、「表示されているけど実体を持たない線」で、上下左右隣の要素を押し動かさない＝平気で被り表示される、という事のようです。

というところから、普段使うのは従来通り border の方が使い勝手良さそうですね。

ただし、borderはborderで

box-sizing というプロパティの影響を受けるようです。

box-sizingというプロパティの値は「border-box」「content-box」の２種類あり、デフォルトは「content-box」の方。

なお、LSSのブログで使用しているテーマはどうやら「box-sizing:border-box;」を採用しているようでした。
この記事に限り、 

<style><!--
div{box-sizing:content-box;}
--></style>

として強引に標準設定に戻しています。

box-sizingプロパティがどういうものかというと…。

例えば今回「幅200ピクセル、高さ50ピクセル」と指定したのですが、その指定したサイズが
「要素の中身（今回は てすと という文字の部分）」
だけのサイズになるのが content-box

「要素の中身＋内側の余白（padding）＋borderの太さ」
コミコミのサイズとするのが border-box

…うん、ややこしいですねｗ

ちなみに、このぐらいの違いが出てきます。

てすと

てすと

コード

<div style="width: 200px; height: 50px; border: 10px outset pink; box-sizing: content-box;">てすと</div>
<div style="width: 200px; height: 50px; border: 10px outset pink; box-sizing: border-box;">てすと</div>

あとがき

borderとoutlineの違い。

書式も効果も似たようなCSSプロパティですが、大きな違いを掴めたような気がします^^

ほとんどの場合において、borderの方が使いやすそうな気がしましたが、outlineはoutlineで使いどころがあるんでしょうね。
（中身の位置を厳格に定めておいて、あいまいな装飾にしたい時とか？あと今思いつきましたが、枠の太さをアニメーション変化させるのにはoutlineのほうがいいのかも。）

あと、今回は触れませんでしたが、
「borderには上下左右別々の指定が可能、outlineにはそれがない」
とか、
「outlineにはoutline-offsetという独自の余白プロパティがある」
といった違いもあります。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^