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の代表的なフレームワークのまとめ。

top of page

©2017 coliss