Css!よく使う要素集。(メニューバーサイズ編)

Webページを作るにあたり、css要素を一つずつ調べて使うのもいいのですが、

Css要素をある程度知っておくととても便利です。

今回はよく使うcss要素をまとめて見ましたので紹介します。

(目次)
■ メインメニュー
■ メインメニューサイズ指定
■ クリックボタン
■ フロート配置

■ メインメニュー

今回は以下のようなメインメニューを作ります。

ポイント
・ 要素の横幅と高さは、widthプロパティとheightプロパティで指定する
・ a要素をブロック表示にすることで、クリックできるリンク範囲を広くする
・ リストをフロート配置にすることで、メニュー項目を横に並べる

■ メインメニューサイズ指定

メインメニューを作るにあたり、初めにメインメニュー全体のサイズ(幅と高さ)
を指定 する必要があります。
指定する要素は、メインメニューの親要素タグになる事が多いです。

□width:1000px; height:50px

ul#menu { width:1000px; height:50px; ←メインメニューの幅と高さ }

■ クリックボタン

display:block(クリックボタン) : クリックしやすいように、ボタン機能を追加する。

各メニュー項目のリンク部分となるa要素の表示形式をブロック表示にしています。
この指定により、リンク部分の幅と高さをブロック状に固定することができ、
ボタンのよ うなデザインになります。

□width:250px; height:35px

#menu li a { display:block; ← リンク部分をブロック表示にする
width:240px; height:35px; ← 幅と高さ}

■ フロート配置
float配置(フロート) : 要素をフロート配置にして横に並ぶようにします。
フロート配置とは、要素の配置を浮遊状態にしてしまう配置スタイルのことです。
フロート配置になった要素は、他の要素に対して浮いたような状態となります。
前の要素がフロートして左に寄せられる(float:left)と、
後に続く要素は空いたスペースを 埋めるように配置されます。

a要素をブロック表示にすると、
メニューリンクがひとつひとつ改行されて縦メニューにな ります。
それを横並びに変えてくれるのが、floatになります。

#menu li { display:inline; ← リスト項目をインライン表示にする
float:left; ← リスト項目を横に並べる}