メニュー作成 CSS徹底分析 | 初心者のための理解しやすい解説 |

: オススメCSS解説本
: CSSのメリット; 利用手順; HTMLとCSSの関係; スタイル設定; 継承; カスケード; 疑似クラスと疑似要素; マージンとパディング; 数値単位
: メニュー作成; コンテンツ作成; タイトル作成

メニュー作成　メニューの作り方

メニューの基本

メニューは、<a></a>で作成します。aタグはインライン要素のため、HTML上に

<a href="#">CSS1</a><a href="#">CSS2</a>

と記述した場合、表示は

CSS1　CSS2

と、表示されます。しかし、デザインによっては、

CSS1
CSS2

と、表示したい時もあります。その場合は、aをブロック要素にします。スタイル設定は、

a { display：block； }

となります。すると、縦列に並んだリンクメニューが完成します。これを元に、ボーダー・リストスタイル等のスタイルも設定し、様々なメニューが出来るのです。それでは、step2から、実際に作ってみましょう！

横列に並んだメニュー（点線アレンジ）を作ってみよう！

■ スタイルの設定
#menu{
　　 text-align：center；
}

#menu a　{
　　vertical-align：:middle；
　　text-decoration：none；
　　font-size：12px；
　　border-right：1px dotted #FF3333；
　　padding：3px 10px；
}
a に対してスタイルを設定します。この時、ID名menuの中の a に対して設定すると分かりやすいでしょう。

■ HTML上の要素
<div id="menu">
<a href ="#">CSSの基本</a><a href ="#">CSSの実践</a><a href ="#">CSSのQ&A</a>
</div>

■ 表示（ここでは、拡大して表示しています）

■ 解説

# menu { text-align：center；}によって、ブラウザで見た時に全体が中央に寄ります。
# menu a　{ vertical-align：middle；}によって、縦方向の中央に表示されます。
# menu a　{ text-decoration：none；}によって、文字の下線が表示されません。
# menu a　{ font-size：12px；}によって、文字のサイズが１２pxになります。
# menu a　{ border-right：1px dotted #FF3333； }によって、赤線（縦ラインのドット）が出来ます。
# menu a　{ padding：3px 10px；}によって、上下（ピンク矢印）に３pxの余白、左右（緑矢印）に１０pxの余白が出来ます。

縦列に並んだメニュー（点線アレンジ）を作ってみよう！

■ スタイルの設定
#menu{
　 width:250px;
　 text-align：center；　
}

#menu a　{
　　display:block;
　　vertical-align：:middle；
　　text-decoration：none；
　　font-size：12px；
　　border-bottom：1px dotted #FF3333；
　　padding：3px auto；
}
a に対してスタイルを設定します。この時、ID名menuの中の a に対して設定すると分かりやすいでしょう。また、step2と違う箇所（追加箇所）をグリーンで記述しました。