Home ＜ 第16号 ＞ 第18号

初心者のためのホームページ作り　第17号

Web作成支援 初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。

今週のおさらいバックナンバーはこちらから
第１号  第２号  第３号  第４号  第５号  第６号  第７号  第８号  第９号  第10号
第11号  第12号  第13号  第14号  第15号  第16号  目次

プレーンテキスト版バックナンバー

今週＜第17号＞マガジンのおさらい

　　　　　　　　　　　　　　　　　   毎週金曜日配信　What's New 2002/9/6
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
　今週の課題■ 配置のコントロール　その２
　　　　　　　 センタリングと絶対位置の重ね順

◆画像を中央に配置する
ページのタイトルなどを画像にして表示させる時にはセンタリングして目立つよ
うにしたいものです。
　昔は、<center> とすればよかったのですが、いずれ廃止される要素です。
また、<div align="center"> とすれば同じように中央に配置されますが、この
align属性も廃止に向かっています。じゃあ、どうする？

　やはり、スタイルシートが欠かせません。非常に簡単にできるので試してみて
ください。

　■ スタイルシート（CSS）
　div { text-align: center }

　■ HTML
  <body>
  <p>
  <img src="images/title.gif" width="200" height="88" alt="タイトル">
  </p>
  </body>

 img要素はインラインレベル要素ですので、文字列と同じ扱いとなり、中央に配
置されます。

上記 CSS を使った 画像のセンタリング

画像のセンタリング

花の絵
ブロックレベル要素の文字列を扱う場合は、 text-align: center でセンタリングできますが、テーブルでは少し状況が異なります。

div { text-align: center } というCSSを使用した場合、Microsoft Internet Explorer（MSIE）のみテーブルがセンタリングして表示されます。（データセルの内容もセンタリングします。）

実行サンプル    （Netscape、Mozilla、Operaではセンタリングされません。）

しかし、MSIE以外のブラウザではセンタリングしてくれません。特に、Netscape は昔から文法には厳しい傾向があります。MSIEはその点かなり寛容で、作成者が誤った文法に気がつかなくなる場合が多々あります。

余白をつっかえ棒に表示させる
テーブルをセンタリングさせる手法として、私なりに考えたのが左右の余白とテーブルの幅を、％で設定して表示させる方法があります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テーブルのセンタリング</title>
<style type="text/css">
<!--
body  { margin: 0px; padding: 0px }
table { margin-left: 30%; margin-right: 30%; width: 40% }
td.gr { background-color: #090; color: #fff }
h1    { text-align: center; color: #009 }
-->
</style>
</head>

<body>
<h1>テーブルのセンタリング</h1>

<table cellpadding="3" cellspacing="0" summary="テーブルのサンプル">
<tr><td colspan="4" class="gr">テーブルのセンタリング</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
<tr><td>セル</td><td>セル</td><td>セル</td><td>セル</td></tr>
</table>

</body>
</html>

上記HTMLの表示結果はこのようになります。

テーブルのセンタリング

テーブルのセンタリング
セルセルセルセル
セルセルセルセル
セルセルセルセル
セルセルセルセル

テーブル内のコンテンツにあわせて左右の余白、テーブルの幅を任意に設定することで、見た目のセンタリングが可能になります。当サイトのトップページや各種リファレンスのページでこの手法を使っています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◆コンテンツをレイヤーとして重ねて表示させる
レイヤーとは透明な用紙に何かを書きます。その上にまた透明な用紙を重ねて何
かを書きます。一見すると１枚の用紙に何かが書かれているように見えます。こ
れをレイヤー（層状）と呼びます。
　画像生成ソフトに良く用いられる手法です。先週述べました「絶対位置」の指
定に加えてレイヤーとするスタイルシートを解説しましょう。

　レイヤーのように見せる場合、必ず「絶対位置」を指定することが条件です。
そして重ね順を設定することで、１つのコンテンツのように見せることができま
ます。
「絶対位置」を指定した後に、z-index: 数値 を記述します。

構文　div { position: absolute; top: 10px; left: 0px; z-index: 1 }

サンプル    HTML文は今週号を参照してください。

絶対位置を指定する場合の弊害は先週でも述べた通り、他のコンテンツと重なってしまう場合がありますので、十分に注意して設計するように心がけましょう。

イベントハンドラを使う
JavaScriptで定義されているイベントハンドラを使うことによって、レイヤーの重ね順を切り替えることができます。 
　　 ■ ここで使うイベントハンドラ
     onMouseover     マウスを重ねたときに発生するイベント
     onMouseout      マウスを外したときに発生するイベント

イベントハンドラサンプル    HTML文は今週号を参照してください。

このイベントハンドラは、今後の講座に登場しますので、覚えておいてください。

ブロックレベルとインラインレベル要素の変換
ブロックレベル要素は通常、前後に改行を持って表示されます。また、インラインレベル要素は文字列と同じに扱われ前後に改行も空白もありません。この両者の要素を正反対に表示させる機能が、CSS Level.2 で定義されているものがあります。
display属性

display: inline　　 ブロックレベル要素をインラインレベルの働きにする
display: block   　 インラインレベル要素をブロックレベルの働きにする
display: list-item  li要素と同じ働きをする
display: none    　 選択された要素を表示しないが、その分の余白を表示する

サンプル    HTML文は今週号を参照してください。

ブロックレベル要素をインラインに配置したり、その逆などを利用できます。

PageTop / Home / 目次
Copyright(C) 2002-2003 banban@scollabo.com