HTML 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

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

inserted by FC2 system