CSSのテキスト回り込みを考えてみる
ブログのエントリーなど画像を使う箇所でよく使う回り込み指定。
毎回数値を適当に変更して見た目を確認しながら調整していますがロジカルに考えてみました。
今回やりたいことは、レイアウトにfloatを利用して画像を左に配置しテキストは回りこませない指定です。
ベースのhtml
画像一枚を準備して回りこみだけ指定してみます。
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="entry">
<img src="http://cheka.jp/photo/IMG_0017.jpg">
<h1>タイトル</h1>
<p>本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。本文です。</p>
</div>
</body>
</html>
/*
Entry
*/
div.entry{
background-color:#cccccc;
*zoom:1;
}
div.entry:after{
content:"";
clear:both;
display:block;
}
/*
img
*/
div.entry img{
float:left;
margin:0 10px 10px 0;
width:150px;
vertical-align:bottom;
}
/*
p
*/
div.entry p{
font-size:16px;
margin:0;
line-height:1.6;
}
こんな感じです。
テキストを回り込ませない
目的のスタイルにしてみます。
画像とテキストの間に10px開けたまま回りこませない指定をやってみます。
・・省略
div.entry p{
font-size:16px;
margin:0 0 0 160px;
line-height:1.6;
}
画像の幅が150pxなので、本文をマークアップしているpタグの左に160pxのマージンを指定します。
結果、160px – 150px = 10pxのマージンが画像の間に入ります。
こんな感じです。
リキッドレイアウトを意識しする
%指定でも同じことが可能です。
試してみましょう。
・・省略
/*
img
*/
div.entry img{
float:left;
margin:0 10px 10px 0;
width:20%;
vertical-align:bottom;
}
/*
p
*/
div.entry p{
font-size:16px;
margin:0 0 0 25%;
line-height:1.6;
}
25% – 20% = 5%のマージンが画像と本文の間に入ります。
こんな感じです。
このページを読んだ人にオススメのブログ記事です！
About The Author
