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

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

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

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


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

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

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


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

まず、メニュー全体の横幅を指定したボックスを作成し、その中へ float(回り込み)を指定したリンク部分を1つずつ配置しています。

ボタンの横幅はDIVタグwidth で指定しますが、ボタンの背景色や枠線などの指定はAタグに対して行っています。(このケースの場合、DIVタグに対して枠線やパディングの指定を行うと、ブラウザの違いによりボタンのサイズ(横幅)が変わってしまうので。)

枠線などの設定をAタグに対して行うので、ここでは display: block を指定して、Aタグをインライン要素からブロック要素に変更しておきます。

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

【 <HEAD> 〜 </HEAD> 】


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

#menu1 {
width: 650px; /* メニュー全体の横幅 */
}

#menu1 DIV {
float: left; /* 回り込み */
width: 20%; /* ボタンの横幅 */
}

#menu1 A {
display: block; /* ブロック要素 */
background-color: #FFFFFF; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
padding: 3px; /* リンク部分の余白 */
text-align: center; /* リンク文字の位置 */
}


-->
</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: 650px; /* メニュー全体の横幅 */
}

#menu2 DIV {
float: left; /* 回り込み */
width: 20%; /* ボタンの横幅 */
}

#menu2 A {
display: block; /* ブロック要素 */
background-color: #FFFFFF; /* 背景色 */
border-width: 2px; /* 枠線の太さ */
border-style: solid; /* 枠線のスタイル */
border-color: #BEDDF5 #429BE3 #429BE3 #BEDDF5; /* 枠線の色(上・右・下・左) */
padding: 3px; /* リンク部分の余白 */
text-align: center; /* リンク文字の位置 */
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▲