【HTML/CSS】divに指定したwidthが反映されないときの対処方法|ホームページ更新代行サービスブログ

こんにちは。松本です。

最近ずっと、雨が降っていないですね。オフィスのサンちゃんやモンちゃんはそんなに水分を必要としないので問題ないのですが、このまま雨が降らないのも冬の植物にはよくないのではと心配です。っていうのは建前で、明日土曜日は大事な予定が屋外があるのに、雨かもしれないっていう、降るなら平日にお願いします!

ということで、今回は先日に引き続き、Web制作のなかで気づいた小ネタ紹介です。

divにテキストを入れて、そこに、CSSでスタイルを入れていっていた時です。

こんな感じのスタイルをh2につけていました。

div-width01

#n1 h2 {
	color:#FFFFFF;
	background: #FFCF05;
	width: 400px;
	text-align:center;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-boder-radius: 10px;
	margin:0 auto;
	padding:20px 5px;
}

そして、デザイン見てみると、

div-width02

なんじゃこりゃー!

松本『岡部さん。ちゃんとdivの幅と合わせているのにこんな風になってしまうんですけど。。。』

岡部『こうしてみなさい。』

div-width03

しっかり、おさまったーーーー!!

そうです。divのwidthと同様の指定をしてしまうとはみ出してしまうのです。その場合は、divのwidthより-10pxしてあげると、ピタッとします。知らなかったです。また、ひとつ制作に役立つことをおぼえました。

あぁ明日、雨降らないでほしいな、と思いながら、今週中にはサイト仕上げなきゃ!!

説明が足らん!!

なぜ-10pxするとうまくいったのか?

paddingで左右の余白を5px+5px=10px取ってあるので、その分widthを狭くした、というわけです。

感覚的に、paddingはwidthの範囲内で考えがちだけど、実際はpaddingの値を加味してwidthを指定しなきゃダメよ、っていうお話。

幅や高さの指定は、paddingの他、margin、borderの幅、なんかも影響してくるので、思い通りにレイアウトできないときは、この辺りを見直すと良い感じに解決できるはずです。

オカベ

ホームページ更新代行サービス

スマートスタイル・コンプレックス㈱では、企業や店舗・個人事業主のお客様に代わって、Webサイトの更新・管理・運用を代行する「ホームページ更新代行サービス」をご提供しています。

ホームページ更新代行サービス

最先端のテクニックと幅広い対応力、費用は月額定額、繰り越しもできる安心のポイント制で、これまで多数のお客様にご満足いただいております。

・ホームページの更新を効率化したい
・Web業者とのやり取りをスムーズにしたい
・更新しながらWebサイトを充実させたい(更新が止まっているホームページを生き返らせたい)

などなど、ホームページに関わるお客様のお悩みを解決します!

ホームページ更新代行サービスはこちら。

The following two tabs change content below.
松本

松本

埼玉県在住。アパレル会社での企画営業経て、2013年にスマートスタイル・コンプレックス株式会社へ入社。好きなことは歌うこと♪声の大きさは、社内No.1!最近はまっているのは登山。山ガールよ、集まれー。