トップページ→メニュー部分の作り方
メニュー部分の作り方

メニュー部分の作り方

情報の区別や段落の整理のためにHTMLではリストに整理するという方法があります。CSSを 利用し、Webサイトを構築する場合に欠かせない要素が「li」というリストがあります。

そして、リンク「a 要素」をブロック要素にし、それに背景を設定します。するCSSのテク ニックによって、メニューを構成する方法です。

ホームページのメニューでよく使用されるHTMLの「li」を使用したロールオーバー処理は 以下の通りです。


[ HTMLコード ] --------------------------------------------------------


[ CSSコード ] --------------------------------------------------------
#btn { width:400px; }

#btn li { border:1px solid #808080; padding:5px; margin-right:10px; list-style:none; float:left; }

#btn a { text-align:center; text-decoration:none; border-bottom:2px solid #0000FF; padding-left:5px; }

#btn a:hover { border-bottom:2px solid #FF0000; padding-left:5px; }

-----------------------------------------------------------------------

[ 説明 ]

*** 要素 #btn

#btnでHTMLのul、liを囲む方法で考えます。


*** 要素 #btn li 「#btn li」は「#btn1」の中の「li」にだけスタイルシートを適用させ、「list-style: none」でマーカーを消しています。そこに「border」で枠線を指定、「margin」と 「padding」で余白を調節します。そして、そのままでは「li」は縦に並んでしまうため、 「float:left」を指定する事により左寄せで横一列に整列させることにします。さらに 「li」の間隔が狭くなるので「margin-right」で右側に間隔を調節します。


*** 要素 #btn a

「#btn a」は「#btn」の中の「a」にだけスタイルシートを適用させます。「border」で 枠線を引いているので「text-align:center」でテキストを中央寄せにし、「padding」を 指定し、余白を調節します。「border-bottom」のスタイルはオンマウス以外のときの処 理で「#white」で見えないようにしています。この処理をしないと、オンマウスとマウス アウト時のデザインが崩れる原因になります。


*** 要素 #btn a:hover

「#btn a:hover」は「#btn」の中の「a:hover」にだけスタイルシートを適用させます。 「a:hover」はオンマウスの時の処理を指定するプロパティで、ここではオンマウス時に テキストの下段に2pxの赤い線を引くように指定しています。そしてそのままではテキス トと赤い線が狭すぎるので「padding」で余白を調節します。

このように、HTMLのソースを変更することなく、スタイルシートを変えるだけでメニュー のデザインが出来てしまいます。

CSSレイアウトの長所・短所

実際にCSSレイアウトを行う前に、その長所・短所に関して把握しておきましょう。当然ながら万能な手法ではなく、短所と言うべき点も存在します。

サイト枠組みの作り方

スタイルシートは、より構造的にレイアウトを整える事ができ、HTMLだけでは表現しきれないレイアウトが可能になります。このページでは2カラム、3カラム構造の実例に沿ったCSSのサンプルを紹介しています。

よくあるレイアウト崩れ

スタイルシート作成時によくありがちなスタイル・段組崩れについてのヒント集です。borderの指定やデフォルトスタイルのリセット、ブラウザのバージョン違いによるスタイル崩れについて主に記載しております。

[PR] 主婦向け内職情報はコチラ!
国内最大級!クラウドソーシングのクラウディア!
[PR] バイナリーオプションの業者を比較して始めよう!
人気のバイナリーオプションを比較しよう
[PR] FX投資家・メイの逆張り相場ブログでFXのノウハウ伝授!
専業FXトレーダー・メイのトレード日記ブログ!初心者の入門から逆張りのチャートの読み方まで解説!
[PR] ダイビング器材をお探しならこちら!
人気のダイビング器材がたくさん揃ってるショップ!
[PR] いよいよ始まる電力自由化!電力の比較ならエネチョイス
電力の自由化で選択の幅が広がる!失敗しない電力会社選びならエネチョイス。