TAG 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


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲