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

最終更新日:2017年09月15日  (初回投稿日: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プロパティって結構クセがあるので、初心者の方があまりお手軽に使うものじゃないかもです。が、画像の横にテキストを回り込ませるのが floatプロパティの本来の使い方(誕生の由来?)なので、今回使ってみました。
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のほうで そのクラス名を呼出し「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」って フォルダ と ファイル名を「/」で区切って書きましたね。この書き方についてもっと詳しく説明します。

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

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

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

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

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

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

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

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

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

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

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


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

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

No title

ありがとうございました。
解決できました!
スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.