HTML・コーディングの練習-固定レイアウト：クッキングクラス-

HTML・コーディングの練習-固定レイアウト：クッキングクラス-

コーティングの練習をした。

素材は用意されていて、固定レイアウト式の2カラムで料理教室という設定のようだ。私はfloatにはoverflow:heddenやclearを使っていたのだか、今回はclearfixを使用しfloatを解除してみた。clearfixはいろいろ種類があるようだ。floatした親要素に:afterを設定し以下のプロパティを記述する。

• clearfix

.clearfix:after{
    content: ".";  
    display: block;  
    visibility: hidden;  
    height: 0.1px;  
    font-size: 0.1em;  
    line-height: 0;  
    clear: both;

}

またほかのclearfixの方法でmicro clearfixなるものもあるらしい。

• micro clearfix

.clearfix:before,
.clearfix {
    content: " "; display: table;
    }
.clearfix:after {
     clear: both;
    }
.cf {
    *zoom: 1;
    }

コーディングにはclearfixの方法を調べながらやったため2時間もかかってしまった。

素材が用意されてたのにちょっと遅すぎるなぁ・・・