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

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

< HOME / ホームページ作成ガイド / 細い枠線を指定する（+CSS）
細い枠線を指定する（+CSS）
表の枠線を、スタイルシートを使って1ピクセルの細い線にしてみます。

※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。
※ここで使用しているスタイルシートについての詳細は、「テーブル」カテゴリーをご覧ください。

※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。
　通常の枠線の場合は．．．
通常の枠線は、どんなに細く指定しても影のついた立体的な線で表示されます。

例えば、TABLEタグに BORDER="1" と CELLSPACING="0" を指定した場合は、次のように表示されます。

<TABLE BORDER="1" WIDTH="400" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>HP作成A</TD>
<TD>HP作成B</TD>
</TR>
<TR>
<TD>HP作成C</TD>
<TD>HP作成D</TD>
</TR>
</TABLE>

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

HP作成A HP作成B
HP作成C HP作成D

上記の表は、枠線を一番細く指定した例です。ちょっとわかりにくいかもしれませんが、表の枠線は2ピクセルで表示されています。

この枠線を、スタイルシートを使って更に細く（1ピクセルに）したい場合には、次のように指定します。

　指定方法
テーブル全体とセルに対して、枠線を指定します。

枠線の色や太さは border で指定しますが、そのままではブラウザによっては2重の線になってしまうので、TABLEタグに border-collapse を指定しておきます。

border-collapse は枠線の表示方法を設定するプロパティで、これに collapse（重ねて表示）を指定することで、枠線を1本線にすることができます。

また、テーブルの幅を指定する場合は、width で指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.table1 {
width: 400px; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */
}

.table1 TD {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE CLASS="table1">
<TR>
<TD>WebデザインA</TD>
<TD>WebデザインB</TD>
</TR>
<TR>
<TD>WebデザインC</TD>
<TD>WebデザインD</TD>
</TR>
</TABLE>

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

WebデザインA WebデザインB
WebデザインC WebデザインD

上記の例では、枠線の太さを 1 ピクセルに指定しています。


セルの背景色を指定する場合は、TABLEタグに background-color を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.table2 {
width: 400px; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */
background-color: #FFFFFF; /* 背景色 */
}

.table2 TD {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE CLASS="table2">
<TR>
<TD>WebデザインA</TD>
<TD>WebデザインB</TD>
</TR>
<TR>
<TD>WebデザインC</TD>
<TD>WebデザインD</TD>
</TR>
</TABLE>

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

WebデザインA WebデザインB
WebデザインC WebデザインD


内容と枠線の間に余裕を持たせたい場合は、TDタグに padding を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.table3 {
width: 400px; /* テーブルの横幅 */
border-collapse: collapse; /* 枠線の表示方法 */
border: 1px #1C79C6 solid; /* テーブル全体の枠線（太さ・色・スタイル） */
}

.table3 TD {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
padding: 5px; /* セル内の余白 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE CLASS="table3">
<TR>
<TD>WebデザインA</TD>
<TD>WebデザインB</TD>
</TR>
<TR>
<TD>WebデザインC</TD>
<TD>WebデザインD</TD>
</TR>
</TABLE>

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

WebデザインA WebデザインB
WebデザインC WebデザインD


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

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

inserted by FC2 system