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

最終更新日:2018年01月24日  (初回投稿日:2010年10月28日)

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

CSSプロパティ float

CSSを編集します

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

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

<!DOCTYPE html>
<html>
<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>
<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」って フォルダ と ファイル名を「/」で区切って書きましたね。この書き方についてもっと詳しく説明します。

関連記事
この記事をはてなブックマークに追加

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

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

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

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

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

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

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

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

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

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


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

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

No title

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

.clear

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

Re: .clear

ヤマダさん
自分でつけたクラス名をCSSで呼び出す時、「.」を先頭につけるルールがあるんです。
記事本文で説明が無かったですね。
本文をちょっと書き換えておきましたので、読んでみてください。
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.