HTMLとCSSを使って、画像に文字を回り込ませる方法です。

HTMLで、画像に文字を回り込ませる方法

HTML上で、文字を画像に回り込むように配置するには、CSSプロパティ「float」を利用します。

1. 文字テキストの中に、img タグで画像を配置する
2. imgタグにCSSプロパティ「float: left」を指定する
3. 画像と文字の間に適切な間隔（マージン）を設定する。

1文字の中に、imgタグで画像を配置する

文字の近くに画像を配置します。文字の先頭が好ましいでしょう。

<img src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" width="100" height="100">HTMLで、画像を文字を回り込ませる方法はそれほど難しくありません。うまくCSSをを利用すれば、すぐに実現できます。はじめはよくわからないかもしれませんが、とりえあずやってみましょう！

またテキストはうまく回り込んでいませんね。IMGタグは「インライン（inline）」という種類のタグですので、テキストのライン、つまり、その行に沿う用に配置されてしまうのです。今回、これに回り込まわせます。はじめはよくわからないかもしれませんが、とりえあずやってみましょう！

2imgタグにCSSプロパティ「float: left」を指定する

imgタグにCSSプロパティ「float」を設定します。float は、「浮き上がる」という意味のCSSプロパティですが、詳しい説明は後で行いますので、とりあえずやってみましょう。

「float:left」を設定して、左寄せにしてみます。タグ内のstyle属性を使って、「style=”float:left”」と記載します。間違わないように気をつけてくださいね。

<img src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" style="float:left" width="100" height="100">HTMLで、画像を文字を回り込ませる方法はそれほど難しくありません。うまくCSSをを利用すれば、すぐに実現できます。はじめはよくわからないかもしれませんが、とりえあずやってみましょう！

すでに左寄せが実現できました。すこし画像とテキストとくっつきすぎているようで、見た目が不自然ですね、文字と画像の間隔を調整していきます。

3画像と文字の間に適切な間隔（マージン）を設定する

文字と画像の間隔を設定するため、CSSプロパティの margin を利用します。marginは、文字通り、要素同士の間隔を調整するためのプロパティです。

margin プロパティをstyle属性に追記します。CSSプロパティ同士は「;」で区切ることになっていますので、忘れないで下さいね。

<img src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" width="100" height="100" style="float:left;margin-right:10px;margin-bottom:10px">HTMLで、画像を文字を回り込ませる方法はそれほど難しくありません。うまくCSSをを利用すれば、すぐに実現できます。はじめはよくわからないかもしれませんが、とりえあずやってみましょう！

以上で、回り込みが実現できましたね。

「編集してみる」ボタンから、「float: right 」と設定すれば、右寄せ、左寄せを切り替えられます。試して見て下さいね。

【参考】<style>タグを利用する

さて、ここからはすこしレベルアップのためのセクションです。

HTMLでは、レイアウトの調整は、タグ内に書き込まず、CSSファイルや、styleタグを使うのが一般的です。

現在、IMGタグ内のwidth属性、height属性で画像の大きさを設定していますが、これをCSSで管理したほうがおすすめです。（ちなみに、HTMLの上級者は表示のパフォーマンス改善の理由でこの属性を使うことがあります）

width/height属性を削除して、style属性に移します。CSSでは。大きさを指定する時は必ず「単位」が必要です。「ｐｘ（ピクセル）」という単位使って、「width: 100px; height: 100px」とstyle属性に追記に追加します。

<img src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" style="float:left;margin-right:10px;margin-bottom:10px; width:100px; height:100px">HTMLで、画像を文字を回り込ませる方法はそれほど難しくありません。うまくCSSをを利用すれば、すぐに実現できます。はじめはよくわからないかもしれませんが、とりえあずやってみましょう！

なんだか長くなって読みにくくなってきましたね。ここでHTMLのstyleタグを利用します。

画像タグにクラス属性を追記して、なにかアルファベットで名前を付けます。今回「target 」というクラス名を付けました。その下に（上でも構いません）<style></style>というタグで囲んで、下記のように記述します。画像タグのstyle属性は全て削除して、styleタグ内に同じ記述を行います。

<img class="target" src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" >HTMLで、画像を文字を回り込ませる方法はそれほど難しくありません。うまくCSSをを利用すれば、すぐに実現できます。はじめはよくわからないかもしれませんが、とりえあずやってみましょう！

<style>
.target{ 
  float:left;
  margin-right:10px;
  margin-bottom:10px;
  width:100px;
  height:100px;
}
</style>

できましたね。あとは、自由に回り込みと間隔を調整できますよ。

<section class="practice-float">
  <p>
    <img class="floated" src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" >HTMLで、画像を文字を回り込ませる方法はそれほど難しくありません。うまくCSSをを利用すれば、すぐに実現できます。はじめはよくわからないかもしれませんが、とりえあずやってみましょう！
  </p>
  <p>
    <img class="floated fleft" src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" >このように、クラス名を使えば、一回のスタイルの記述を他の要素にも適応することができます。
  </p>
  <p>
    <img class="floated fnone" src="https://www-creators.com/wp-content/uploads/2018/02/dolphin-framed.png" >同じスタイルを何度も書くのは大変です。必ずクラスを利用してレイアウトを調整しましょう！
  </p>
</section>

<style>
.practice-float{
  font-size: 11px;
}
.practice-float p{
  background-color:#eef;
  overflow:hidden;
  margin:10px 0;
  padding:5px
}
.practice-float .floated{ 
 float:left;
 margin-right:10px;
 margin-bottom:10px;
 width:60px;
 height:60px;
}
.practice-float .floated.right{
  float:right;
}
</style>

 

以上です。うまく回り込み、できたでしょうか？

参考

今回利用した、CSSプロパティに関する、詳細な仕様です。

• CSSプロパティ: float
• CSSプロパティ: width
• CSSプロパティ: height