初心者のためのWEBデザイナーの教科書

Clear fixを学ぶ

Clearfix

▶ 資料を見る

左右にフロート(回り込み)をした要素の次にくる要素には、「clear:both」回り込み解除の指定が必要です。でなければ、次にくる要素も、再び回り込みをしてしまう特性があるからです。コンテンツ内に、clearを実装しないといけない場面が多々出てくることを予測して、clear_fixというクラスセレクタを事前に用意し、引用するやり方を推奨します。

.clearfix::after
{
content:"";/*擬似要素を入れる*/
display:block;/*ブロック要素に仮定*/
clear:both;/*フロートを解除させる*/
}

練習問題/お題/ケーキハウス

ケーキのコンテンツの背景に、必ず色を流し込みます。左メニューと右コンテンツを同セクションで包囲してください。

ケーキハウス
ショートケーキ
モンブラン
ザッハトルテ
ショートケーキ
モンブラン
ザッハトルテ
人気のケーキ
日本語で単にケーキというと、一般には、スポンジケーキにクリームを塗り果物を載せたものを指すが、
広義では、チーズケーキやホットケーキなどクリームも果物も載せないものや、
クッキーを砕いた土台の上にクリームチーズの生地を敷き、
冷やして固めたレアチーズケーキなど、様々な種類を指すこともある。

ショートケーキ
日本では、スポンジケーキを土台にして、ホイップクリームをつなぎと外装に、
そしてイチゴを味付けに使ったものを「ストロベリーショートケーキ」といい、
一般にはこれを単に「ショートケーキ」ともいう。
イチゴ以外の食材を使ったものは通常その食材の名を冠して、「バナナショートケーキ」「ピーチショートケーキ」などという。

モンブラン
栗をふんだんに使ったケーキである。山の形に似せて作ったことからこう呼ばれる。
名前の由来は、アルプス山脈のモンブランであり、フランス語で「白い山」を意味する。
フランス語ではケーキはモン・ブラン・オ・マロン(Mont Blanc aux marrons、栗のモンブランの意)と呼ばれる。
尚、上に降りかけられる白い粉砂糖は雪を表している。
山名と同様にイタリアではモンテ・ビアンコ(Monte Bianco)と呼ばれる。

このサイトは、学習教材用のデザインサンプルです。 実在しません。
2012©CAKEDAISUKI Rights Reserved.

練習問題 vol.02


▶ ケーキ大好き進化系も合わせて練習します。
サンプルをみる


▶ 練習してみましょう。