HTML/CSS-14日目

横組みシンプルメニューを作る
CSSもかなり進んできました。

はよフェス行きて〜

-------------------------------------

CSSのプロパティで、displayというものがあります。その中で特に混同しやすい
inline-blockとinlineについて考えます。

inline-blockとinlineの違い

inline-block

一言で言うと、インライン要素のように使えるブロック要素。幅や高さを指定できる。

inline

インライン要素。幅や高さは指定できない。

この二つの共通点は、

ブロック要素のように、ブラウザの左端から右端まで領域を取らないこと。
また、floatしなくても勝手に左からつめて並びます。

今回はブロック要素にfloatの方法ではなく、
inline-blockを使って横並びメニューを作ります。前回より圧倒的簡単。

完成系はこいつです。

作っていきます。

横組みリストメニューを実装する

HTMLはこれです。
項目のみのリスト。

CSSはまず、ブラウザのオート余白を消します。これ毎回しましょう。

ulに対し、リストのマーカーを消します。

リストの内容のスタイルを指定していきます。

文字の色を指定し、
hoverを指定します。

完成です。

項目2のところにカーソルを載せています。
hoverプロパティが効いてます。

inline-blockがわかりやすいように枠線をつけてみました。

この赤い枠線がinline-blockの持つ領域です。floatを使わなくともボックスが横並びになるのがわかります。

ちなみに、hoverプロパティを使ってこんなこともできます。

このコードの赤線の部分。

transition:0.5s;

これで0.5秒かけて変化するということを指定します。

上の

.Atype ul li a
の中のtransitionは、hover後の変化を指定しています。

下の

.Atype ul li a:hover
の中のtransitionは、hoverしたときの変化を指定しています。

これをブラウザでやってみると、

この項目５にカーソルを載せると、

0.5秒かけてこうなります。

カーソルを離すと、また0.5秒かけて元に戻ります。

まだまだアニメーションプロパティはありますが、また今度！