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

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / 縦型のメニュー(CSS)
縦型のメニュー(CSS)


スタイルシートを使用して、縦型のリンクメニューを作成してみます。

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

※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。


 作り方
次の例では、DIVタグを使ってメニューを作成しています。

まず、横幅のサイズを指定したボックスを作成し、その中へ枠線や背景色を指定したリンク部分を1つずつ配置しています。

メニューの幅は width 、ボタンの背景色は background-color 、ボタンの枠線は border 、リンク文字と枠線の余白は padding で、それぞれ指定しています。

【 <HEAD> 〜 </HEAD> 】


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

#menu1 {
width: 150px; /* ボタンの横幅 */
}

#menu1 DIV {
background-color: #FFFFFF; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
padding: 3px; /* ボタン内の余白 */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<DIV ID="menu1">

<DIV><A HREF="../../index.html">トップページ</A></DIV>
<DIV><A HREF="../../html_tag/index.html">WebページA</A></DIV>
<DIV><A HREF="../../stylesheet/index.html">WebページB</A></DIV>
<DIV><A HREF="../../javascript/index.html">WebページC</A></DIV>
<DIV><A HREF="../../color/index.html">WebページD</A></DIV>

</DIV>

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




 枠線とリンク文字のアレンジ
上記のメニューをベースに、枠線やリンク文字をアレンジしてみます。

まず枠線ですが、線の太さを 2px にして、上と左の線を明るく、右と下の線を暗くしてボタンを立体的に見せています。

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

【 <HEAD> 〜 </HEAD> 】


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

#menu2 {
width: 150px; /* ボタンの横幅 */
}

#menu2 DIV {
background-color: #FFFFFF; /* 背景色 */
border-width: 2px; /* 枠線の太さ */
border-style: solid; /* 枠線のスタイル */
border-color: #BEDDF5 #429BE3 #429BE3 #BEDDF5; /* 枠線の色(上・右・下・左) */
padding: 3px; /* ボタン内の余白 */
}

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

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


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<DIV ID="menu2">

<DIV><A HREF="../../index.html">トップページ</A></DIV>
<DIV><A HREF="../../html_tag/index.html">WebページA</A></DIV>
<DIV><A HREF="../../stylesheet/index.html">WebページB</A></DIV>
<DIV><A HREF="../../javascript/index.html">WebページC</A></DIV>
<DIV><A HREF="../../color/index.html">WebページD</A></DIV>

</DIV>

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




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


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