HTML+CSSでブログ風レイアウト

ブログはHTMLの知識なしに始めることができる。また、記事をテーマ別や月別に分類したり、作成したWebページにデザイン的な統一感を持たせたりすることができる。こうしたメリットがある反面、予め用意されたテンプレートに満足せずにカスタマイズしようとすると、得体の知れない記号が出てきて急に難しくなってしまう。また、なまじCSSの知識があると、画像の処理やデザインの自由度に関する不満が高まってしまう。ブログでもCSSをインラインで利用することは可能であるし、テンプレートでCSSをカスタマイズできるが、慣れたHTMLエディタで入力支援機能を利用した方が楽に書けるのである。

そこで、私がこのWebサイトで採用している方法を紹介する。なお、これにはCSS(カスケード・スタイル・シート)の知識が不可欠なので、CSSの知識がない方は、CSSの勉強をするか、諦めてブログのシステムでWebページを作って下さい。


右図は、Webページによく見られる構造である。上下のヘッダ部とフッタ部、中段左のメニュー部、中段右のメイン部から構成される。2カラムのブログもこのような構造をしている。

しかし、メニュー部とメイン部を横並びに配置するのは意外と難しい。原理としては DIV 要素をスタイルコンテナとして利用すれば良いのだが、メニュー部とメイン部が左右に分かれてしまったり、指定した幅にならなかったりする。そのため、レイアウトのためにTABLE タグを使用するという悪癖に陥ってしまう。

DIV#content  {width: 750px;}
DIV#header   {width: 750px; color: black; background-color: #EEEEEE;
		text-align: center;}
DIV#menu     {width: 150px; float: left; color: black;
		background-color: #EEEEAA;}
DIV#main     {width: 598px; float: left; margin-right: 0;
		border: 1px silver solid; text-align: left;}
DIV#footer   {width: 750px;}

H1	{margin-top: 0; margin-bottom: 0.3em; font-weight: bold;
		font-size: 18pt; border-left: 10px navy solid;
		border-bottom: 1px navy solid;
		color: black; background-color: #EEEEEE;
		padding-top: 0.3em; padding-bottom: 0.3em; 
		text-indent: 1em;}

DIV#menu DL#menu-item     {text-align: left; width: 150px; 
		margin-top: 0.3em;}
DIV#menu DL#menu-item DT  {text-indent: 0.5em; font-weight: bold;
		font-size: 105%; padding-top: 0.2em;}
DIV#menu DL#menu-item DD  {margin-left: 1.5em; color: black;
		margin-bottom: 0.5em;}

上はこのページに利用しているスタイルシートの一部である。そして下がこのページのHTMLソースである。

<body>
<div align="center">
<!-- content start -->
<div id="content">
<!-- header start -->
<div id="header">
<p><a href="../index.html"><img src="../images/ban_top147x50.gif" 
		width="147" height="49" alt="トップページへ"
		class="left" /></a>
<img src="../images/logo_fengxiandong.gif" width="600" height="50"
		alt="「風仙洞」" style="float: right" /></p>
<br class="both" />
<hr width="750" />
<p class="update">このページの最終更新日:2010/12/15</p>
</div>
<-- header end -->
<-- menu start -->
<div id="menu">
<dl id="menu-item">
<dt>プロフィール</dt>
	<dd>

    中略

	</dd>
</dl>
</div>
<!-- menu end -->
<!-- main start -->
<div id="main">
<h1>HTML+CSSでブログ風レイアウト</h1>

    中略

</div>
<!-- main end -->
<!-- footer start -->
<div id="footer">

<br class="both" />
<hr width="750" />
<address>

    中略

</address>
</div>
<!-- footer end -->
</div>
<!-- content end -->
</div>

</body>
</html>

これらのCSSとHTMLソースによって、

  • ヘッダ部、フッタ部も含めた全体を「content」という id を持った DIV 要素というスタイル・コンテナとして定義
  • 全体の横幅を 750px、メニュー部の幅を 150px、メイン部の幅を 598px に設定(仕切り線の太さを考慮して 600px にはしていない)
  • メニュー部、メイン部ともに左にフロート。
  • 「content」というid を持った DIV 全体をセンタリング

している。

また、「<!-- menu start -->」「<!-- menu end -->」などとコメントを付けているのがメンテナンス上の工夫である。こうすることによってヘッダ、フッタ、メニュー、メイン各部の DIV 要素の開始タグと終了タグの対応関係がわかりやすくなる。更に、右図のように、複数のHTMLファイルの同じ部分を一斉に修正する「ファイル置換機能」が適用しやすくなっている。各HTMLファイルの「<!-- ○○○ start -->」から「<!-- ○○○ end -->」までを置換すればよいからである。