ga-05-n5

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
レスポンシブ対応
floatを使った テキストの回り込み

floatを使ったテキストの回り込みのサンプルです。画像は左端によって浮いた状態となっています。テキストが右に回り込んでいます。画像が切れるとテキストが画面一杯に広がります。

画像

下段に表示される1個の写真を同一フォルダーに保存してください。

  a1.画像1(fujisan_shikaku.png)

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
  floatを使ったテキストの回り込み
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
        <meta name="viewport" 
          content="width=device-width,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<div class="box">
    <p>
          <img src="fujisan_shikaku.png" 
               class="gazou" alt="イラスト">
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
          これは冠雪した富士山のイラストです。
     </p>
<div class="clear"></div>
</div>
</body>
</html>
    
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
   floatを使ったテキストの回り込み
--====================================*/
.box{max-width:600px;
     border:solid 1px gray;
     margin:0 auto;
     font-weight: bold;
     padding: 0px 10px;
}
.gazou{width:200;
       height:200; 
       padding: 0px 20px;
       float:left;
}
.clear{
  clear: both;
}
    
ワンポイント

★float:left;
画像が左によって浮いている状態
次のブロックは、画像の右に回り込み画像が切れたところで画面一杯に広がる
★clear: both;
それまでに指定された左右両方の回り込みを解除する。FLOATを使ったときは必ず入れること。これが無いとレイアウトが崩れる。

 back
pagetop
 next

flexboxを使った
ボックスの折り返し

floatを使った
テキストの回り込み

画像の縮小

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken