【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

30Jan2012

画像のとなりにテキストを表示する方法[CSS初級編]

画像のとなりにテキストを並べる、よく見かける王道のページデザイン。
いわゆる「段組レイアウト」です。

「tableレイアウトで作っていたけど今後はCSSで作りたい。どうやるの?」
という質問がありましたので、こちらで手順を紹介します。

1. まずはtableで作る

バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑


コードはこちら。 (要点以外を簡略化しています)

<table>
    <tr>
    	<td><img src="http://tanaka-yusuke.com/dog.jpg" /></td>
        <td>バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑</td>
    </tr>
</table>

2. CSSで作る

2.1. 同じデザインをCSSで作る

  
  

バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑

HTMLとCSSはこちら。 (要点以外を簡略化しています)

<div>
  <img id="a" src="http://tanaka-yusuke.com/wp-content/uploads/2012/01/IMAG0405.jpg" />
  <p>バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑</p>
</div>
#a {
	float:left;
}

2.2. float:leftってなに?

floatプロパティは、指定した要素を左右どちらかに寄せてテキストなどを回り込ませます。

選択できる値は
・left
・right
・none
があります。

例ではimgに対してfloat:left;を指定しています。

2.3. float使用の注意点

floatを指定した箇所の後に続く要素はスペースがある限り回り込んでしまいます。

  

1. バナナとこまめ

バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑

  

2. こまめの好物

フルーツはなんでも好きですが、バナナが飛び抜けて好きみたいです。

そこで必要に応じて回り込みを解除するclearプロパティを使います。

2.4. clearの使い方

  

1. バナナとこまめ

  
  

バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑

  

2. こまめの好物

  

フルーツはなんでも好きですが、バナナが飛び抜けて好きみたいです。

ソースは以下になります。

<div>
  <h2>バナナとこまめ</h2>
  <img id="a" src="http://tanaka-yusuke.com/wp-content/uploads/2012/01/IMAG0405.jpg" />
  <p>バナナが好きすぎて満面の笑みを披露してしまう愛犬こまめ。普段は基本的に「ムスッ」として暮らしています 笑</p>
</div>
<div id="b">
  <h2>こまめの好物</h2>
  <p>フルーツはなんでも好きですが、バナナが飛び抜けて好きみたいです。</p>
</div>
#a {
	float:left;
}
#b {
	clear:both;
}

二段目のdiv要素(6行目)に対してCSSでclear:both;を指定して、回り込みを解除しています。

clearプロパティで使用できる値にはleft,right,bothがありますが、特殊で高度なコーディングをしない限りbothを使えば確実です。

関連記事