初心者の俺が2ヶ月でホームページを作る 1人でできるもんっ 第2話

f:id:oresamaquest:20170414135615j:plain

春ですな~♪

春といえば桜の木のしたでみんなで酒を飲みながら花見!

実は去年の春にはじめて友達と花見に行ったのだ!
みんなでワイワイ楽しかったよ。

今年は花粉症やら会社辞めるやらでそれどころじゃなかったけど、来年は花見したいな^^

でもまずは収入を得ないとそれどころでない笑

ホームページ作成は結構奥が深いでっせ!パソコン用とスマホ用のデザインを分けて書かないと いけなかったり。

今日、自分のアイフォンでホームページを見れるところまで進んだよ。
感動しやしたぜ!

実に面白いっ!

では、昨日の続きを行きます。

昨日の記事

oresamaquest.hatenablog.com

floatでの回り込みはなんとなくわかったと思うので、次は下記のHTMLのように中央の方が高さがある場合。
高さがあるっていうのは「ここは中央です。」という文が6行あるから「ここは左の段です。」という1行よりも たてが長くなるって意味。

<h1>段組</h1>

<div class="left">
ここは左の段です。
</div>

<div class="center">
ここは中央です。<br>
ここは中央です。<br>
ここは中央です。<br>
ここは中央です。<br>
ここは中央です。<br>
ここは中央です。<br>

</div>

これに前の記事のsitagaki.cssを適用すると、「ここは中央です。」の2目以降が左の段の下にきてしまう。

段をしっかり付けたい場合には、これでは困るので中央の段に左マージンをつける。

注意すべきは左マージンのサイズは左の段の幅と同じにすること。
つまり、下記のようなCSSになる。

sitagaki.css

.left {

    float:left;
    width: 300px;

}

.center {

    margin-left: 300px;

}

表示結果

f:id:oresamaquest:20170414173042j:plain

今日はここまで~