読者です 読者をやめる 読者になる 読者になる

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

f:id:oresamaquest:20170415073453j:plain

朝です、朝日がまぶしいです。

早起きするとなんか得した気分になりますな。頭もすっきり。

というわけで、ホームページ作成の説明をいっきにやっちゃいます。

前の記事

oresamaquest.hatenablog.com

段組みの続き

さて、前の記事で中央に高さがある場合にきちんと段組みを適用する方法を説明した。

ここでわかりやすくするためにdivタグに枠線をつけよう。

.div { border: 1px solid red; }

これをsitagaki.cssに追加すると、

f:id:oresamaquest:20170415074929j:plain

このようにleftの領域、centerの領域が具体的にどこなのかわかるようになる。
俺はこれをやってはじめてcenterの方が高さがあるという意味を理解したよ(^_^)/

問題1

今左にある.leftを右に寄せてみてください。

答え

.left {

    float: right;
    width: 300px;
}

.center {

    margin-right: 300px;

}

div {

    border: 1px solid red;

}

解き終わったらもとの左寄せに戻そう。

overflowを使おう

今度は下記のHTMLのように左の方が高さがある場合を考えてみる。

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

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

</div>

<footer>
ここはフッタです。
</footer>

これは一見問題ないようにみえるが、実際動かしてみると「ここはフッタです。」が回りこんでしまう。

こんなふうに、

f:id:oresamaquest:20170415081622j:plain

本当は一番下に表示させたいのだ。

回りこみ(float)は回りこめるだけの要素を全て回り込ませようとするので、左の段が長ければその分、全て回り込んでしまう。

これを回避するための方法はいろいろあるが、ここでは比較的新しくて楽な方法、overflowを使う方法をやってみよう。

まず、回り込む要素の部分を全てdivタグなどのブロック要素で囲む。

classは適当にmainと指定しておく、

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

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

</div>
</div>

<footer>
ここはフッタです。
</footer>

そして、その囲んだ要素に対し以下のような、スタイルを付ける。

.main { overflow: hidden; }

こうすると下記の結果のように上手く表示される。

f:id:oresamaquest:20170415082819j:plain

overflow: hidden;については自分も詳しい説明を受けたのだが難しくてまだ理解できていない笑

とりあえず、overflow: hidden;を指定した、つまりmainの中だけはfloatが独立すると覚えておこう!。

以上!!