画像を張ろう

流行のシングルカラムページ

準備。

css1フォルダーが前時の練習で作ってあり、その中にページをつくってある人はそれを使いましょう。）
層でない一は、どこか（ディスクトップなど）へdennkikisoろいうフォルダを作って下さい。
その中へ、CSS2というフォルダを作りましょう。
そして、その中へ次のファイルを解凍したものをいれて準備しましょう。
準備画面
a22.zip

絵をはる

　　<figure class="pic1">
            <p><img src="pic/zakouji.JPG" alt="舞台桜"></p>
            <figcaption class="cap">飯田市座光寺の舞台桜　夜景</figcaption>
    </figure>
figure　というのは、画像を意味します。
そこに　pic1　という名前をつけます。
画像は、picというフォルダに入れてありますから、img src="pic/zakouji.JPG" alt="舞台桜"　とリンクを張ります。
ｉｍｇタグには終了タグはありません
画像が大きくなりすぎた人はいますか。
そんなときは大きさを指定します。
例えば、CSS　に
.content1a img{
width: 20px;
}
としてみて下さい。イメージの大きさが変わります。
figcaption タグは、写真や図表にキャプションをつけることが出来ます。

文字を回り込みさせる

CSSで　pic1　に回り込みの指定をします。 
.pic1{
        float: right;  
}
こうすることで文字が画像の右側に回り込みます。

テキストにマークをつける

あとのためにテキストにマークをつけておきましょう。 

            <div class="con1a-txt1">
            <p>
            飯田の春一度にやってくる。<BR>
            ーーー略ーーー
            </p>
            </div>

左へ回り込みもしてみましょう。

＜div clsss="content1a"> からそのタグの終わりの ＜div＞まで（下の部分）をコピーして、
その下へはり付けると同じ文章が下に出来ます。
中身を一部書き換えます。 
　　            <div class="content1a">
            <h2>飯田の桜</h2>
            <figure class="pic2">　//←ここをかえて
            <p><img src="pic/zakouji.JPG" alt="舞台桜"></p>
            <figcaption class="cap">飯田市座光寺の舞台桜　夜景</figcaption>
            </figure>   
            <div con1a-txt2>　//←ここもかえる
            <p>
　　　　　　　　　　//省略
            </p>
            </div>    
        </div>
コピーした部分の　pic1 を pic2 にかえましょう。
次にCSSも　pic1 をコピーして、pic2　を作り、left を rightに変えると、左右に貼ることが出来ます。 
.pic1{
    float: left;
}
.pic2{
    float: right;
}

回り込み禁止　はみ出さないように

回り込みを禁止しないとこうなります。
写真が大きいと次の文字等が回り込んでしまうのです。
>そこで回り込みをcon1aが終わる度に行う必要があります。
回り込みを中止しない場合
文章の後、次の写真や文章が回り込まず、ここで終わりの宣言が必要です。
これには色々やり方があるようですが、先ほどつけた con1aのあとに css で回り込み禁止をかきます。こうやれば良いと覚えておきましょう。 


/*回り込み禁止*/
.con1a::after {
    content: "";
    display: block;
    clear: both;
}

飯田の春←こんな感じ

次の問題へ進む