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

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

< HOME / ホームページ作成ガイド / メニュー（TABLE + CSS）
メニュー（TABLE + CSS）
テーブルタグでリンクメニューのベースを作り、スタイルシートで細かい設定を行ってみます。

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

※「テーブルタグの使用について」もご覧ください。
※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。
　作り方
テーブルタグでメニューの骨格を作り、スタイルシートで細かい設定を行っていきます。

次の例では、テーブルの中にリンク文字を入れて、縦型と横型のメニューを作成しています。枠線などの指定方法については、「細い枠線を指定したテーブル（+CSS）」をご覧ください。

リンク文字の部分は、下線を none（非表示）にし、文字サイズを 10pt 、文字の太さを bold（太字）に指定しています。また、リンクにポイントしたときの文字色を #FF0000（赤）に指定しています。

メニューの枠線は、縦型と横型で異なる設定を行っています。縦型のメニューは「枠線を重ねる」、横型のメニューは「枠線を離す」、という指定内容になっています。また、横型のメニューでは、枠線の上と左の線を明るく、右と下の線を暗くして、ボタンを立体的に見せています。

■縦型のメニュー

【 <HEAD> 〜 </HEAD> 】


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

#menu1 {
border-collapse: collapse; /* 枠線の表示方法（重ねる） */
}

#menu1 TD {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
background-color: #FFFFFF; /* セルの背景色 */
padding: 3px; /* セル内の余白 */
}

#menu1 A {
text-decoration: none; /* リンク文字の下線 */
font-size: 10pt; /* リンク文字のサイズ */
font-weight: bold; /* リンク文字の太さ */
}

#menu1 A:hover {
color: #FF0000; /* ポイント時の文字色 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE WIDTH="150" ID="menu1">
<TR>
<TD><A HREF="../../index.html">トップページ</A></TD>
</TR>
<TR>
<TD><A HREF="../../html_tag/index.html">WebページA</A></TD>
</TR>
<TR>
<TD><A HREF="../../stylesheet/index.html">WebページB</A></TD>
</TR>
<TR>
<TD><A HREF="../../javascript/index.html">WebページC</A></TD>
</TR>
<TR>
<TD><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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



■横型のメニュー

【 <HEAD> 〜 </HEAD> 】


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

#menu2 {
border-collapse: separate; /* 枠線の表示方法（重ねない） */
}

#menu2 TD {
border-width: 2px; /* 枠線の太さ */
border-style: solid; /* 枠線のスタイル */
border-color: #BEDDF5 #429BE3 #429BE3 #BEDDF5; /* 枠線の色（上・右・下・左） */
background-color: #FFFFFF; /* セルの背景色 */
padding: 3px; /* セル内の余白 */
text-align: center; /* リンク文字の位置 */
}

#menu2 A {
text-decoration: none; /* リンク文字の下線 */
font-size: 10pt; /* リンク文字のサイズ */
font-weight: bold; /* リンク文字の太さ */
}

#menu2 A:hover {
color: #FF0000; /* ポイント時の文字色 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE WIDTH="650" ID="menu2">
<TR>
<TD WIDTH="20%"><A HREF="../../index.html">トップページ</A></TD>
<TD WIDTH="20%"><A HREF="../../html_tag/index.html">WebページA</A></TD>
<TD WIDTH="20%"><A HREF="../../stylesheet/index.html">WebページB</A></TD>
<TD WIDTH="20%"><A HREF="../../javascript/index.html">WebページC</A></TD>
<TD WIDTH="20%"><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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



　ポイント時に背景色を切り替える
マウスでポイントしたときに、ボタンの背景色が切り替るようにしてみます。

ボタン全体の背景が切り替わるようにするには、Aタグをインライン要素からブロック要素に変更しておく必要があります。また、上記のメニューではリンク文字の部分しかクリックできませんでしたが、Aタグをブロック要素にしておくことで、ボタン全体をクリックできるようになります。

次の例では、Aタグに display: block を指定して、このタグをブロック要素に変更しています。ここでは同時に width: 100% も指定しておきます。

また、上記のメニューではTDタグに padding を指定しましたが、今回はAタグにも padding を指定しています。余白の指定は、このAタグの padding で行ってください。

マウスでポイントしたときの背景色は、A:hover { } 内の background-color で指定しています。

■縦型のメニュー

【 <HEAD> 〜 </HEAD> 】


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

#menu3 {
border-collapse: collapse; /* 枠線の表示方法（重ねる） */
}

#menu3 TD {
border: 1px #1C79C6 solid; /* セルの枠線（太さ・色・スタイル） */
background-color: #FFFFFF; /* セルの背景色 */
padding: 0; /* セル内の余白 */
}

#menu3 A {
display: block; /* ブロック要素 */
width: 100%; /* リンク部分の横幅 */
padding: 3px; /* リンク部分の余白 */
text-decoration: none; /* リンク文字の下線 */
font-size: 10pt; /* リンク文字のサイズ */
font-weight: bold; /* リンク文字の太さ */
}

#menu3 A:hover {
background-color: #E8E8FF; /* ポイント時の背景色 */
color: #FF0000; /* ポイント時の文字色 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE WIDTH="150" ID="menu3">
<TR>
<TD><A HREF="../../index.html">トップページ</A></TD>
</TR>
<TR>
<TD><A HREF="../../html_tag/index.html">WebページA</A></TD>
</TR>
<TR>
<TD><A HREF="../../stylesheet/index.html">WebページB</A></TD>
</TR>
<TR>
<TD><A HREF="../../javascript/index.html">WebページC</A></TD>
</TR>
<TR>
<TD><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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



■横型のメニュー

【 <HEAD> 〜 </HEAD> 】


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

#menu4 {
border-collapse: separate; /* 枠線の表示方法（重ねない） */
}

#menu4 TD {
border-width: 2px; /* 枠線の太さ */
border-style: solid; /* 枠線のスタイル */
border-color: #BEDDF5 #429BE3 #429BE3 #BEDDF5; /* 枠線の色（上・右・下・左） */
background-color: #FFFFFF; /* セルの背景色 */
padding: 0; /* セル内の余白 */
text-align: center; /* リンク文字の位置 */
}

#menu4 A {
display: block; /* ブロック要素 */
width: 100%; /* リンク部分の横幅 */
padding: 3px; /* リンク部分の余白 */
text-decoration: none; /* リンク文字の下線 */
font-size: 10pt; /* リンク文字のサイズ */
font-weight: bold; /* リンク文字の太さ */
}

#menu4 A:hover {
background-color: #E8E8FF; /* ポイント時の背景色 */
color: #FF0000; /* ポイント時の文字色 */
}

-->
</STYLE>


【 <BODY> 〜 </BODY> 】


<TABLE WIDTH="650" ID="menu4">
<TR>
<TD WIDTH="20%"><A HREF="../../index.html">トップページ</A></TD>
<TD WIDTH="20%"><A HREF="../../html_tag/index.html">WebページA</A></TD>
<TD WIDTH="20%"><A HREF="../../stylesheet/index.html">WebページB</A></TD>
<TD WIDTH="20%"><A HREF="../../javascript/index.html">WebページC</A></TD>
<TD WIDTH="20%"><A HREF="../../color/index.html">WebページD</A></TD>
</TR>
</TABLE>

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



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

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

inserted by FC2 system