#4. 画像をページ中央に表示してみよう

2002-05-26

今回は、ウェブ・ページの中央に画像を表示させるテクニックです。

普通に画像を中央に表示させたサンプルは、こちらです。

これだと、ウェブ・ページの上部に画像が表示されてしまい、ちょっとバランスが悪い感じですね。今回のテクニックを使うとこんなカンジになります。

ブラウザをリサイズすると、画像が常に中央に表示されてます。画像系のウェブ・ページには必須のテクニックですね。それでは行ってみよ～。

まず、 1 x 1 セルのテーブルを作成し、その中に画像を置きます。画像が、セルの中央にくるようにセルの横方向配置を中央揃えにしておきます。こんなカンジです。

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/>
  <title>sample-03</title>
 </head>
 <body bgcolor="#ffffff">
  <table width="300" border="1" cellspacing="2" cellpadding="0">
   <tr>
    <td align="center"img src="sample.jpg" alt="sample" height="100" width="100" border="0"></td>
   </tr>
  </table>
 </body>
</html>

さて、ここからがポイントです。 テーブルの幅と高さを 100% に指定します。こんなカンジです。

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/>
  <title>sample-04</title>
 </head>
 <body bgcolor="#ffffff">
  <table width="100%" height="100%" border="1" cellspacing="2" cellpadding="0">
   <tr>
    <td align="center"img src="sample.jpg" alt="sample" height="100" width="100" border="0"></td>
   </tr>
  </table>
 </body>
</html>

テーブルの高さを 100% にすることで、ページ中央に画像が表示されるようになります。

あとは、テーブルの外枠の幅を 0 にすれば、テーブルが見えなくなるので、こんなカンジになります。

ところで、たとえば、画像の下に説明の文章を付けた場合、こんなカンジに文章まで画像と一緒に中央揃えになってしまいます。

文字のところだけ左揃えにするとこんなカンジでバランスが悪くなってしまいます。

では、どうするか? 答えは「テーブルの入れ子(ネスト)」です。こんなカンジにします。

<html>
 <head>
  <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/>
  <title>sample-06</title>
 </head>
 <body bgcolor="#ffffff">
  <table width="100%" height="100%" border="1" cellspacing="2" cellpadding="0">
   <tr>
    <td align="center"img src="sample.jpg" alt="sample" height="100" width="100" border="0">
     <p></p>
     <table border="1" cellspacing="2" cellpadding="0">
      <tr>
       <td nowrap>
        冬の夜に<br/>
        私の心が悲しんでゐる<br/>
        悲しんでゐる、わけもなく……<br/>
        は錆びて、紫色をしてゐる。</p>
        <p>--『冷たい夜』 中原中也</p>
       </td>
      </tr>
     </table>
     <p></p>
    </td>
   </tr>
  </table>
 </body>
</html>

あとは、外枠の幅を 0 にすればできあがりです。こんなカンジです。

#4. 画像をページ中央に表示してみよう

新着記事