先日、友人からコーディングについて聞かれました。
どうやらローカルPCだけで情報を整理して一覧表示できるようなシンプルなページを作りたい模様。情報の更新やページのカスタマイズも自分でするとのとこなので、今回はとことんシンプルな方法で再現する方法を提案しました。もちろん、デメリットもありますがね。。。
今回の相談内容は次のとおり
- 左にメニュー、右にコンテンツを表示させたい
- メニューは表示させる場所を固定
この相談に対して回答した内容を備忘録的に書き残していこうと思います。
htmlの準備
htmlから作っていきました。
ここではbodyタグ内に書いたコードだけを載せていきます。実際にはhead内でcssファイルをリンクさせたりする必要がありますよ
<div class="menu">
<ul>
<li><a href="#menu01">menu01</a></li>
<li><a href="#menu02">menu02</a></li>
<li><a href="#menu03">menu03</a></li>
<li><a href="#menu04">menu04</a></li>
<li><a href="#menu05">menu05</a></li>
</ul>
</div>
<div class="main">
<div class="box" id="menu01">
<h2>menu01</h2>
<p><a href="#">ここに本文が入ります</a></p>
<p><a href="#">ここに本文が入ります</a></p>
<p><a href="#">ここに本文が入ります</a></p>
</div>
</div>
menuクラスの付いたdivを左側に、mainクラスの付いたdivを右側に表示するようにします。
cssを作っていく
htmlでのマークアップが終わったので、次はcssを作っていきます。
今回は『position: fixed』を使って見た目を作っていきたいと思います。
とりあえず解説前にコードを紹介。
.menu {
width: 320px;
position: fixed;
top: 0px;
z-index: 100;
}
.main {
width: 860px;
margin: 0 auto;
}
これだけ
ちょっとだけ解説
mainクラスのdivは幅860pxで指定し左右中央揃えにしています。
これは簡単ですよね。
問題はmenuクラス。普段、positionプロパティを使わない方だとちょっと戸惑うかもしれません。順を追って解説していきます。
まずmenuクラスの幅を320pxに設定します。
次にpositionプロパティを使い、menuクラスのついたdivの表示させる位置をしてします。
positionの値がfixedなので、表示の位置は絶対配置になります。
表示される位置の基準はウィンドウの左上が基準になります。
（後述するプロパティで基準の位置を変えることが出来ます）
topプロパティを使い、表示させる位置を決めていきます。ちなみにleftやright、bottomと言ったプロパティもありますよ。
『position: fixed』を使ったときにセットで使うのがz-indexプロパティ。
これは重なり順を決めるプロパティです。
PhotoshopやIllustratorで言うところのレイヤーみたいなもんですね。
これを使わないと、menuクラスのdivとmainクラスのdivが同じ階層で表示しようとするので、ブラウザの幅を狭くしたときにトラブルのもとになるのでご注意を！
z-indexの値が大きいほど上に重なって表示されるので、今回は値を100にしています。ちなみに初期値は1です。
完成！
これで要望通りのことができるhtmlとcssを作りました。
mainクラスの中に多くの情報が書き込まれてブラウザでスクロールする必要が出てもmenuクラスは常に左上に表示され続けます。
ここでひとつ。。。
一般的に２カラムのレイアウトを作るときは『float: left』や『display: box』なんかを使うことが多いと思います。これらで制御したときは横並びで表示されています。しかし今回の方法は違います。
今回の方法だと 横並びに表示されているように見える だけ。
ブラウザの幅が狭くなると、menuとmainが重なって表示されます。
ブラウザの幅がどんな状態でも常に横並びというわけにはいかないんです。
使う言語や記述する内容をとことんシンプルにした結果のデメリットが「重なって表示されることがある」なんです。
個人的にはあまり使わない『position: fixed』
常に表示させておきたいものがあるときは使える手法かもしれません。