疑似クラス@10月4日
ナビゲーションをつくるとき、必ず設定するのが「擬似クラス」
◎ a href="#"←#を使うと、エラーになる飛び方をしない。
(ヌルリンク)指定されてないリンク
◎ list-style-type:none ←ulに対して指定(liの方では無い)
◎ div#nav ← divを取るのは、スピードアップのため。
◎ 疑似クラスの順番は絶対!
* a:link { プロパティ : 値 ; }
* a:visited { プロパティ : 値 ; }
* a:hover { プロパティ : 値 ; }
* a:active { プロパティ : 値 ; }
↓
子孫セレクタで指定する
li a:hover { color : #f00 ; text-decoration : underline ; }
縦並び
<?xml version="1,0" encoding="utf-8"> <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmls="http//www.w3.org/19999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>横並びのメニュー:文字の場合</title> <style type="text/css"> <!-- div,ul,li,a { margin: 0; padding: 0; } #nav { font-size: 1em; margin: 50px 0 0 50px; } #nav ul { list-style-type: none; } #nav li { margin-bottom: 10px; line-height: 1.0; } #nav li a:link { color: #0000ff; text-decoration: none; } #nav li a:visited { color: #8a2be2; text-decoration: none; } #nav li a:hover { color: #FF8800; text-decoration: underline; } #nav li a:active { color: #ff0000; } --> </style> </head> <body> <div id="nav"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ui> </div> </body> </html>
横並び
display inline
簡単に横並びが出来る。
navi幅を決めないと、ブラウザのサイズで改行されるよ。
<style type="text/css"> <!-- div, ul, li, a { margin: 0; padding: 0; } #nav ul { list-style-type: none; } #nav li { display: inline; margin-right: 20px; } #nav li a { font-size: 0.875em; text-decoration: none; } #nav li a:link { color: #0000FF; text-decoration: none; } #nav li a:visited { color: #8A2BE2; text-decoration: none; } #nav li a:hover { color: #FF8800; text-decoration: underline; } #nav li a:active { color: #FF0000; } --> </style> </head> <body> <div id="nav"> <ul> <li><a href="#">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>