更新:2020/12/06

3版:2020/12/06
初版:2010/12/15

風仙洞

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

  1. float による2カラム・デザイン(実は旧式!)
  2. grid による2カラム・デザイン
  3. レスポンシブ・デザイン

ブログは 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 を指定しました。第2版では HTML5 で書きましたので、XHTML には存在しなかった header、main、footer 要素が使えるようになり、メンテナンスが容易になりました。(その3つの要素がないと、終了タグの </div> がいくつも連続することになるので、コメント行を挟まないと、ペアを成す開始の <div> を認識するのが大変!)

float による2カラム・デザイン(実は旧式)

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

● CSS
  • 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%;}
  • ~~~ 以下省略 ~~~

※読みやすくするために CSS の中の要素名を大文字で書いています。

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

● HTML
  • <!DOCTYPE html>
  • <html lang="ja">
  • <head>
  • <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
  • <meta charset="utf-8">
  • <meta name="generator" content="Brackets">
  • <title>風仙洞|HTML + CSS でブログ風レイアウト<title>
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • <link rel="stylesheet" href="../fengxian2020a.css">
  • <link rel="shortcut icon" href="../images/fengxian-fav.ico">
  • <style>
  • ~~~ 中略 ~~~
  • </style>
  • </head>
  • <body>
  • <!-- content start -->
  • <div id="content">
  • <header>
  • <p id="uppermost">
    <span style="float: right; margin-right: 15px;">
    3版:2020/12/06<br>初版:2010/12/15</span>
  • </p>
  • <h1>
  • <img src="../images/logo_fengxiandong.gif"
    width="600" height="50" alt="風仙洞">
  • </h1>
  • </header>
  • <main>
  • <h2>HTML + 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>
  • ~~~ 中略(各ページのバナーを並べたもの) ~~~
  • </dd>
  • </dl>
  • </div>
  • <!-- menu end -->
  • <br class="both">
  • <footer>
  • <hr style="width: 95%; margin-top: 20px;">
  • <address>
  • ~~~ 中略 ~~~
  • <br class="both">
  • </address>
  • </footer>
  • </div>
  • <!-- content end -->
  • </body>
  • </html>

※2カラム・デザインの構造に関係するタグをピンクで表示しました。

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

しています。

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

grid による2カラム・デザイン

4部分2列レイアウトの例(再掲載)

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

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

● 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カラムレイアウト上重要なのは次の点です。

レスポンシブ・デザイン

grid による2カラム・デザインまで進んだところで、更にレスポンシブ・デザインまですぐに進みたかったのですが、実はモバイル(スマホ、タブレット)用表示でのメニューをどうするか悩んでしまいました。「旧FTOSHIBA壁Q&A」の各ページは独立性が強いので、先行することが出来ましたが......。上部にカテゴリー別にいくつかボタンを並べるには、ボタンの数が多すぎたのです。しかも、秋になって古代史関係のアマチュア研究組織「日本古代史ネットワーク」のWebサイトを私がコーディングすることになって、2ヶ月近くそちらに忙殺されました。

しかし、その2ヶ月の間に、このサイトでのモバイル用メニューをどうするか踏ん切りが付きました。結局、モバイルのメニュー専用ページを作ることにしました。「旧FTOSHIBA壁Q&A」のページや「日本古代史ネットワーク」のWebサイトをコーディングする時に蓄えた知識を注ぎ込んでいます。

具体的には以下のソースを従来の CSS に付け加えました。

● CSS
  • @media screen and (max-width: 710px) {
  • DIV#content {display: grid; grid-template-columns: 1fr;
    grid-template-rows: auto auto auto; width: 610px;
    margin: auto;}
  • HEADER {grid-column: 1 / 2; grid-row: 1; margin: 0 auto;
    color: black; background-color: beige; width: 610px;}
  • MAIN {grid-column: 1; grid-row: 2; width: 598px;
    margin: 10px auto;}
  • FOOTER {grid-column: 1 / 2; grid-row: 3; width: 610px;
    margin: auto;}
  • DIV#menu, SPAN.for-pc {display: none;}
  • NAV.hnavi {display: contents;}
  • SPAN.update {float: right;}
  • P#uppermost {display: none;}
  • .for-mobile {display: contents;}
  • P#uppermost2 {display: contents; margin-right: 10px;}
  • H1, H2 {margin: auto; padding: 0; text-align: center;}
  • IMG.for-pc {display: none;}
  • }

スマホでの「風仙洞」トップページ

ということで、このサイトも目出度くレスポンシブ・デザインとなりました。右画像(スマホでのスクリーンショット)の赤○を付けたところがメニューです。

もっとも、本格的にレスポンシブにするには2段階ではなく、3段階以上に切り替えるべきだそうです。実際、このサイトのモバイル用表示は8インチ程度のタブレットに最適であって、5インチ台のスマホには文字がやや小さいのです。しかし、横幅 600px 以下にした上で文字サイズを vw(画面幅に対する % 単位の数字)単位にすると、いろいろ調整が必要になりそうで、面倒臭いです。