クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

投稿日:2017年12月22日 更新日:

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。

レイアウト崩れが起こる原因

これは、枠線はブロック要素の外側に引かれるためです。
例えば、横幅「100px」の「div」の外枠に「1px」の枠線を引いた場合、「100px」の「div」の外枠に左右に「1px」ずつの枠線が引かれることになります。

つまり「1px」の枠線を引くと「102px」のブロック要素ができあがることになります。これがレイアウト崩れの原因です。

解決方法

解決方法は簡単です。
ブロック要素の外枠では無く、内枠に枠線が引かれるようにすればOKです。
これはCSSの「box-sizing」という属性に「border-box」という値をセットするだけで実現可能です。

HTML側

CSS側

ポイントは4行目の「box-sizing:border-box;」です。
これを追加しておくと、内枠に線を引くのでブロック要素の大きさが変わらなくなりレイアウトが崩れなくなります。

サンプルも作ったので見ていってください。

-CSS

執筆者:

関連記事

CSS Google Fonts 日本語(試験的)

Google Fonts + 日本語 早期アクセス というサイトが出来ていますね! Google Fonts の日本語(試験的)のようです。 まだ試験中なので、本番の Google Fontsサイト  …

CSS 丸、正円の中に数字・文字を書く!(サンプル付き)

良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後 …

CSS liタグ の不要な行頭マークを削除する(サンプル付き)

liタグはよく利用しますがデザインによっては行頭のマーク「・」が邪魔になることがあります。 このマークはCSSで簡単に削除することができます。

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …


comment

メールアドレスが公開されることはありません。