改訂:2020/06/22
旧版:2010/12/15

風仙洞


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

ブログは HTML の知識なしに始めることができます。また、記事をテーマ別や月別に分類したり、作成したWebページにデザイン的な統一感を持たせたりすることができます。

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

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

4部分2列レイアウトの例 右図は、ブログによく見られるレイアウトです。上下のヘッダー部とフッター部、中段左の主要部、中段右のメニュー部から構成されています。Webページも、主要部とメニュー部が入れ替わっただけで、このような構造です。

しかし、主要部とメニュー部を横並びに配置するのは意外と難しいです。考え方としては DIV 要素などを CSS によってスタイル・コンテナとして利用すれば良いのですが、主要部とメニュー部が左右に分かれてしまったり、指定した幅にならなかったりします。そのため癇癪を起こして、

という悪癖に陥ってしまいます。実際私も 2010 年頃に相当悩み、やっと解決した記念に このページの旧版を書いたという経緯があります。

旧版では、DIV 要素の id 属性として content(表示する全体)、header、main、menu、footer を指定しました。HTML5 では、XHTML には存在しなかった header、main、footer 要素が使えるようになりましたので、メンテナンスが容易になりました。

具体的なやり方としては、スタイルシートに次のような記述をします。


DIV#content {width: 800px; margin: auto; text-align: center;}
HEADER      {color: black; background-color: beige; padding-top: 5px;}
P#uppermost {text-align: left; margin: 5px 15px 0; font-size: 95%;}
MAIN        {width: 600px; float: left; margin-left: 10px; 
            border: 1px silver solid;}
FOOTER      {margin-bottom: 2em;}
ADDRESS     {text-align: left; padding-left: 5px; font-size: 95%;}

DIV#menu    {width: 160px; float: right; margin-right: 10px;
            color: black; background-color: beige;}

DIV#menu DL#menu-items
            {text-align: left; width: 150px; margin-top: 0.3em;}
DIV#menu DL#menu-items DT  
            {text-indent: 0.5em; font-weight: bold; font-size: 105%;
            padding-top: 0.2em;}
DIV#menu DL#menu-items DD  
            {margin-left: 1.5em; color: black; margin-bottom: 0.5em;}
DIV#menu-head
            {text-align: center; margin-left: 6px; width: 148px; 
            line-height: 1.5em; color: white; background-color: black;
            font-size: 120%;}

~~~ 以下省略 ~~~

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


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta name="viewport" content="width=device-width,
    initial-scale=1">
    <meta charset="utf-8">
    <meta name="application-name" content="Brackets">
    <title>風仙洞|HTTP + CSS でブログ風レイアウト<title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../fengxian2020.css">
    <link rel="shortcut icon" href="../images/fengxian-fav.ico">
</head>
<body>

<!-- content start -->
<div id="content">
<header>
<p id="uppermost">
    <span style="float: right; margin-right: 5px;">
    改訂:2020/06/22<br>旧版:2010/12/15</span>
</p>
<h1>
    <img src="../images/logo_fengxiandong.gif"
    width="600"height="50" alt="風仙洞">
</h1>

<hr>
</header>

<main>
<h2>HTTP + CSS でブログ風レイアウト</h2>

~~~ 中略 ~~~

</main>

<!-- menu start -->
<div id="menu">
    <div id="menu-head">メニュー</div>
     <a href="../index.html">
     <img src="../images/ban_top.gif" width="150" height="25"
     class="menu-item" alt="トップページへ"
     style="margin: 10px auto 0;"></a>
<hr style="margin: 5px;">
<dl id="menu-items">
<dt>古代史関係</dt>
	<dd>
	<a href="../ancient/yi-shandao-wei-guoyi.html">
    <img src="../images/ban_yishandaoweiguoyi.gif" class="menu-item"
    alt="「『依山島為国邑』とは?」" width="120" height="30"></a>

~~~ 中略 ~~~

	</dd>
</dl>
</div</span>
<!-- menu end -->
<br class="both">

<footer>

<hr style="padding-left: 10px; padding-right: 10px; 
              margin-top: 20px;">
<address>

~~~ 中略 ~~~

<br class="both">
</address>

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

</body>
</html>

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

しています。

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


以上が float を使ったやり方ですが、どうやら考え方が XHTML の時代のままだったらしく、flexbox や grid を使うのが HTML5 に相応しいようです。

ということで、ヘッダー部、メイン部、メニュー部、フッター部の配置を grid で書き直したのが下の CSS ソース。


DIV#content {display: grid; grid-template-columns: 1fr 170px;
            grid-template-rows: auto auto 70px; width: 800px;
            margin: auto;}
HEADER      {grid-column: 1 / 3; grid-row: 1; padding-top: 5px;
            color: black; background-color: beige;}
MAIN        {grid-column: 1; grid-row: 2; width: 600px; margin-left: 10px;
            margin-top: 10px; border: 1px silver solid;}
DIV#menu    {grid-column: 2; grid-row: 2; width: 160px; margin-right: 10px;
            margin-top: 10px; color: black; background-color: beige;}
FOOTER      {grid-column: 1 / 3; grid-row: 3; margin-bottom: 1em;}

grid による2カラムレイアウト上重要なのは次の点です。