第4日目(1)

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

スタイルシートflotプロパティーによる画像に対する文字の回り込みを実習します。

1. 『Ctrl』＋『N』に続き、『Ctrl』＋『S』を押します。
2. textフォルダーに「zoo2.html」として保存します。
3. 「!」を入力して『Tab』を押します。
4. titleタグ内を「動物園にて」に書き換えます。
5. bodyタグの下に下記を入力します。

   ライオン
   ライオンを見に来ました。
   今日は雌ライオンが一匹外に出ていて、ちょうどガラスの目の 前でウトウトしています。おかげで顔の形などはっきりと見る ことができました。
   暖かい日差しの中でのんびりと昼寝している姿は百獣の王と呼 ばれるライオンのイメージとは程遠く、まるで縁側でうたた寝 している猫のようです。

6. 下記の通りマークアップします。
   「ライオン」をh1タグで括ります。
   「ライオンを見に来ました。」をｐタグで括ります。
   「今日は雌ライオンが一・・・・ことができました。」をｐタグで括ります。
   「暖かい日差しの中での・・・・猫のようです。」をpタグで括ります。
   

   

7. <p>ライオンを見に来ました。</p>の次のpタグの冒頭にimgタグを挿入します。「src="" 」の「""」の中にライオンの画像を呼び込み、「 alt=""」の「""」の中に「ライオンの昼寝」と入力します。
   <p <img src="../images/lion.jpg" alt="ライオンの昼寝">今日は・・・・
8. 上書き保存します。
9. 『Ctrl』＋『N』に続き、『Ctrl』＋『S』を押します。
10. styleフォルダーに「zoo2.css」として保存します。
11. 下記の通り入力します。

    @charset "UTF-8";
    img{
    　float: left;
    　width: 200px;
    }
    .clear {
    　clear: both;
    }
    

12. 「zoo2.html」を開き下記のとおり、CSSを呼び込む要素を追記します。

    <link rel="stylesheet" href="../style/zoo2.css" type="text/css">

13. 最後の段落に回り込み解除のためのクラスを指定します。

    <p class="clear" >暖かい日差しの中での・・・・

枠線の設定

枠線はスタイルシートで設定します。

border: 太さ　線の種類 色;