Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

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

 どうも!LSSです!!

 

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

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

 

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

 

ちなみに手元の本には、「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に変えてみました。

 

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

 

てすと

 

てすと

 

てすと

 

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

 

 

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

てすと

 

コード

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

 

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

 

 

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

まずはborderから。

 

てすと
てすと
てすと

 

次にoutline。

 

てすと
てすと
てすと

 

…おや?w

 

最後に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>…おや?w</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」の2種類あり、デフォルトは「content-box」の方。

 

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

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

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

 

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

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

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

 

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

 

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

てすと
てすと

 

コード

<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という独自の余白プロパティがある」
といった違いもあります。

 

 

 

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

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