[CSS] [CSS]背景画像の使い方、float/clear/overflowの関係(4/6)

はじめに

　floatとインライン要素・ブロック要素の使い分けにより、１ページの制作はかなり自由度を増しました。引き続き演習を重ねながら、学習を進めています。

• background画像の使い方
• float/clear/overflowの関係
• アキュートアクセントの入力

今日のポイント

background画像の使い方

たとえばこんな、ヘッダー部分、ミドル部分、フッター部分に３分割されたbackground用画像。

　容量を節約するため、middle部分を縦にリピートするとき。
　厳密にline-heightやmarginを設定し、継ぎ目なく重ねるようにしても、継ぎ目部分に変な1pxの幅が見えたりします。
　これを回避するには、コンテンツ全体（Containerなど）にミドル部分の背景画像を縦リピートさせると良い結果が出ました。

float/clear/overflowの関係

　この３者の関係性がいまいち理解できていませんでした。
　参考にさせていただいたのがこちら。
flaotを解除する3つの方法 | d-spica

1. 適切な要素でclear(後続要素がないときなど、入れられない場合あり)
2. 親要素にoverflow:hidden/widthまたはheightを明示
3. clearfix

似た役割だが状況により使い分けるということでしょうか。
こちらも参考になりました。
とあるコーダーの備忘録 |overflow:hidden;とclearfix

clear:bothが使えないとき、
・メインコンテンツエリアのような大きな領域の場合はclearfix
・細かいパーツのようなものの場合はoverflow:hidden;
・overflow:hiddenはIE６で無効、Firefoxでレイアウト崩れの恐れ
・clearfixはいちいちclassを追加する必要がある

その他

アキュートアクセントの入力法

カフェなどで使う機会がある。(Café)
（é）…macでは(option+e)の後(e)を入力するだけでよい。
Windowsでは文字コードを指定する。