XHTML記述でサイト作成、スタイルシートの記述方法のご紹介。

スタイルシートの使い方7

　次は「メインメニュー」のデザインをもう少し変えてみましょう。

　「style.css」に次のように書き加えます。

　このように記述します。打ち終えたら必ず上書き保存してください。

　border-top:1px dotted #000000;は「上の枠線が1ピクセル、点線、黒色」の意味です。

　line-height:200%;は「行の高さが文字に対して200％」という意味です。

　「.menyu」半角スペースの後の「a」や「a:hover」はリンクに対してのスタイルを 変更するときに使うのでここの名前は変更できません。

　「display:block;」は、リンクの適応範囲を示しています。今回の場合は 1つのセル全体がリンクになり、セル内ならどこをクリックしても他のページに 飛ぶ事が出来ます。

　「color:#8B4513;」は「文字の色は茶色」という意味です。 今回の場合は「a」の中で使っているので、リンク文字の色に反映されます。

　「font-weight:bold;」は「文字を太字にする」という意味です。

　「a:hover」とは、リンクの上にマウスが来たときの変化を指示します。 今回の「background-color:#FFFF99;」は、「リンク上にマウスが来たときに リンクの色を黄色に変化させる」という意味で使っています。

　その他は「デザイン自由なCSS」のページで解説しているものと 同じなので省略します。

　次のページでデザインを反映させます。