ホームページ キッチントップへ
Q&Aマップ | サイトマップ
フリー素材ホームページ HTML レシピホームページの配色ホームページ作成 環境ホームページ作成 ソフト
ホームページ キッチントップへ

-- こだわりレシピ --
いつも画面中央に配置


 テーブルのセルの属性を活用しよう

幅100%、高さ100%のTABLEを作り、中身がセンタリングされるように設定すると、ブラウザウィンドウがどんな大きさでも、ページの中央に画像や文字を配置することができます。
HTMLソース- - - - - - - -
<table width="100%" height="100%" cellpadding="0" border="0" cellspacing="0">
<tr>
<td align="center" valign="middle">文字や画像</td></tr></table>
- - - - - - - - - - - - - - - -

browser view
Step1
↑これだけじゃ面白くないので(^^;)
今度は左のような画像【bk.gif】を、ページの中央に、ラインのような感じで配置したいと思います。

Step2
幅100%、高さ100%のTABLEの中に、幅100%、高さはbk.gifと同じ150ピクセルのTABLEを作ります。

作ったTABLEの背景画像を【bk.gif】にします。

HTMLソース- - - - - - - -
<table width="100%" height="100%" cellpadding="0" border="0" cellspacing="0">
<tr>
<td align="center" valign="middle">

<table width="100%" height="150" background="bk.gif" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><br></td></tr></table>


</td></tr></table>
- - - - - - - - - - - - - - - -
browser view
Step3

配置するタイトル画像を作りましょう。
新規ファイルを、横幅は適当、縦幅は【bk.gif】と同じ150pxで開きます。
【bk.gif】をパターン定義して、レイヤー1(もしくは背景)をパターンで塗っておきます。
そして、点線のところで切り取って書き出します【title.gif】

Step4
内側のTABLEの中に、【title.gif】を入れます。
横位置を中央(align="center")、縦位置を上(valign="top")で配置します。
HTMLソース- - - - - - - -
<table width="100%" height="100%" cellpadding="0" border="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<table width="100%" height="150" background="bk.gif" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top">

<img src="title.gif">

</td></tr></table>
</td></tr></table>
- - - - - - - - - - - - - - - -
browser view
Step5
bodyの左右のマージン属性をすべて0にします。
HTMLソース- - - - - - - -
<body leftmargin=0 rightmargin=0 marginwidth=0>
- - - - - - - - - - - - - - - -
leftmargin、rightmarginはInternet Explorerのために、marginwidthはNetscapeのために書いてあげます。

browser view

このままだとスクロールバーがでるはずのところが美しくないので、ダミーフレーム(0pxのフレーム)で消しちゃいます。
ホームページの入り口に使えそうでしょ?^^
browser view

| レシピトップへ |
| トップページへ |
-- CopyRight(C) ホームページキッチン 2006 Haruyo --