サイドバーがあるとサイトをあまりスクロールせずにより多くの情報を提供出来るかと思います。
サイドバーの上部バナーはクリックされやすいため、アフィリエイトやビジネスでHPを作る際にはサイドバーはあったほうがいいかもしれない。
そのサイドバーを追加するにあたって、CSSの float というものを使います。
その float は便利ですが、何かと使いづらく注意点が必要です。（と僕は最初思いました。）
注意点と改善策なども含めお伝えようと思います。
サイドバーを追加するHTML・CSS
<!doctype html>
<html lang="ja">
<head>
</head>
<body>
<div id="container">
<header></header>
<nav id="headernav"></nav>
<div id="content">
<div id="inner-content" class="clearfix">
<main id="main">
<article>
<header>
<h1>WEBプログラミングを始めるために初心者は何から勉強すればいいのか？</h1>
<img src="https://swell.dev-lib.work/wp-content/uploads/2018/08/2_030_thum2.jpg">
</header>
<section>
<!-- コンテンツ内容 -->
</section>
<footer>
この記事が気に入ったらいいねしてね→(Facebookボタン)
</footer>
</article>
</main>
<div id="sidebar">
<div class="banner"><img src="images/bannera.jpg"></div>
<div class="banner"><img src="images/bannerb.jpg"></div>
<div class="banner"><img src="images/bannerc.jpg"></div>
<div class="banner"><img src="images/bannerd.jpg"></div>
</div>
</div><!-- /#inner-content -->
</div><!-- /#content -->
<footer>
<nav id="footerrnav"></nav>
</footer>
</div><!-- /#container -->
</body>
</html>
まずはHTMLです。不要なところは省きました。完全版はサンプル画面を見てください。
サイドバーは25～30行目で、main タグと同列に追加しました。
main タグはコンテンツ内容の部分です。
次にCSSです。こちらも不要なところは省きました。完全版はサンプル画面を見てください。
body > #container > * {
max-width: 1160px;
margin: 0 auto;
}
/* clearfix */
.clearfix:after {
clear: both;
content: '';
display: block;
}
/* メインコンテンツ */
#inner-content {
margin-top: 20px;
}
main {
width: 800px;
margin-right: 24px;
float: left;
}
main h1 {
margin-top: 0;
}
/* サイドバー */
#sidebar {
width: 336px;
float: right;
}
サイドバーを実現するためもありますが、ちょっと追加でHTMLとCSSに手を入れています。
[btn class=”simple”]サイドバー追加のサンプル画面[/btn]
そちらも含め次に解説します。
HTML・CSSの注意点と改善などの解説
containerを追加
HTMLの6行目、9行目、10行目の div タグを追加しました。
サイドバーのためだけなら9か10行目だけでも充分ですが、body タグ直下の container と、コンテンツエリアを囲む content, inner-content はあつと細かい設定をするときなどに便利です。
おまじないだと思って最初に追加しておいた方がいいと昔先輩にも言われました。HTML5のテンプレートのほうも後ほど修正しておきます。
閉じタグの場所は、HTMLのコメントで<!— /#container –>のようにIDを書いてあります。
#content の div タグが無いと次の float で横並び対応したときに画面の中央に寄らず画面の左右にぴったりくっついた状態になってしまいます。
何故そうなるのかというと、#content の div タグが無い場合は元々main タグに対し横幅と中央寄席を設定していたのに、それを左に寄せる設定で上書きしてしまうからです。
なのでメインコンテンツやサイドバーを含むエリアを囲んだ #content の div タグを用意し、その中で main タグと #sidebar のサイドバーを左右に寄せるということです。
float を使い、メインコンテンツ部分とサイドバーを横並びにする
通常 div タグなどのブロック要素は連続して使うと改行され上下に表示されます。
それを float を使うと、同じ階層のコンテンツを横並びや回り込ませることができます。
こんなのとか、
こんなのです。
main {
width: 800px;
margin-right: 24px;
float: left;
}
17～21行目で、main タグに対して float: left; で左に寄せて、横幅は800px、右側に24pxの余白を持たせています。
余白24pxは書かなくても大丈夫です。
#sidebar {
width: 336px;
float: right;
}
そして、23～31行目で、サイドバーに対して、float: right; で右寄せにし、横幅を336pxにしています。
main タグと #sidebar は同じ階層のHTML要素なので float で横並びになります。
float の注意点
CSSの float プロパティを使うと、同じ階層のコンテンツを横並びや回り込ませることができます。
しかし、float は通常の流れとは別のレイヤー上で表示位置を右や左から並ばせる方法なので、その次に表示されるフッターのメニューは元のレイヤーで通常通りに並んでしまいます。
下の画像の黒い部分でコンテンツA･Bの後ろに隠れてしまっている部分がフッターのメニューです。
コンテンツA･Bに対し float で左右に寄せているため別レイヤーとして扱われ、フッターメニューはコンテンツA･Bを無視して上に詰めてしまっているのです。
これを改善するために、clear: both; を指定する必要があります。
clear: both; は、float の流れをいったんリセットする記述です。
/* clearfix */
.clearfix:after {
clear: both;
content: '';
display: block;
}
clearfix というクラスは、10行目で指定しています。
そして擬似クラスで clearfix の後ろに :after がついています。
:after は、それを指定した要素の後で処理されるということです。
つまり、コンテンツA･B を括っている #inner-content の div タグの後で float をリセットしているためフッターに影響しなくなるということです。
まとめ
float を使う場合には clear: both; が必須だということですね。
同じ階層のブロック要素を横並びや回り込ませることができる float は非常に便利ですが、扱いには注意が必要です。
注意点さえしっかり守っていれば想定通りに画面を作ることができます。
コメント