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

前回の、画像を貼り込んだHTMLファイルのCSSを編集して、
本文のテキストが、画像の横に来るようにしてみましょう。

CSSプロパティ float

CSSを編集します

前回のHTMLファイルを開いて、
<head>部分に書かれたCSSに、「 img {float:left;} 」を加えましょう。

「float」は、CSSでとてもよく使うプロパティです。
float:leftを指定された要素は左に配置され、HTMLでそれ以降に書かれた要素は、その右側に配置されます。
float:rightならその逆で、指定された要素は右に、それ以降の要素は左に配置されます。

では、前回保存したファイルのCSSの部分に、
下記のようにimg要素に対する指定を追加しましょう。

<!DOCTYPE html>
<html>
<head>
<!--省略-->
<style>
div {
color: #666666;
width: 500px;
margin-top:20px;
margin-right:auto;
margin-left:auto;
}
span {
color:#009900;
}
h1 {
color:#006600;
font-size:30px;
}
img {
float:left;
}
</style>
</head>
<!--以下省略-->

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

画像の右にテキストを回り込ませた

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

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

同じくCSSを使って、画像と回り込んだテキストとの間を少し離してみましょう。
下記のように、img要素のCSSに右側のマージンを20ピクセル指定します。

  img {
  float:left;
  margin-right:20px;
  }

このように「margin」プロパティを使えば、要素にマージンを指定でき、
隣接する要素との間隔を作る事ができます。

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

回り込ませたテキストと画像の間隔を少し空けてみた

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

float指定を解除(clear)しておきましょう

float指定を解除するには「clear」を使います。
floatを指定すると、「float指定はココまで!」とブラウザに指令をしてあげない限り、
それ以降の要素は永遠にfloatが効いた状態になります。
なので、float指定を効かせたくない要素に「clear:left」や「clear:right」を指定して解除してあげなきゃいけません。
「clear:both」は、右も左も、とにかくfloatをクリアにしますので便利。これ1本を覚えておけばいいでしょう。

ここでは、2番目の段落(<p>)から、写真の右側に回り込まなくて良いので、
この<p>に「clear:both」を指定して、floatを解除しておきます。

<p style="clear:both;">
東ざかいの桜沢から、西の十曲峠まで、<span>木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在</span>していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。
</p>

正直「float」はCSSの中で、最もレイアウトに影響を及ぼすプロパティだと思います。
レイアウトが崩れた場合、まず一番にこの「float」指定の影響を疑ってみましょう
たいがい「clear」をミスで消してしまってた…などが原因だったりします。
「float」を使うたびに、効果が必要ないところで「clear」しておきましょう。

CSSの「clear(float解除)」については 「CSSレイアウトメモ:本文2段組み[7]フッターを作る」に詳しく説明がありますのでご覧ください。
(上のサンプルでは便宜上<p>要素に直接CSSを指定していますが、本来は、別に「class」名を作って clear:both を指定しておき、<p>要素に呼び出す方法のほうがスッキリして便利です)

次回は、相対URLと絶対URLの説明をします。
HTMLに配置するものは、画像ファイルだけでなく、javaScriptやムービーなど、さまざまな外部ファイルがあります。
それらが「どこに格納されているか」を示すのがURL。ファイルの住所みたいなものです。
これを正しくHTMLに書いてあげないと、ブラウザはファイルを探しだせず、表示しません。
だからURLについて理解するのはとっても大切なんですよ。

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

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

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

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

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、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
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

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

メールフォームはこちら

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