クルーデザイン

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 ボタンの基本装飾

最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …

CSS テキストボックスのフォーカス時の青枠を無効にする

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …

CSS 設定値の初期化(サンプル付き)

CSSフレームワークやプラグインのCSSをどんどん追加していくと、通常のタグに影響が出てしまう場合があります。 元のCSSを改修すれば良いのですが、影響が大きい場合や時間が無い場合があるかと思います。 …


comment

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