画像が枠からはみ出るときはCSSを見直そう。overflowでfloatを解除して枠内に収めることができるから。

2014-08-29 (3)
こんばんわ。
SeLe(@SeLe_wave)です。
CSS初心者講座&自分への備忘録です。

サイドバーに自分のプロフィールを設置したのですが、ボーダー指定をすると枠からはみ出る状態になりました。
お困りの方もいるかもしれないし、CSSに触れて間もない方に見て欲しい記事です。

参考HTML

今回は以下のHTMLでプロフィール用のボックスを作りました。
[css]
<div class="profbox">
<img src="http://select-wave.net/wp-content/uploads/2014/08/86b84f3aa166db530581ee4fbe7561a4.jpg">
<p>SeLeのブログへようこそ。技術はまだまだですが、なんとか形になっています。<a href="http://select-wave.net/introduction_me/">>>SeLeのプロフィール</a></p>
</div>
[/css]

すっごい簡単なHTMLですね。

画像が枠からはみ出る状態

2014-08-29 (1)
サイドバーにプロフィール用のボックスを設置しました。
その際に、画像も掲示したかったので一緒に貼り付けたら枠線からはみ出てなんともみっともない事態に。

その時のCSS
[css]
.profbox {
box-sizing: border-box;
width: 100%;
display: block;
margin:30px 0;
padding:10px;
border: solid 1px #000000;
}
.profbox p{
font-size: 13px;
}
.profbox img{
text-align:left;
float:left;
margin: 0 5px 0 0;
clear: both;
}
[/css]

枠内に収めるにはCSSを1行追加するだけ

2014-08-29 (2)
理想の状態はこちらです。
今現在、サイドバーに設置しているものになっています。

CSSはコチラ
[css]
.profbox {
box-sizing: border-box;
width: 100%;
display: block;
margin:30px 0;
padding:10px;
border: solid 1px #000000;
overflow: auto;
}
.profbox p{
font-size: 13px;
}
.profbox img{
text-align:left;
float:left;
margin: 0 5px 0 0;
clear: both;
}
[/css]

profboxにoverflow: autoを加えただけで、画像のはみ出しが無くなりました。

必要な物は[overflow:auto]だけ!

今回重要になるCSSはつまり、overflowとなっています。
次点でfloatとheightの設定です。
overflowに設定する値は下記の中から1つ選択します。

overflow : visible; /* コンテンツを全て表示できるように幅と高さを調整 */
overflow : hidden;  /* 表示できない部分は表示しない */
overflow : scroll;  /* スクロールバーを付けて表示できるようにする */
overflow : auto;    /* ボックスの領域を自動計算 (一般的にはスクロールで表示)*/

デフォルトのままだとoverflowの値はvisibleとなっているので、幅と高さを調整してくれるはずなのですが…
画像にはfloatが設定されていますよね?そうなるとボックスの枠に囚われないで表示してしまう設定になるので、HTMLのP要素だけをカバーしてボックスを調整してしまいます。

これをカバーするにはautoの値にします。
overflowをautoの値にすることにより、親要素のborderがカバーすることができます。
これで、全てを内包して枠線をつけることが可能になりましたね。
また、heightの指定をしないことにより、最大限まで縦軸を伸ばしてくれるので、スクロールバーが付いてしまう懸念もなくなります。

今の上のHTMLとCSSにちょこっと背景色などを入れてあげると自分だけのオリジナルボックスができるので、試してくださいね!

いかがでしょうか。これで自分はCSSのややこしい点が1つ解決しました。また、サイトをいじり倒したいと思います。
以上。SeLe(@SeLe_wave)でした!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする