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; ← リスト項目を横に並べる}