画像に対する文字の回りこみ

HTML

1. サイトをbracktsで開き、htmlファイルを新規作成しtextフォルダーに「zoo3.html」として保存します。
2. bodyタグ内に「素材ー画像に対する文字の回りこみ」のHTMLをコピペします。
3. 上書き保存します。

CSSとHTML

brackts編集画面を左右に分割し、左側に「zoo3.html」を配置します。右側に新規ファイルを作成し「style」フォルダーに「zoo3.css」として保存します。

1. 「zoo3.html」でhead要素内に「zoo3.css」を呼び込むlinkを設定します。
   <link rel="stylesheet" href="../style/zoo3.css" type="text/css">
2. 「zoo3.html」でライオン画像にクラス「left」を設定します。
   <img class="left" src="../images/lion.jpg" alt="ライオンの昼寝">
3. 「zoo3.css」で「img.left」に左寄せ「flot:left」及び画像とテキストの間隔（右10px 下10px）を設定します。
   

   img.left {
   　float: left;
   　width: 200px;
   　margin: 0 10px 10px 0;
   }

4. 「zoo3.html」で2番目のp要素にflotを解除するためのクラス「clear」を設定します。
   <p class="clear">暖かい日・・・・・・まるで縁側でうたた寝 している猫のようです。</p>
5. 「zoo3.css」でflotを解除を設定します。
   

   .clear {
   　clear: both;
   }

6. 「zoo3.html」でペンギン画像にクラス「right」を設定します。
   <p><img class="right" src="../images/penguin.jpg" alt="ペンギン">
7. 「zoo3.css」で「img.right」に右寄せ「float: right」及び画像とテキストの間隔（左10px 下10px）を設定します。
   

   img.right {
   　float: right;
   　width: 200px;
   　margin: 0 0 10px 10px;
   }

8. 「zoo3.html」で最後のp要素にflotを解除するためのクラス「clear」を設定します。
   <p class="clear">それでも日暮れが・・・・・・の方を眺めていました。</p>
9. 最終行にトップページへ戻るリンクを挿入します。
10. 上書き保存し、プレビューで確認してサイトへ転送します。