0624 CSS:リストとアンカーでナビゲーションをつくる
Imgはインライン要素
文中に画像を置くと、画像はベースライン上に配置され、ボトムとベースラインに空白ができる。
そのため、レイアウトを適切に行う事を目的として、画像をベースラインでなくボトムラインに置くよう指示する。
img {vertical-aline: bottom;}
padding/marginの復習
paddingはボーダー辺の内部に作られるが、ボーダー辺＝コンテント幅ではないので注意！
フォントの太字化
{font-weight: bold;}
擬似クラス
テキストリンク
- link 未訪問
- visited 訪問済み
- hover カーソルがリンクに重なった時
- active リンクに対してアクティブな瞬間
そこがクリックしてリンクに飛べることを示すため、伝わらなければリンクに飛べない→リンクの無いWebサイトに用があるか？
- a:link {*****}
- a:visited {*****}
- a:hover {*****}
- a:active {*****}
！CSSにはa:linkからこの順番どおりに打つ事
*****に入る内容
- color: #******;
- background: #******;
- text-decoration: ******;
→none(何もなし/リセット), underline(下線), overline(上線), line-through(打ち消し線), blink(点滅)
リストのレイアウト
リストの・を消す
ul {list-style: none;}
リストのボーダー指定と色付け
左右の線を用いず上下の線と背景色のみでリストを表示させる場合
１番上の線はulのborder-topで、残りの線は各liのborder-bottomで指定し、背景色はliに指定する。
リストの項目をボタン化する
リストに背景色を付けてボタンのような見栄えになっても、リンクは文字の上の部分にしか反映されない。そのため、ボタンのどこを押してもリンクに飛べるように下記の記述をする。
link a {display: block;}
ただしlink aの中にpadding指定も入れなければ（＝他のセレクタ内で指定してしまうと）ブロック化されないので注意
