ほんっとにはじめてのHTML5とCSS3：[9-2] 画像にテキストを回り込ませよう（CSS使用）

[9-2] 画像にテキストを回り込ませよう（CSS使用）

最終更新日：2019年03月22日　（初回投稿日：2010年10月28日）

前回の [9-1] 画像を表示しよう <img>要素のCSSを編集して、本文のテキストが、画像の横に来るようにしてみましょう。
CSSの floatプロパティを使います。

CSSプロパティ	float

CSSを編集します

「float: left」と指定された要素は左に配置され、それ以降に書かれた要素はその右側に配置されます。
「float: right」ならその逆で、指定された要素は右に、それ以降の要素は左側に配置されます。

では、前回のファイルのCSSの部分に、下記のように <img>要素への指定を追加しよう。

<!DOCTYPE html>
<html lang="ja">
<head>
<!--省略-->
<style>
div {
	color: #666666;
	width: 80%;
	margin-top:20px;
	margin-right:auto;
	margin-left:auto;
	}
span {
	color:#660000;
	line-height:3em;
	}
h1 {
	color:#009900;
	font-size:30px;
	}
img {
	float:left; /*画像を左フロートにします*/
	}
</style>
</head>
<!--以下省略-->

毎回言ってますが、CSS は HTML内に書かずに「独立した外部CSSファイル」にして HTMLに読み込ませる方法のほうが便利すし、一般的です。
ここでは簡単に説明するために HTMLファイル内に書く方法でやってます。

floatプロパティの詳細は「はじめてのCSS」カテゴリーの
【21】floatプロパティと clearプロパティ。そして Clearfixについて
をご覧ください。

それではファイルを保存して、ブラウザでプレビューしてみましょう。

とにかく画像の右側にテキストが回り込みました。
でも、画像とテキストがくっついて気持ち悪いし読みにくいですよね。これを調整しましょう。

画像と回り込んだテキストの間隔を指定しよう

画像と回り込んだテキストとの間を少し離してみましょう。
下記のように、<img>要素の CSSにマージンの指定を追加します。

img {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
	}

marginプロパティを使えば、要素にマージンを指定でき、隣接する要素との間隔を作る事ができます。
上のコードで使っている「1em」とは、1文字分って意味。

それではファイルを保存して、ブラウザでプレビューしてみましょう。

画像とテキストの間隔が空いて、読みやすくなりましたね。

float指定を解除（clear）しておきましょう

一度 float を指定すると、それ以降の要素は永遠に影響を受けるので、float指定を効かせたくない要素のところで解除してあげなきゃいけません。
float指定を解除するには clearプロパティを使います。

今回は 2番目の段落から回り込まなくて良いので、2晩目の<p>に clearプロパティを使おう。

まず、2番目の <p>要素にクラス名を付けます（40行目）。ここでは「clear」という名前にしました。何でも好きな名前でいいんです。

そして CSSのほうで そのクラス名を呼出します（26行目）。
自分で付けたクラス名を呼び出すには、先頭に「.（ドット）」を付けます。

これは CSS のルールです。
自分で要素につけた ID名を呼び出すときは、先頭に「#（ハッシュ）」を付ける決まりです。
詳しくは「はじめてのCSS」カテゴリーの【3】id とか classって何？（セレクタの「種類」を知っておこう）をご覧ください。

そしてこのクラス名に対して「clear: both」と指定します（26〜28行）。
clear: both は、右も左も両方のフロート解除する指定です。

<!DOCTYPE html>
<html lang="ja">
<head>
<!--省略-->
<style>
div {
	color: #666666;
	width: 80%;
	margin-top:20px;
	margin-right:auto;
	margin-left:auto;
	}
span {
	color:#660000;
	line-height:3em;
	}
h1 {
	color:#009900;
	font-size:30px;
	}
img {
	float:left;
	margin-right:1em;
	margin-bottom:1em;
	}
.clear {
	clear:both;
	}
</style>
</head>
<body>
<div> <!--本文START-->
<h1>画像を貼ってみよう</h1>
<img src="image/forest.jpg" alt="森林イメージ" width="240" height="160">
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p class="clear">
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
<span>（島崎藤村「夜明け前」序の章より）</span>
</p>
</div> <!--本文END-->
</body>
</html>

floatプロパティや clearプロパティの詳細は「はじめてのCSS」カテゴリーの
【21】floatプロパティと clearプロパティ。そして Clearfixについて
にまとめてありますのでご覧ください。

では、ファイルを保存してブラウザで見てみましょう。
2番目の <p>要素は画像に回り込まなくなってますね。

次回予告

次回は、相対URL と絶対URL（絶対パス、相対パスとも言います）について。

<img>要素で画像ファイルを指定する時に「image/forest.jpg」ってフォルダとファイル名を「/」で区切って書きましたね。この書き方についてもっと詳しく説明します。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-03-22（Fri）│
投稿日：2010-10-28（Thu）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿

画像のすぐ下に文字がきます。

はじめまして、全くのド素人です。
こちらを拝見しながら独学してみようと頑張ってるのですがうまくいきません。

サンプルのように画像のサイドには空きを作れるのですが、
画像の下に空白行ができず、すぐに文字がきてしまいます。

どう解決したら良いのでしょうか？
それともこのまま続けていくとそうなるのでしょうか？

お返事頂ければ幸いです。

2016-09-01 13:29 :
ようこ

Re: 画像のすぐ下に文字がきます。

ようこさん
画像のマージンを下にも付けるとうまく行くと思います。
margin-bottom : 15px とか、数字は好きなものを入れてみて。

CSSは、いろんな指定を組み合わせて使うので、詳しく書くと記事がものすごく長くなってしまうため、このHTMLのセクションではCSSはかなり省略しちゃってます。

CSSを詳しく説明するセクションも書いていますので、マージンの指定など参考にしてください。
（HTMLを始めたばっかりの人には、CSSはちょっと複雑で混乱するかもだけど。がんばれ）
はじめてのCSS INDEX ↓
http://honttoni.blog74.fc2.com/blog-entry-211.html

2016-09-13 19:31 :
yuki★hata

No title

ありがとうございました。
解決できました！

2016-09-15 11:07 :
ようこ

.clear

こんにちは。
３歩進んで３歩下がる、を何年か繰り返しておりますが止めようとも思わず続けております。
さて、CSSで.clearとありますが、このピリオドはどう言う意味を持つのですか。

2018-01-16 17:46 :
ヤマダ

Re: .clear

ヤマダさん
自分でつけたクラス名をCSSで呼び出す時、「.」を先頭につけるルールがあるんです。
記事本文で説明が無かったですね。
本文をちょっと書き換えておきましたので、読んでみてください。

2018-01-24 16:57 :
yuki★hata