低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

画像の下に文字を回り込ませないテクニック

floatで画像などを左右に回り込ませたとき、逐一marginの幅を指定せずとも文字が画像の下に回り込まないようにするテクニックです。

HTML

1<div class="sample01">
2<div class="sampleImg"><img src="./sample.jpg" alt="サンプル画像" /></div>
3<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 
4</div>

CSS

01.sample01 {
02    width: 400px;
03    border: 1px solid #CCCCCC;
04    padding: 10px;
05    margin-bottom: 30px;
06    overflow: hidden;
07    zoom: 1;
08}
09.sample01 p {
10    overflow: hidden;
11    zoom: 1;
12}
13.sampleImg {
14    float: left;
15    margin: 0 10px 5px 0;
16}

テキストを囲っている要素(この場合はpタグ)にoverflow: hidden;を指定することで画像の下に回り込むことを防ぐことができます。

サンプルページ

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ