更新：2022/08/19
更新：2022/08/19
初版：2010/12/15
HTML ＋ CSS でブログ風レイアウト
- float による２カラム・レイアウト（実は旧式！）
- grid による２カラム・レイアウト
- レスポンシブ・レイアウト（８インチ・タブレット対応）
ブログは HTML の知識なしに始めることができます。また、記事をテーマ別や月別に分類したり、作成したＷｅｂページにデザイン的な統一感を持たせたりすることができます。
こうしたメリットがある反面、予め用意されたテンプレートに満足せずにカスタマイズしようとすると、得体の知れない記号が出てきて急に難しくなってしまいます。また、なまじ CSS の知識があると、画像の処理やデザインの自由度に関する不満が高まってしまいます。ブログでも CSS をインラインで利用することは可能ですし、テンプレートで CSS をカスタマイズできますが、慣れた HTML エディタで入力支援機能を利用した方が楽に書けます。
そこで、私がこのＷｅｂサイトで採用している方法を紹介します。なお、これには CSS（cascading style sheet＝カスケード・スタイル・シート）の知識が不可欠なので、CSS の知識が全くない方は、CSS の勉強をするか、諦めてブログのシステムでＷｅｂページを作って下さい。
右図は、ブログによく見られるレイアウトです。上下のヘッダー部とフッター部、中段左の主要部、中段右のメニュー部（或いは左右逆）から構成されています。Ｗｅｂページも、同じような構造です。
しかし、XHTML 1.0 の時代までは主要部とメニュー部を横並びに配置するのは意外と困難でした。考え方としては div 要素などを CSS によってスタイル・コンテナとして利用すれば良かったのですが、主要部とメニュー部が左右に分かれてしまったり、指定した幅にならなかったりしました。そのため癇癪を起こして、
- TABLE 要素をレイアウトのために利用する
- frameset（XHTML 1.0 では非推奨だがまだ使えた）を利用する
という悪癖に陥ってしまいました。実際私も 2010 年頃に相当悩み、やっと解決した記念にこのページの初版を書いたという経緯があります。
初版では、DIV 要素の id 属性として content（表示する全体）、header、main、menu、footer を指定しました。第２版では HTML5 で書きましたので、XHTML には存在しなかった header、main、footer 要素が使えるようになり、メンテナンスが容易になりました。（その３つの要素がないと、終了タグの </div> がいくつも連続することになるので、コメント行を挟まないと、ペアを成す開始の <div> を認識するのが大変！）
float による２カラム・レイアウト（実は旧式）
具体的なやり方としては、スタイルシートに次のような記述をします。
- ● 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;">
３版：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>
※２カラム・レイアウトの構造に関係するタグをピンクで表示しました。
これらの CSS と HTML ソースによって、
- ヘッダ部、フッタ部も含めた全体を「content」という id を持った div 要素というスタイル・コンテナとして定義した上で全体の横幅を 800px 確保
- 「content」という id を持った div 全体を CSS の margin: auto でセンタリング（左右のマージンが auto と同値だから、結果としてセンタリング）
- メイン部（HTML5 の新要素 main）の幅を 600px に設定して CSS の float: left で左寄せし、左マージンを 10px に設定
- メニュー部（「menu」という id をもった div 要素）の幅を 160px に設定して CSS の float: right で右寄せし、右マージンを 10px 設定
- フッタ部（HTML5 の新要素 footer）直前の <br class="both"> で回り込み解除（CSS で both という class 付の br を clear: both と定義してある）
しています。
なお、メニュー部の上下に <!-- menu start --> <!-- menu end --> とコメントを付けているのはメンテナンス上の工夫です。こうすることによってメニュー部の div 要素開始タグと終了タグの対応関係がわかりやすくなります。更に、右図のように、複数の HTML ファイルの同じ部分を一斉に修正する「ファイル置換機能」が適用しやすくなっています。各 HTML ファイルの <!-- ○○○ start --> から <!-- ○○○ end --> までを置換すればよいからです。ez-HTML という HTML エディタは、こういうファイル置換の機能を持っている点が便利です。
grid による２カラム・レイアウト
以上が 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;}
- DIV#content {display: grid; grid-template-columns: 1fr 170px;
grid による２カラム・レイアウト上重要なのは次の点です。
- DIV#content の display: grid でグリッド配置を宣言。
- DIV#content の grid-template-columns: 1fr 170px により 右側 170px と残り（1fr）に分割することを宣言。
- DIV#content の grid-template-rows: auto auto 70px により横を３段（最上段と２段目は自動伸張）に分割。
- HEADER の grid-column: 1 / 3 により列を構造上２分割する縦線の１番目から３番目までを使用し、grid-row: 1 により最上段であることを宣言。
- MAIN の grid-column: 1 により列の縦線の左から１番目からデフォルトである次の縦線まで使用し、grid-row: 2 により２段目であることを宣言。
- DIV#menu の grid-column: 2 により列の縦線の左から２番目からデフォルトである次の縦線まで使用し、grid-row: 2 により２段目であることを宣言。
- FOOTER の grid-column: 1 / 3 により列をデザイン的に２分割する縦線の１番目から３番目までを使用し、grid-row: 3 により３段目（最下段）であることを宣言。
レスポンシブ・デザイン
grid による２カラム・レイアウトまで進んだところで、更にレスポンシブ・デザインまですぐに進みたかったのですが、実はモバイル（スマホ、タブレット）用表示でのメニューをどうするか悩んでしまいました。「旧FTOSHIBA壁Ｑ＆Ａ」の各ページは独立性が強いので、先行することが出来ましたが......。上部にカテゴリー別にいくつかボタンを並べるには、ボタンの数が多すぎたのです。しかも、秋になって古代史関係のアマチュア研究組織「日本古代史ネットワーク」のＷｅｂサイトを私がコーディングすることになって、２ヶ月近くそちらに忙殺されました。
しかし、その２ヶ月の間に、このサイトでのモバイル用メニューをどうするか踏ん切りが付きました。結局、モバイルのメニュー専用ページを作ることにしました。「旧FTOSHIBA壁Ｑ＆Ａ」のページや「日本古代史ネットワーク」のＷｅｂサイトをコーディングする時に蓄えた知識を注ぎ込んでいます。
具体的には以下のソースを従来の 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;}
- }
- 横幅 710px にブレイク・ポイント（切替点）を設置。
- パソコン向けの grid による２カラム、３段構造からモバイル向けの grid による１カラム３段構造に構造変更（CSS の上部に書かれたものよりも下部に書かれたものの方が優先される）。
- パソコン向けでは「display: none; ～～～」になっていたセレクタを「display: contents」に変更。
- パソコン向けではセレクタに対して有効になっていた CSS を非表示（「display: none」）に変更。
- margin、padding を一部調整。
ということで、このサイトも目出度くレスポンシブ・デザインとなりました。右画像（スマホでのスクリーンショット）の赤○を付けたところがメニューです。
もっとも、本格的にレスポンシブにするには２段階ではなく、３段階以上に切り替えるべきだそうです。実際、このサイトのモバイル用表示は７～８インチのタブレットに最適であって、５インチ台のスマホには文字がやや小さいのです。しかし、横幅 600px 以下にした上で文字サイズを vw（画面幅に対する % 単位の数字）単位にすると、いろいろ調整が必要になりそうで、面倒臭いです。
最後に、オマケとしてシンプルなＰＣ用２カラム／スマホ用１カラム・レイアウトの例をダウンロードできるようにしておきます。好みで改造して下さい。
- ▼ ダウンロード
- メイン部分： 600px
- サイドバー： 250px
- ブレイクポイント： 710px
- ⏩ レスポンシブの次の段階
- スマホ対応度向上
Ｗｅｂページ・レイアウトいよいよ vw を使った
横幅指定のレイアウトに挑戦！
