ホームページテンプレートのdecoweb > 編集方法 > 画像の回り込みをしたい

画像の回り込みをしたい

画像を配置してその後テキストを書くと、画像の脇にテキストを書きたいのに、画像の横には文章は一行しか表示されません。
※当サイトでの方法は多数あるやり方の中の一つとお考え下さい。

  • HTML例

    <img src="images/picture1.jpg" alt="イメージ画像">このように画像の脇にテキストが回り込まず、画像の下にテキストが配置されてしまいます。
画像の回り込みをしたい方法イメージ図 このように画像の脇にテキストが回り込まず、
画像の下にテキストが配置されてしまいます。

このようにimgの後にテキストを書くと画像の横に一行しか表示されません。


  • align属性で簡単に作成することもできますが、align属性が廃止予定の非推奨属性のため、できるだけCSSで作成するようにしましょう。

    <img src="images/picture1.jpg" alt="イメージ画像" align="left">このように画像の脇にテキストが回り込まず、画像の下にテキストが配置されてしまいます。

CSSで設定、管理できる画像の回り込み方法を教えます！

 

Step1

HTMLとCSSに画像の回り込みを設定します。


【画像左寄せの回り込み】

  • HTMLのimg属性にクラス名を追加、テキストは<p>タグで囲みます。最後に回り込みを解除します。（class名はご自分でわかりやすい名前にしてもOKです）

    <img src="images/picture1.jpg" alt="イメージ画像" class="img_left">
    <p>このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。</p>
    <div class="clear"></div>

  • CSSに追加します。（class名はご自分でわかりやすい名前にしてもOKです）
    
img.img_left{
	float: left;
	padding: 5px;
}

div.clear{
	clear: both;
	margin: 0 0 10px 0;
}
画像の回り込みをしたい方法イメージ図

このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。このように画像の右脇にテキストが回り込みます。

CSSに「float: left;」を入れることで左に回り込ませる事ができます。
「clear: both;」で回り込みを解除しないと、デザインが崩れてしまいます。

 

【画像右寄せの回り込み】

  • HTMLのimg属性にクラス名を追加、テキストは<p>タグで囲みます。最後に回り込みを解除します。（class名はご自分でわかりやすい名前にしてもOKです）

    <img src="images/picture1.jpg" alt="イメージ画像" class="img_left">
    <p>このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。</p>
    <div class="clear"></div>

  • CSSに追加します。（class名はご自分でわかりやすい名前にしてもOKです）
    
img.img_right{
float: right;
padding: 5px;
}

div.clear{
clear: both;
margin: 0 0 10px 0;
}
画像の回り込みをしたい方法イメージ図

このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。このように画像の左脇にテキストが回り込みます。

CSSに「float: right;」を入れることで右に回り込ませる事ができます。
「clear: both;」で回り込みを解除しないと、デザインが崩れてしまいます。

 

page top ↑