ラン

体重増加のため、一生懸命走っても、こんな感じ。

まずは体重を落とさねば・・・。

clearfixクリアフィックス

フローティングボックスが、後に続くボックスのレイアウトに影響を与えないようにする為に使うテクニック。

まず、フローティングボックス郡を括った<div class="box"></box>を作る。

次にCSSで こう書く。

.box:after { 

          coment:  ""; 

          display: block; 

          clear: both;

       }

:after 擬似要素のdisplayプロパティはデフォルトでinlineなので必ずblockにすることに注意。

displayプロパティはややこしい

disuplayプロパティに対する値としては以下の3つを覚えよう。

display: block; ブロックレベル要素にする

1. ブロックレベル要素として扱われる＝横並びではなく縦並びに表示
2. <div> <p> <h1>〜<h6>タグなど

display: inline; インライン要素にする

1. 幅(width)と高さ(height)は指定できない
2. 上下にマージン(margine)を指定できない
3. 横ならびで表示できる
4. <a> <span>タグなど

display: inline-block; ブロックレベル要素とインラインライン要素の中間

1. インライン要素のように横並びに表示される
2. ブロックレベル要素のように幅と高さ、上下マージンの設定が可能

このように、inlineやinline-blockにて横並びにすることは可能です。

しかし、それぞれ一長一短がありややこしい。

そこで、汎用性を考えて横並びにする際には、floatプロパティが多く使われる。

セレクタの構造と文法ルール

昨日のCSSでの疑問についてですが・・。

疑　問

セレクタ{プロパティ：値；}におけるセミコロン「；」。

これってプロパティが一つだけの場合もいるのか？？

なくてもブラウザは問題なく表示するけど！！

正　解

最後の宣言に；がなくてもCSSは問題なく適用される。

しかし、修正が必要になり追加記述が必要になったとする。

その時にセミコロンをつけ忘れてしまう可能性がある。

その結果、CSSがうまく適用されない等のトラブルが・・。

よって、宣言の最後には必ずセミコロンの記述を心掛けよう。

擬似クラス hover

マウスポインタを合わせた時に、テキストだったりイメージだったりの、色が変わったり半透明になったりするやつ。

a:hover { color: #ff1111; } この場合、

<a></a>で囲まれた部分にマウスポインタを乗せるとテキストカラーが赤になる。

要素：hover { プロパティ: 値; } のように書く。

読んだ本にa:hover img { opacity: 0.7; }と記述があった。

HTMLソースはこんな感じ

<a href="△"><img src="〇〇"></a>

img:hover { opacity: 0.7; }とはならないんだ。