前回は、floatを使ったレイアウト、floatの働きテキストの回り込みにつきまして記載いたしました。
floatの働きにつきましては、いろいろな場面で使用する機会がございます。
また、このことをしっかりと理解しておくことでッ、色々なレイアウトに対応が可能になる事と思います。
個人的には、ページのおおまかなレイアウト、バナーレイアウト、
グローバルナビゲーションを記載していく際に、floatプロパティはよく使用します…。
floatプロパティ自体は、高さ、その後の要素にも影響をあたえますので、
その事をしっかりふまえ使用することをおすすめします。
それでは今回はッ、
・clearプロパティの使用方法
・overflowを使用したフロートの解除
上記について、記載していきます…。
前回ご紹介した、floatプロパティの働きを利用すると、
段組みレイアウトを簡単に作成することが出来るようになります。
段組みレイアウトにおいて、一般的に横に並べたい要素にfloat:leftを
指定するのが基本的な考え方になります。
今回こちらでは2段組みレイアウト指定方法のサンプルコードを
記載していきますが、段組みレイアウトを記載したページでは、
3段組みレイアウトもご紹介いたしましたが、その際の注意点！
ヘッダーの後にメインコンテンツを記載することをおすすめいたしました。
この場合は、ヘッダー→メインコンテンツ→サブコンテンツ→ナビゲーション→フッター
上記の順で記載することをおすすめしましたが、この場合、
3段組みレイアウトになりますので、ナビゲーションをfloat:leftに指定し、それ以外の
メインコンテンツとサブコンテンツを親要素で囲み、float:rightで指定をおこないます。
それでは、言葉で説明するよりも、実際のソースコードを見たほうが分かり易いかと思いますので、
記載していきたいと思います…。
HTML 2段組みレイアウト
<div id="container"> <div id="header"><p>MK-blog</p></div> <div id="main_contents"><p>コンテンツ</p></div> <div id="sidenav"><p>サイドナビ</p></div> <div id="footer"><p>フッター</p></div> </div>
#container {
width: 90%;
margin: 0 auto;
padding: 2.5%;
border: 1px solid #4c5482;
color: #fff;
}
#header {
width: 100%;
height: 100px;
margin-top: 0;
background: #4c5482;
}
#main_contents {
width: 70%;
height: 300px;
margin: 20px 5% 20px 0;
background: #7c8ad5;
float: left;
}
#sidenav {
width: 25%;
height: 300px;
margin: 20px 0;
background:#CCC;
float: left;
}
#footer {
clear:left;
width: 100%;
height: 100px;
background: #4c5482;
}
↓下が実際にブラウザ上で表示した2段組みレイアウトになります。
MK-blog
コンテンツ
HTML 3段組みレイアウト
<div id="container"> <div id="header"><p>MK-blog</p></div> <div id="wrapper"> <div id="main_contents"><p>コンテンツ</p></div> <div id="sub_contents"><p>サブコンテンツ</p></div> </div> <div id="sidenav"><p>サイドナビ</p></div> <div id="footer"><p>フッター</p></div> </div>
#container {
width: 90%;
margin: 0 auto;
padding: 2.5%;
border: 1px solid #4c5482;
color: #fff;
}
#header {
width: 100%;
height: 100px;
margin-top: 0;
background: #4c5482;
}
#wrapper {
float:right;
width: 80%;
}
#main_contents {
width: 75%;
height: 300px;
margin: 20px 2.5% 20px 2.5%;
background: #7c8ad5;
float: left;
}
#sub_contents {
width: 20%;
height: 300px;
margin-top: 20px;
background:#CCC;
float: right;
}
#sidenav {
left: 2.5%;
width: 20%;
margin-top: 20px;
height: 300px;
background:#CCC;
float: left;
}
#footer {
clear:both;
width: 100%;
height: 100px;
background: #4c5482;
}
カラーなどの指定をしてありますので、比較的長いソースコードのように感じますが、
実際はいたってシンプルになります。
↓下が実際にブラウザ上で表示した3段組みレイアウトになります。
MK-blog
コンテンツ
サブコンテンツ
上記ソースコードにも記載してございます、clearプロパティについて記載します。
一度フロートを指定すると、後に続く要素はそれを解除しない限り、
空いているスペースに回り込んでしまいます。
そこで、上記のサンプルコードでは#footerに、clearプロパティを指定してあります。
clearプロパティの指定方法は、floatに指定した「left」「right」のいずれか、
また双方を解除する「both」を指定することで、floatを解除することが出来ます。
試に、#footerのclearを指定しないと↓下記のようになってしまいます。
MK-blog
コンテンツ
サブコンテンツ
floatを使ってブロック要素を横並びにした際、フロートした子要素を囲む親要素の高さが
たりなくなる、またはなくなってしまう現象を避けるために、一般的には
clear:bothやclearfixを使用します。
しかし、それらを使う代わりにoverflowを使用しても同じ効果が得られます。
See the Pen
vYOgGoB by masakado (@kadokado354)
on CodePen.
今回は、floatを使った段組みレイアウトについて記載してみました。
この指定方法がしっかりと理解できれば、ホームページのレイアウトについては、
どんなレイアウトであろうと、一部を除き、ほとんどのレイアウトが可能かと思います。
また、CSSで複雑なレイアウトをおこなっていくコツは、外側から大きく分けて記載する！
コレが重要なように思います。
一度に複雑なレイアウトを考えながら記載するのではなく、
外側の大きなブロック、その内側のブロックをシンプルに分けていく！
この分け方のかさなりが増えていくと、複雑なレイアウトになります。
しかし、分け方さえ分かってしまえば、なにも複雑なことはありませんね…。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
