CSSを使ったレイアウトのテクニックがしっかり学べる良コンテンツ -Learn CSS Layout

全部英語ですが、CSSを使ったレイアウトのテクニックがしっかり学べるコンテンツを紹介します。

Learn CSS Layout

コンテンツは最新のモダンブラウザでご覧ください。
以下、簡単な説明を添えて紹介します。

no layout
まずはレイアウトが無い状態から、ここではブラウザのサイズを変更して一行の長さを考えてみましょう。

displayプロパティ
レイアウトをコントロールする最重要プロパティdispayの種類。

margin: auto;
水平方向の真ん中に配置する方法。

max-width
max-widthをスマフォで使う時の注意点。

ボックスモデル
ボックスモデルが異なるとwidthが同じでも異なります。

box-sizing
レスポンシブで利用されるbox-sizingについて。

position
より複雑なレイアウトをコントロールするpositionについて。

position example
positionを使った代表的なレイアウトの例。

float
もう一つレイアウトに欠かせないfloatについて。

clear
floatをコントロールするclearについて。

clearfix
floatでの困ったを解決するclearfixについて。

float layout example
floatを使ったレイアウトの例。

percent width
カラムや画像の幅指定に「%」を使った例。

media queries
レスポンシブに欠かせないMedia Queriesについて。

inline-block
前はfloatでしかできなかったけど、inline-blockでは更に簡単にできます。

inline-block layout
inline-blockを使ったレイアウト方法。

column
複数のカラムをつくるcolumnプロパティについて。

flexbox
新しいレイアウト方法「display: flex;」の使い方。

frameworks
CSSの代表的なフレームワークのまとめ。