HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / IEで最大幅、最小幅（TABLE）
IEで最大幅、最小幅（TABLE）
スタイルシートには「ボックスの最大幅と最小幅を指定する 」という指定方法がありますが、残念ながらこれはIEでは対応していません。

そこで今回は、テーブルタグとスペーサーGIFを使用して、これと同じようなものを作ってみました。

※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。

※「テーブルタグの使用について」もご覧ください。
　最大幅の指定方法
まず最大幅の指定方法ですが、TDタグに WIDTH="" を追加して、そこへサイズを指定します。これだけです。

次の例では、最大幅を 500 に指定しています。この場合、通常の幅は500ですが、ブラウザの幅を500より狭くすると、それに合わせてボックスの幅も狭くなります。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="500" BGCOLOR="#E3F0FB">ホームページ作成情報！</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

サンプル画面へ

ただし、上記のように指定すると、枠線やパディングなどの指定を行った場合に、ボックスの大きさが変化してしまいます（横幅が広がってしまう）。変化しないようにするには、次のようにテーブルを入れ子にして指定します。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="500" BGCOLOR="#1C79C6">

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="1" CELLPADDING="5">
<TR>
<TD BGCOLOR="#E3F0FB">ホームページ作成情報！</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

サンプル画面へ


　最小幅の指定方法
最小幅の指定には、スペーサーGIFを使用します。セル内にスペーサーGIFを入れ、IMGタグの WIDTH="" に最小幅の数値を指定します。

次の例では、通常の幅を 100% 、最小幅を 500 に指定しています。この場合、ブラウザの幅を狭くしていくと、500 より狭くなった時点で横スクロールが入ります。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD BGCOLOR="#E3F0FB">ホームページ作成情報！</TD>
</TR>
<TR>
<TD><IMG SRC="image/spacer.gif" ALT="" WIDTH="500" HEIGHT="1"></TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

サンプル画面へ
※わかりやすくするためにスペーサーGIFを赤くしています。

枠線を指定する場合などは、次のようにテーブルを入れ子にして指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD BGCOLOR="#1C79C6">

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="1" CELLPADDING="5">
<TR>
<TD BGCOLOR="#E3F0FB">ホームページ作成情報！</TD>
</TR>
</TABLE>

</TD>
</TR>
<TR>
<TD><IMG SRC="image/spacer.gif" ALT="" WIDTH="500" HEIGHT="1"></TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

サンプル画面へ
※わかりやすくするためにスペーサーGIFを赤くしています。


　最大幅と最小幅を同時に指定
最大幅と最小幅を同時に指定してみます。

次の例では、最大幅を 500 、最小幅を 400 に指定しています。この場合、通常の幅は500ですが、ブラウザの幅を500より狭くすると、それに合わせてボックスの幅も狭くなります。更にブラウザの幅を狭くしていくと、400より狭くなった時点で横スクロールが入ります。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="500" BGCOLOR="#E3F0FB">ホームページ作成情報！</TD>
</TR>
<TR>
<TD><IMG SRC="image/spacer.gif" ALT="" WIDTH="400" HEIGHT="1"></TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

サンプル画面へ
※わかりやすくするためにスペーサーGIFを赤くしています。

枠線を指定する場合などは、次のようにテーブルを入れ子にして指定します。

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD WIDTH="500" BGCOLOR="#1C79C6">

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="1" CELLPADDING="5">
<TR>
<TD BGCOLOR="#E3F0FB">ホームページ作成情報！</TD>
</TR>
</TABLE>

</TD>
</TR>
<TR>
<TD><IMG SRC="image/spacer.gif" ALT="" WIDTH="400" HEIGHT="1"></TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

サンプル画面へ
※わかりやすくするためにスペーサーGIFを赤くしています。


ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system