CSS

CSS – borderの線を内側、外側にする方法

border線を内側、外側に設定したい場合のプロパティを使用します。

border線を内側に設定していない場合だとborder線を使うたびに要素の外側にさらに要素を作るので形が崩れたりする場合もあります。そのようなリスクを減らすには全省セレクタを使ってborder線をすべて内側に設定するのがいいかと思います。

*{
	box-sizing:border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
}

ゼロベースから作成するのであればリセットCSS時に全称セレクタ*を使いbox-sizing:border-box;で内側に設定すればいいですが、修正の場合だと一気に崩れる可能性があるので気を付けてください。

border線を内側にする

border線を内側に設置したい場合は対象のセレクタにbox-sizing:border-box;を使用するだけです。

.sample_box{
	box-sizing:border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
}

または、border線をすべてデフォルトで内側に設定したい場合下記のように記述することですべてのborder線が内側に埋め込まれます。

*{
	box-sizing:border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
}

注意点としては、すべてのborder線が内側に埋め込まれてしまうので、すでにあるレイアウトが崩れてしまう可能性があるのでお気をつけください。

border線を外側にする

この場合は、基本的にはデフォルトで外側に要素が追加される仕組みになっているので特に記述する必要はありません。

ただ、上で説明したデフォルト設定でborder線を内側にしてた場合など一部分だけborder線を外側にしたいというときは、その要素にbox-sizing:content-box;を記述すれば外側に追加されます。

.sample_box{
	box-sizing:content-box;
}

上のように記述するだけで、.sample_boxの要素だけborder線が外側に追加されるようになります。

以上がborder線を内側、外側に設置する方法でした。

参考文献