楽しいホームページ入門
7.ページ全体のレイアウトに挑戦
● ブロックの記述・縦並び配置
今まで学んだテクニックを最大限発揮する前提は、ページレイアウトが納得いくものでなくてはなりません。その為には、それなりの技法が必要です。この技法としては主に次の3種類が考えられます。
1.table要素でページ内を仕切っていく方法
2.div要素でページ内にブロックを作っていく方法
3.frame要素でページ内にページを作っていく方法
この内frameの技法は検索エンジン対応としては不向きの様です。又、スタイルシートを活かして柔軟な構成のページを作るには、table要素の技法よりも、2番目にあげたdiv要素を使う技法が適している様です。
さて、5つのブロックから成るページレイアウトをイメージしながら、手順を追ってみます。5つのブロックの名はヘッダー1、ヘッダー2、メニュー、本文、フッターです。最初はこれらを縦に順番に配置してみます。<div>~</div>で囲んだ範囲が一つのブロックレベル要素になります。
実際のHTML文書中の<body>~</body>の全文は下の通りです。クラス名を付けて区別されたこれらのブロック5つが登場します。
<body>
<!--ここからヘッダー-->
<div class=”header1”><h1>セカンドライフ 事始め</h1></div>
<div class=”header2”></div>
<!--ここからページナビ-->
<div class=”menu”>
<ol>
<li>自己紹介</li>
<li>友達からの一言</li>
<li>母の歌</li>
<li>シルバーお助け隊</li>
</ol>
</div>
<!--ここからメインコンテンツ-->
<div class=”main”>
<h2>六十の手習い・・・いやいや、六十三の手習いですよ</h2>
<p>定年後の人生って、生きていれば良いのだろうか? いいえ、<strong>活きていなくっちゃだめでしょう
</strong>。まずは一区切りとして75歳まで活き活きセカンドライフを送りたいものです。
</div>
<!--ここからフッター-->
<div class=”footer”>
<p><span class="update">Last Update 2011/5/25</span><br/><em>
©2011Yoshihiro Nakamura.All right reserved</em></p>
</div>
</body>
今回は判り易くする為に、コメントを入れていますが、実際の設計にあたっての要不要は個人の判断によります。
このHTML文書に適用するCSS文書中では、5つのブロックに対してプロパティを与えます。下の赤字の部分です。
@charset ”shift jis”;
body { background-color: #ffdddd; font-family: "MS Pゴシック", "ヒラギノ角ゴ Pro W3", Osaka; }
div.header1 { height: 100px; background-color: #bbffff; }
div.header2 { height: 50px; background-color: #118800; }
div.menu { background-color: #118800; color: #ffffff; }
div.main { background-color: #ddff99; }
div.footer { clear: both; background-color: #118800; }
.indent { text-indent: 11pt; }
ol { text-align: left; }
p:first-line { color: #771111; }
p:first-letter { font-size: 24pt; }
h1 { font-size: 32p; color: #771111; text-align: center;
text-decoration: underline overline; }
h2 { font-size: 24p; color: #bb0000; text-align: center; }
p { font-size: 11p; color: #000077; line-height: 200%; text-align: left; }
span.update{ font-family: "Times New Roman", Times; font-style: italic;
font-weight: bold; letter-spacing: 10pt; word-spacing: 20pt; }
このHTML文書とCSS文書によるWeb画面は下の通りです。
この画面を見ると、ヘッダー2とメニュー、メニューと本文、本文とフッターの間がそれぞれ空いておりバックグランド色が出て来ています。この様な配置例もあるでしょうが、今回の狙いは各ブロックが隙間無く配置されなくてはなりませんので、次ページでこの処置をします。
● ブロックを横並び配置へ
各ブロックの間(ヘッダー2とメニュー、メニューと本文、本文とフッター)にできた隙間を無くする為には、幅の規制をします。具体的には、CSS文書中で、各ブロックの幅を100%に設定します。下にそのCSS文書の追加部分を赤字で示します。
div.header1 { height: 100px; background-color: #bbffff; }
div.header2 { width: 100%; height: 50px; background-color: #118800; }
div.menu { width: 100%; background-color: #118800; color: #ffffff; }
div.main { width: 100%; background-color: #ddff99; }
div.footer { width: 100%; clear: both; background-color: #118800; }
このCSS文書の修正の結果、Web画面は下の様になりました。
もし、このブロック配置が狙いのものであれば、この後はブロック内の詳細設計に入る事になりますが、今回はメニューと本文を左右に並べたいと思います。メニューブロックは25%幅で右側に、その左隣に75%幅の本文ブロックを配置し、フッターはこの分割の影響無しよ、としました。CSS文書は、画像貼りつけの時に学んだfloatプロパティとclearプロパティを使って、下の赤字の様に修正しました。
div.header1 { height: 100px; background-color: #bbffff; }
div.header2 { height: 50px; background-color: #118800; }
div.menu { background-color: #118800; color: #ffffff; width: 25%; float: right; }
div.main { width: 75%; background-color: #ddff99; float: right; }
div.footer { width: 100%; clear: both; background-color: #118800; }
この結果のWeb画像は下の通りです。
次ページでは、画面幅の規制を行ってみます。
● containerブロックの新設
ここまでで作ったホームページだと、モニタのサイズ、解像度によってページの幅が変化します。今回は画面幅を固定したいので、ここまで作った5つのブロックを囲みこむcontainerと名付けたブロックを作りこの幅を760ピクセルにします。 何故760ピクセルにしたのかについては、次々ページ「ページのサイズはいくつ?」を見て下さい。containerブロックは、ページ全体を包括する為に作るもので、HTML文書中で<body>のすぐ後に <div class=”container”>を、</body>の直前に</div>を、下記の様に赤字部分を追記します。
<body>
<!--全体-->
<div class=”container”>
<!--ここからヘッダー-->
<div class=”header1”>
・
・
<div class=”footer”>
<p><span class=”update”>Last Update 2011/5/25</span><
<em>©2011Yoshihiro Nakamura.All right reserved</em></p>
</div>
</div>
</body>
次に、CSS文書は次の様にします。
div.container { width: 760px; }
div.header1 { width: 760px; height: 100px; background-color: #bbffff; }
div.header2 { width: 760px; height: 50px; background-color: #118800; }
div.menu { background-color: #118800; color: #ffffff; width: 25%; float: right; }
div.main { width: 75%; background-color: #ddff99; float: right; }
div.footer { width: 760px; clear: both; background-color: #118800; }
この結果のWeb画面は下の通りです。
さらにページ全体をWeb画面の幅方向中央に来させる為に、HTML文書中でcenter要素を下の赤字部分の様に記述します。
<body>
<!--全体-->
<center>
<div class=”container”>
<!--ここからヘッダー-->
・
・
</div>
</div>
</center>
</body>
ここで中央あわせ以外に、Web画面上でのホームページ位置上下左右方向での微調整をする為に、body要素でtopmarginとleftmarginの数値を指定します。具体的には下の様にbodyの行を修正します。
<body topmargin=”10” leftmargin=”10”>
これらの結果、下の様なWeb画面になります。
イメージしていたWeb画面に近づいてきました。見映えとして、メニューはページ全体の左におきたいので、CSS文書中でmenuのfloat位置をrightからleftへ変更します。下の赤字の部分です。
div.menu { background-color: #118800; color: #ffffff; width: 25%; float: left; }
結果の画面は下の通りです。
● 空白部分への埋め込み
もう一度Web画面を見て見ましょう。
メニューブロックの下側とフッターブロックの間が空いているのが気になります。これは本文ブロックの方がメニューブロックよりも高さが高い為、言い換えると、本文の方がメニューよりも内容たくさんの為です。この様な事態は実際に多く発生します。又、逆のケースもあり得ます。そして、どちらの場合にも適合できる上手い方法は無いと思います。
私は、今回の場合は、containerのバックグランド色をメニュー、フッターと同色にしました。それぞれのブロックの高さは異なったままですが、見た目をごまかしたのです。具体的には、CSS文書中で、下の赤字様に追記しています。
div.container { width: 760px; background-color: #118800; }
div.header1 { width: 760px; height: 100px; background-color: #bbffff; }
div.header2 { width: 760px; height: 50px; background-color: #118800; }
div.menu { background-color: #118800; color: #ffffff; width: 25%; float: left; }
div.main { width: 75%; background-color: #ddff99; float: left; }
div.footer { width: 760px; clear: both; background-color: #118800; }
この結果、Web画面は下の様になり、一応狙いの姿になりました。
● ページのサイズはいくつ?
私のパソコンの画面サイズは横1366×縦768ピクセルです。17インチモニタを横長にしたものです。これが正しい17インチモニタであれば、横1024×縦768ピクセルです。もし私がこの画面サイズをフルに使ってホームページをデザインしたら何が起こるでしょうか。
そうです、15インチモニターを使っている人に右側が欠けた画面を提供する事になります。何故なら、15インチモニタは横800×縦600ピクセルだからです。ホームページを見るのに縦方向へスクロールする人は多く見かけますし、さほど不自然ではありません。しかし、右側が欠けている場合は横方向へもスクロールしなくてはならず、面倒なものです。
次に、小さい画面サイズに目を転じて見ます。VGAと呼ばれる規格で、横640×480ピクセルと言う画面の表示解像度があります。このサイズが長年主流でした。従って、このサイズを推薦する本も多くあります。しかし現在は、液晶ディスプレイが進歩しており、一般にホームページを見る人はVGA規格よりも高い解像度のモニタを持っていますから、ここまで低い解像度でデザインする必要は無いのです。
まわりくどくなりましたが、ホームページのデザインとしては、15インチモニタ(横800×縦600ピクセル)、ワイドVGA(横800×縦480ピクセル)を意識して、横800ピクセル以内でページをデザインするのがお勧めです。縦はスクロールする前提で、600ピクセルにこだわる必要は無いと思いますが、重要な情報は一見して判る様に600ピクセル以内に表示する様に心がけましょう。
ところで、私はページの横幅を760ピクセルにしました。この理由は、印刷を考えたからです。自分がホームページを印刷した経験として、印刷されたページが横方向で欠けるのは不愉快なものでした。従って、私のホームページを印刷する人には気持ち良く印刷してほしいと思い、A4用紙縦で全ページが印刷できる横幅にする事にしました。いくつかの横幅設定でページを作って印刷して見た結果、横760ピクセルに決めたのです。
印刷と言う観点では、縦方向のサイズも意識しています。縦はスクロールで見る前提ではありますが、できあがったページは一応「印刷プレビュー」で印刷の姿を確かめています。
● ボックスモデルの基本構成
HTML文書の各要素は「ボックス」と呼ばれる四角の領域で成り立っています。外側から、マージン、ボーダー、パディング、内容領域となります。
図で示すと、右の様な構成です。ここで、パディングとは、和訳すると「余白」です。これまでにdivによってページをブロック分けしましたが、 そのブロックの中は、更に右の様なエレメントで成り立っており、これら内容領域の要素のプロパティになっています。
例として、ヘッダーを加工してみます。HTML文書中の記述は、
<h1>セカンドライフ 事始め</h1>
として、CSS文書中の記述は、
h1 { font-size: 36pt; color: #0000ff; text-align: left; background-color: #ffffff; }
とします。これによるWeb画像は下の通りです。
このWeb画面では、先ほど説明したボックスの概念が良く判りません。次に、CSS文書中の記述にボーダー、パディング、マージンの数値を入れて見ます。具体的には次の赤字部分の追加です。
h1 { font-size: 36pt; color: #0000ff; text-align: left; background-color: #ffffff; border: solid; margin: 30px; padding: 40px; }
その結果のWeb画面は下の様に、マージン(水色の部分)、ボーダー(紺色の線)、パデイング(余白。見出し文字=内容領域と同色)が設定されています。
● Div要素,span要素,ID属性,CLASS属性のおさらい
ここまで実用的に役立つものを先行して説明して来ましたので、ボックス中での要素や属性を整理していませんでした。基本的には以下の様に理解できます。
div要素とspan要素・・・・いずれも、HTML文書中で使用し、文字列にスタイルシートを適用させる。違いは、divがブロック分けのタグであり、改行<br/>の代わりにも使われるのに対して、spanは文章の一部にスタイルシートを適用させる為に使い改行はされません。HTML文書中での記述方法は、
<div 属性=”ID名またはCLASS名”> 文字列 </div>
<span 属性=”ID名またはCLASS名”> 文字列 </span>
となります。
ID属性とCLASS属性・・・いずれもCSS文書中で、div、spanあるいはその他の要素に対してスタイルシートを適用させる。違いは、ひとつID名がひとつのHTML文書中で一回しか使えないのに対して、CLASS名は一つのHTML文書中で同じ名を何回も使えます。HTML文書中での記述方法は、
<要素 id=”ID名”> 文字列 </要素>
<要素 class=”CLASS名”> 文字列 </要素>
となり、CSS文書中での記述は、
#ID名 { プロパティ:値; }
.CLASS名 { プロパティ:値; }
となります。
次に「子孫セレクタ」についても整理しておきます。子孫セレクタとは、ある範囲(ID名、CLASS名を付けたセレクタ、例えばp、div)内にある特定の要素(例えばli)にのみスタイルシートを適用できるセレクタの事です。例として、div要素「menu」の中のli要素にのみスタイルシートを適用しテキスト文字を白色にします。まずHTML文書の中は下の通りです。
<div class="menu">メニュー
<ol id="sample">
<li>自己紹介
<ol>
<li>その1</li>
<li>その2</li>
</ol></li>
<li>友達からの一言</li>
<li>母の歌</li>
<li>シルバーお助け隊</li>
</ol>
</div>
CSS文書内のクラス名「menu」のdivの記述は、
div.menu { background-color: #118800; color: #ffffff; width: 25%; float: left; }
です。
この時できるWeb画面は、右の様になります。
次に、CSS文書の中のdiv.menuの記述の次に下記の赤字の様な1行を入れます。
div.menu { background-color: #118800; color: #ffffff; width: 25%; float: left; }
#sample li { color: black; }
その結果のWeb画面は右の様になり、リストの文字色が黒に変わっています。「menuと言うクラス名のdiv要素」の中の「ID名sampleと言うli要素」に対してのみスタイルシートが適用されたのです。ここでliをdiv.menuの子孫エレメントと言います。
「子孫セレクタ」と言う位ですから、孫以降も指定できます。上の赤字の部分を下記の様に修正します。
#sample *li { color: black; }
この結果、Web画面は右の様になります。すなわち、アスタリスク半角*を使えば、孫以降の指定ができるのです。
● さらに自由度の高い段組みの為に(位置指定)
ここまでボックスの配置はfloat、clearのプロパティを使って、設定してきました。さらに、より自由度高くキメ細かく設定する方法としてpositionプロパテイを使う方法があります。CSS文書中での記述方法は、
セレクタ名 { position: 配置方法; 配置場所: 値; }
「配置方法」・・・ボックスの配置方法を設定する為のキーワード
static(既定値):配置方法を指定しない。
rerative:相対位置に配置する。基準位置は最初にボックスを作った位置
absolute:絶対位置に配置する。基準位置はその親要素で指定する。
親要素にposition指定ない(又はstatic)場合は、ウインドウの左上
の位置が基準点で、そこからの移動距離はtop、rightで指定する
親要素にrerative又はabsoluteでの位置指定がある場合は、その
親要素の左上が基準点で、そこからの移動距離はtop、rightで指
定する
fixed:absoluteと同じく絶対位置に配置しますがウインドウを
スクロールしてもその表示位置は変わりません。
「配置場所」・・・ボックスの配置場所をtop、right、left、bottomで指定する
以上を理解する為に、いくつかのサンプルを作って見ます。最初はHTML文書の本文の中に「sample」と言う赤で塗りつぶしたボックスを作ります。
<div class=”main”>
<div class=”sample”>
</div>
<h>六十の手習い・・・(以下略)
最初の例として、CSS文書中でのsampleのプロパティを
div.sample { width: 20px; background-color: red; }
としておきます。位置指定をしません。この結果のWeb画像は下の通りです。
次の例として、CSS文書中を次の様に変更してrelative位置指定してみます。
div.sample { width: 20px; background-color: red; position: relative; left:100px; top: 30px; }
この結果、Web画面は下の様になります。Sampleの赤ボックスが左から100px、上から30px移動したのが判ります。
次に、CSS文書中を次の様に変更してabsolute位置指定してみます。
div.sample { width: 20px; background-color: red; position: absolute; left:0px; top: 0px; }
この結果、Web画面は下の様になり、sampleの赤ボックスはウインドウの右上に来ています。
● スクロールバー付きのボックスを作る
Web画面上でスクロール付きのボックスを目にします。これもスタイルシートを活用したものの一つですから、その記述方法を確認します。CSS中で記述し、その方法は、
セレクタ { overflow: scroll; }
となります。オーバーフローした場合の処理はscroll以外も有るのですが、現実としては使用しないと思われますので、説明は省略します。
実例としてCSS文書に次の赤字部分を追加します。高さ指定が無いとオーバーフローしませんので、heightでの高さ指定も追加しました。
div.main { width: 75%; background-color: #ddff99; float: left; overflow: scroll; height:150px; }
この結果のWeb画面は下の様になります。本文右側にスクロールバーが追加されたのが判ります。