コンテンツに被らない固定フッター

footerくっつくんじゃねぇ！！って思った方はいるはず。

特に1ページの要素が少ないとき。

どうしても上詰めされちゃって、フッターが上がってくる。

そんな時は固定footer！！

といってもこれも色々やりかたがあるみたいで、

どれが一番良いのかわからない・・・

わたしがよく使うのはこれ

【html】

【css】

backgroundは色分けのために入れているだけなので、なくても大丈夫。
必須なのが
・htmlのheight:100%;
・bodyのposition:relative、min-height:100%
これで高さを常に画面いっぱいにします。

・bodyのposition:relative、footerのposition:absolute bottom:0px
これで常に画面下にfooterを表示させます。

・#wrapのpadding-bottomの値とfooterのheightは同じ値にして、
　ください。画面が狭くてもfooterが被らないようにします。

これでわたしはfooterを固定して、さらに上の要素に被らないようにしてます。

上記を実行するとfooterは固定されつつ、

画面が狭くなっても、コンテンツに被りません。

floatとboth:clear

プライベートで色々ありました、色ピエロです。
もう今年になってから悲しいことばっかり・・・
でも元気なんで頑張ります。

話変わってみんな大好き、floatちゃんの話です
floatすると、レイアウトがガタガタになってたcssを覚えたての私。
なんで！？ってすごい困ってたのは良い思い出。

<div id="outline">
   <div id="left" style="float:left"></div>
   <div id="right" style="float:right"></div>
</div>

styleは本当はcssで書きます。
上記のようにやると、#leftや#rightが#outlineよりでかいボックスの場合、
#outlineから普通にはみ出たりするんでよね？レイアウトもガタガタ。
原因はもちろん"float"でこれを解除する(とじる)必要があります。
私はこれをいつもこうしてます。

<div id="outline">
   <div id="left" style="float:left"></div>
   <div id="right" style="float:left"></div>
　<div style="clear:both"></div>
</div>

ここでもclear:bothをstyleで書いてますが、本当はcssで書いてます。
他にもhiddenとかclearfixとか色々な解決方法があるみたいです。
さっき知りました・・・どれが一般的なんですかね？？

覚え途中のcss [box-sizing,animation,transition]

最近少しずつ覚えているcssコード達です。
まだ使いこなせてはいないですけど・・・


box-sizing : 
これはもっと前に知っとくべきだったかも・・・
これを知らないばっかりにpaddingやborderでどれだけ苦しんだか・・・
というのもこれで高さ、幅を指定すれば上記２つを含んだボックスが作れます。

・box-sizing：content-box(初期値)
paddingとborderの幅を含めない要素が作れる。
・box-sizing : border-box
paddingとborderの幅を含める。




animation : 
その名の通り、要素をアニメのように動かします。
animation-name、animation-duration、@keyframesさえ記述すれば
動かせます。

例）

animation-nameとkeyframes のプロパティだけ一緒に。
あと-webkit-だけしか書いてないけど、ついてないやつも記述しないと
Firefoxとかでは動かないから注意です。




transition : 
transitionは時間的に要素を変化をさせます。

例）

・transition-propertyは変化させたいプロパティを入れます。
背景色だけ変化させたい場合はbackground-colorを記述します。
・transition-durationは時間を記述します。
例の場合は3秒で:hoverで指定した形になります。
・:hoverには最終的に止まるプロパティ値を入れます。
これらもベンダープレフィックス(-webkit-等)必要




このanimeとtrans2つの違いは
【animation】
　　・ループ可
　　・keyframesで細かい動きの設定可能
　　・ウィンドウが開いて即実行可能

【transition】
　　・ループがない
　　・処理後は自然に最初の状態に戻る
　　・:hoverなどの疑似クラスなどのスイッチとなるものが必要

これらがパパッと使えるようになったらかっこいいなー

ベンダープレフィックス

"人生予想外の事が大半、思ったとおりに進むことなんて極わずか"

こんな言葉に感動してしまいました、色ピエロです。

今日はベンダープレフィックスのメモ。

ベンダープレフィックスは、ブラウザの独自の拡張機能や草案段階の仕様を

先に実装する場合に記述するものです。

-moz-        :     Firefox

-webkit-    :     Google Chrome , safari

-o-            :     Opera

-ms-         :      Internet Exprorer

となってます。

そして草案が勧告候補になったら外すことが推奨されています。

transitionやtransformなどはまだ外せないみたいですね。

外すときは各々確かめないとだめなので、面倒だ・・・

ちなみW3Cのサイトで草案か勧告候補か確認できます。

私の苦手な英語だけど・・・(;_;

W3Cのサイトのリンク