トップページ→メニュー部分の作り方
メニュー部分の作り方
情報の区別や段落の整理のために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のソースを変更することなく、スタイルシートを変えるだけでメニュー のデザインが出来てしまいます。
サイト枠組みの作り方
スタイルシートは、より構造的にレイアウトを整える事ができ、HTMLだけでは表現しきれないレイアウトが可能になります。このページでは2カラム、3カラム構造の実例に沿ったCSSのサンプルを紹介しています。
よくあるレイアウト崩れ
スタイルシート作成時によくありがちなスタイル・段組崩れについてのヒント集です。borderの指定やデフォルトスタイルのリセット、ブラウザのバージョン違いによるスタイル崩れについて主に記載しております。
