ホームページテンプレートの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;」で回り込みを解除しないと、デザインが崩れてしまいます。