2017-04-08

box-sizingを使わずにborderを要素の幅に含める

はじめに

CSSでウェブサイトの装飾をしていると、どこかしらでborderプロパティを使用すると思います。そのborderプロパティは、デフォルトではborderを付与する要素とは別でピクセル数が計算されるため、例えば、幅1000pxの中に500pxの2つの要素を並べた時、そこに1pxのborderを付与すると、501px+501pxで合計の値が1000pxを超えてしまうため、要素が画面外に行ったり、横並びにならず縦に並んでしまうなどの問題があります。

これを解消するのがbox-sizingプロパティです。box-sizingプロパティでborder-boxを指定することで、paddingとborderの値が要素の幅に含まれるようになります。つまり、幅500pxの要素にbox-sizingでborder-box指定して1pxのborderを指定すると、499px+1pxで500pxとして計算されるようになるわけです。

というように、要素の幅とborderそれぞれの幅を気にすることなくコーディングしたい場合は上記のbox-sizingプロパティを使用すれば良いのですが、万が一、もしかしたら、宗教上の理由などでbox-sizingを使用できない場合があるかもしれません。今回はそんな時に使える代替案をご紹介します。

box-shadowでborderを作る

まず、borderで要素を線で囲ったときに、要素が並んでいる場所の幅が要素の分だけで埋まっていた場合には、borderが付与されることで収まりきらなくなり、以下のように改行されてしまいます。

幅いっぱいの要素にborderを指定した場合

これを回避しつつ線で要素を囲うためには、box-shadowプロパティを使用して、影で擬似的に線を作り出します。内容は非常に簡単、「box-shadow: 0px 0px 0px 1px inset;」とするだけで、以下のように要素の幅が画面幅いっぱいになっていたとしても、改行などされずに線を作り出すことができます。

box-shadowで擬似的にborderを表現した場合

box-shadowについて簡単に説明すると、1つめと2つめの数値がそれぞれ水平、垂直方向へどれだけ移動するか決める値です。マイナスの値も可能で、入れた値に応じて縦横方向に影が移動します。3つめの値がぼかしの大きさを決めます。この数値が大きいほど、影のぼかしが大きくなります。4つめの値は、影の大きさ指定します。値が大きいほど影も大きくなります。そして、今回大切なのがinsetです。これを指定することで、デフォルトでは要素の外側に付与される影が、内側に向けて付与されるようになります。

上記に当てはめると、今回の場合は、影の大きさと内側方向への影の指定しかしていませんので、結果的に1pxのくっきりとした影が要素の端から内側に向けて付与された結果、borderとは違って幅を取ることもない擬似的な枠線を作り出すことができた、と言ったところです。また、以下のように色の指定も可能で、ぼかしなどもちょっと入れてみたりして、borderとは違ったアレンジをすることも可能です。

box-shadowで擬似的に作ったborderをアレンジ

さいごに

要素の幅に干渉せずに線を付与するだけなら、よっぽどの理由がなければ基本的にbox-sizingを使用するのがベターだと思いますが、ぼかしなどのスタイルをCSSを使用して盛り込みたいときは、box-shadowを使用してみるものいかがでしょうか。borderとはまた違った表現ができるので、これはこれで使えるかもしれません。



コメントする(※は必須項目です)













画像認証