HTML/CSS-13日目
はじめてセルフのジェルネイルに挑戦したんですが、
二度としたくないと思いました。
-------------------------------------------------------------
今日はこないだからやってる２段組レイアウトを少しいじってから、ナビメニューを作ってみます。
幅を％指定する
CSSで幅を指定するとき、pxをメインで使用して来ましたが、今回は％で指定してみようと思います。
pxは絶対値と呼ばれ、ブラウザのサイズが変わってもサイズは変動しません。
しかし％を使えば、（例外もありますが）サイズを変動させることができます。
％は、
こんな感じで使います。
じゃあこの場合、widthは何に対しての90％になるのか？という話ですが、
％が指定されたセレクタのひとつ外の要素
この場合、wrapperはbodyに内包される子要素です。
なので、これはbodyに対して90％で出力されます。
要するにbodyのサイズが変われば、wrpperのサイズも常にその90％を保って変動するということです。
しかし、親要素のサイズがpxで指定されていると、親要素のサイズは変わらないので、(今回でいうbody)、wrapperの90％も変動はしません。
このサイズによって変動する設定を持つサイトを、
レスポンシブサイトといいます。
PC用サイトをスマホで快適に見られるようにと、最近ではよく使用されています。
------------------------------------------------------------------
ナビメニューを作る
目指すのはこの形です。
たて向きと横向きの2種類のメニューを作ります。
この画像、横並びメニューの項目５が色違いますよね。
これはカーソルを乗せたときに色の変化が起こるように指定しています。
これも作っていきましょう。
HTMLはこんな感じ。
では、ここからCSSを記述します。
まず、リストのマーカーを消します。
line-heightについては、IE6以前のバグ対策用だそうです。
一気に増えた
各要素についてのコメントは記載していますが、
line-height: 34px;
これについて、ボタンの高さと行の高さは同じです。
heightで指定することも可能ですが、そうすると文字が中心に来ないので、また別で文字の高さを指定することになります。
また今回はline-heightにpxという単位がついていますが、これは一行のみの文字列を上下中央におきたいときに使用します。複数行のときは単位をつけずに調整しましょう。面倒そう。
text-decoration: none;
下線はHTML側の<a>タグで自然に発生するので、ここで消しといてあげましょう。
ブラウザではこうなります。
CSSに少し細工。
ボックスの内側に陰をつけました。
その下にhoverという擬似クラスを与え、カーソルが乗ったときの挙動を指定します。
.Atype ul li a｛....｝
.Atypeクラスの中の、<ul>の中の、<li>の中にある、<a>に作用してくださいねという指定方法です。
これでたて型メニューが完成しました。
少し立体感ない？
項目1にカーソルを乗せました。
へこんだっぽくない？
次は横並びのやつを作ります。
これであらかじめ全体の幅を指定しておきます。これをしないと、ブラウザの幅が狭くなったときに横幅を保ってくれません。
heightについて、このulの中にある子要素はfloatで左に浮かせます。そうすると、親要素であるulは、浮いているこのリストのボタンを認識できなくなります。
これを回避するため、前回はclearを使って解決しましたが、
今回はあらかじめ親要素に高さを持たせることで解決していきます。
さらに記述します。
floatで先頭を左に、後続の要素を右に回り込ませます。
ここはもうさっきのたて並びと同じ。色だけ変えていきます。
hoverプロパティを書いていきます。
これもさっきと同じ。
完成しました。
へこんだ感じになってない？
