Mac mini ミニ大作戦！
第6回 目指せ、完全CSSレイアウト
（ヘッダとフッタ作成編）
なんか面倒になってきて挫折しそうなこの企画。とりあえず、無難なところでヘッダとフッタをあれこれ指定してみる。しかし単純に「中央揃え」ってどう指定するの？って思ったりした。
新型miniの登場で継続危うし
気付けばもう第6回なのに、ほとんど進展していない有様。たとえ一日休日があっても男一人暮らしだと、何かと溜まった雑用をこなすのが大変で、実はまとまった時間が確保できないのだ‥という言い訳もむなしく響く中、追い打ちをかけるように新型miniの登場でますます企画進行が危うい状況に。もう、やっつけ仕事スタンスで行こう。
さて、聞くところによるとまず最初にページ全体のリセットをしておくと良いらしい。具体的には今回用意する外部スタイルシート「TEST1.css」内のbodyタグのマージンとパディングを、共に「0」にしておくそうな。この外部スタイルシートは、サンプルHTMLと同階層に置いたので、そのサンプルの<head>タグ内、<title>の次に
<link href="TEST1.css" rel="stylesheet" type="text/css" media="all"/>
と付け足してリンクし読み込む。そのTEST1.css自体はこんな感じで記述。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
この状態で前回作成しておいたサンプルHTMLその3を表示させるとこんな風になる。上部と左側の余白が0になるハズ。
がしかし、左の余白は指定通り0になっているのに上には余白がある。しばらく悩んだが、これはh1タグでトップイメージを括っているからで、このh1自体に余白が存在するかららしい。そこで見出しなどの他の要素のマージンも0にリセットしておく。これをTEST2.cssとして読み込む。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
そうするとこうなる。
余白を0にしてるので、上も左もピッタリとウィンドウにくっつく。これでページ全体をリセット完了。で、いいのかなあ‥。
ヘッダを作る
まあ、あまり深く考えずどんどん行こう。後で悩もう。次はヘッダ部分をアレコレ指定するのだけれど、今回はたったイメージ一枚。他に何も飾りは要らず、単にこれをウィンドウ中央に置きたいだけなのだが、さて、中央揃えってCSSではどう指定するんだろう‥。参考書には運悪く中央揃えのサンプルが皆無。そうだ、アップルのサイトは中央揃えだったじゃないか。で、さっそく飛んでソースを拝見、そこからリンクされているCSSを覗いてみた。
上から4行目に
#header { width: 680px; margin: 10px auto ; text-align: center;}
とある。もしかして後半のtext-align: centerというものがそうかしらん、と思い、TEST3.cssに追加してみる。ヘッダ部分のdivは「header」という名前を付けておいたので、#headerと書いてその挙動を指定する。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
で、表示してみたらとりあえず運良く意図通りに。でもこれ、textじゃないんだけどいいのかなあ‥。
フッタを作る
参考書の手順によれば、ボディ本体部は後回しにしといて、次はフッタに手を付けているので、僕もそれにならう。で、以前HTMLで書き出ししたときはコピーライトの記述だけだったけれど、ちょっと見た目の変化がわかりにくいので、"背景画像用"として「footer.jpg」を用意した。
今回は分かり易いよう、周囲に枠線を描き込んである。このフッタ用画像を背景として扱うとはどういうことか？先のヘッダ画像は、それ自体に表紙・看板としての意味があるので、HTML上でもそのまま画像として<img>で括ったけれど、今度のフッタ画像はそれ自体にさほど意味はない。まあ06年3月という意味があるといえばあるけれど、参考書には「構造上意味のない画像は背景画像として扱うべし」と書かれてある。なるほど、CSS側で背景指定にしてしまえば、全ページに渡ってHTML内に<img>で記述する必要がなくなる。ここでは勉強のため、あえて背景として扱ってみる。
で、背景と言っても何の背景なのか？
ここでは前回フッタ領域に指定した、<div id="footer">のブロックの背景になる。その指定はHTML内ではなく、外部スタイルシートに書き込む。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; text-align: center;}
背景画像のURLを指定して、繰り返し無しで、中央揃え、これでどうだろうか。HTML自体は先のその6と変わらず、CSSファイルのみ更新してある。
ダメダメである。copyright〜という文章はセンタリングされているけれど、背景は左に寄ってしかも一部しか表示されてない。で、いろいろ調べたら、とりあえず背景の表示位置を指定するプロパティがあった。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; background-position: center; text-align: center;}
バックグラウンド・ポジションっていうのがあって、そこでセンターを指定すると良いらしい。
なんとか中央に配置されたものの、一部しか表示されてない。これ、背景の上に乗っかっている素材の範囲のみ、ここではcopyright〜という文章のある上下幅の範囲だけ背景が表示されているのだ（ということが、幸運にもしばらくアレコレ弄っていたら分かった）。ならば、その上に乗っかっている要素の面積を広げてやればいい。で、思いついたのがコレ。
@charset "shift_jis";
/*ページ全体
________________________*/
body { margin: 0; padding: 0 }
h1,h2,h3,h4,h5,h6,p,dl { margin: 0; }
/*ヘッダ
________________________*/
#header { text-align: center;}
/*フッタ
________________________*/
#footer { background-image: url("footer.jpg"); background-repeat: no-repeat; background-position: center; text-align: center;}
#footer p { text-align: center; padding-top: 60px; padding-bottom: 35px }
これはフッタ領域にある<p>要素で括られたテキストのパディングを指定して、うまく表示されるように調整しているワケ。
ここで<p>の上に60、下に35の余白を取ったのは、背景画像のfooter.jpgの縦の長さが95ピクセルだったから。果たしてこのやり方が合法なのかどうか知らないけれど、まあ、とりあえずはこれで良しとしておこうっと。そのうち正しいルールも分かってくるでしょう。でもこれが一番良い手段のような気もするけれど‥。いいのかなあ‥。
自分で言い出しておいて、いざとなると面倒臭がってなかなか手を付けなかったんだけれど、今回フッタまで来たら何か楽しくなってきた。あれ〜、なんで〜、こうかな〜、ってハマり出すと面白い。今回は意味のない画像は背景にしてしまえ、という発想を知ったのが有益だった。次回はメインとなる3段組にチャレンジ。挫折するかもしれないけれど。
っていうか、コピーライトが2005までになってるやんか。
|
