「真ん中に寄せたい！」「右に寄せたい！」
など、レイアウトに関するCSSを学びましょう！

CSSでレイアウトをするためには、まずHTMLのブロック要素、インライン要素を理解しておく必要があります。
詳しい説明はこちらのページをご覧ください。
HTMLのブロック要素・インライン要素

Webはパズルのようになっている

Webは一つ一つの要素が組み合わされ、並べられて出来上がっています。

HTMLはその一つ一つの要素を作るためのものになります。CSSはその要素達を並べ替えたりなど変更を加えるために使います。

要素はそれぞれ意味を持つタグを使用しましょう。詳しくはこちらをご覧ください。
HTMLのセクション・構造化

一つ一つを拡大すると、pやa、divなどが使われており、細かい並び替えが行われています。

中央寄せ

要素を左右真ん中に配置する方法です。

テキストの場合

テキストを真ん中に寄せるCSSでtext-alignというものがあります。

text-align:center; (中央寄せ)
text-align:right; (右寄せ)
text-align:left; (左寄せ)

ただし、使い方には注意が必要です。「text-alignを設定しているのに効かないよー！」という悩みは頻繁に耳にします。

◎使い方のポイント
・寄せたいのはインライン要素
・ただしインライン要素にtext-alignは効かない
・インライン要素の親にtext-alignを適用させる

ブロック要素の場合

インライン要素(テキスト)を中央に寄せるにはtext-align:center;でしたが、ブロック要素にはtext-alignが効きません。

ブロック要素を中央に寄せるにはmarginを使います。左右のmarginをautoにします。

ただし、使い方には注意が必要です。

◎使い方のポイント
・中央寄せしたいブロック要素にmargin:0 auto;を適用させる
・必ずwidthを指定する



floatを使って横並び

要素を横並びにしたり、左右に分けたりする方法です。

CSSでfloatを使うと左右に寄せることができます。また、連続する要素に左寄せを設定すると全て横並びになります。

float:left; (左寄せ)
float:right; (右寄せ)

ただし、floatには問題点があります。

floatを使ったあとに下に要素を続けたい時、理想はこの通りです。

ただし、この通りに記述すると下の要素は以下のようになってしまいます。

これはfloatを使った要素が浮いているために起こる現象です。

この現象のせいで思ったようにレイアウトができないことは初心者によくあることです。

◎解決策
clearfixを使う

下記コードをコピーしてCSSに貼り付けます。

.clearfix:after {
  　content: "";
  　clear: both;
  　display: block;
}

floatを使っている要素の親に対してclass「clearfix」を適用させます。
例えば下記コードでarticleとasideにfloatを使っている場合、その親であるmainにclearfixをいれます。


　　　
ヘッダー





　　　

　　　　　　
アーティクル

　　　

　　　




   
フッター

flexboxで横並び

floatを使ったレイアウトは昔からある方法です。clearfixを使わないとレイアウトが崩れてしまったり、レスポンシブ(スマホ対応)にするのが面倒だったりとデメリットが多くあります。

そのデメリットをなくしたのがflexboxになります。CSS3から実装されたもので比較的新しいレイアウト方法になります。ただし、flexboxにもデメリットがあり、新しいブラウザでないと動かないことです。ブラウザとはインターネットのソフトです。GoogleChromeやSafariがそれにあたります。

どのブラウザも最新バージョンであれば動きますが、世の中には古いブラウザの利用者もいます。閲覧者がどんな層かを考えて、flexboxはつかうようにしましょう。

flexboxの特徴1:簡単

flexboxは親要素にdisplay:flex;を適用させるだけで出来てしまいます。floatはclearfixなど面倒な作業は必要ありません。

◎使い方

flexboxの特徴2:レスポンシブに対応

レスポンシブとは画面の幅に合わせてデザインが変更されるもので、スマホユーザーが増えた頃から主流になりました。

何も対策をしていないとブラウザの画面を小さくするとコンテンツが隠れてしまいます。

一方でレスポンシブでは、画面を小さくすると一緒にコンテンツも合わせて動きます。flexboxがこれにあたります。

さらに、flex-direction:column;をいれれば、縦に並び替えることもできるのでPCでは左右に配置、スマホ画面では縦に配置ということもできます。

やり方はメディアクエリというものを使います。下記コードだと画面の幅が768px未満のときにflex-directionが適用され、縦に並ぶようになります。

@media screen and (max-width: 768px) {
  　　◯◯ {
    　　　　flex-direction: column;
  　　}
}

flexboxの特徴3:自動で高さ調整

横並びにしたコンテンツは従来の方法では高さが揃わず不格好になります。高さを揃えるには一手間必要でした。

flexboxは左右に並んでいるコンテンツで、一番長いところに合わせて高さが調節されます。

flexのプロパティ

配置位置：justify-content

配置位置を設定します。初期値では左寄りになっています。

justify-content:flex-start(左寄り・初期値)
justify-content:flex-end(右寄り)
justify-content:center(中央)
justify-content:space-between(端を基準に等間隔)
justify-content:space-around(等間隔)

右寄り flex-end

中央 center

端を基準に等間隔 space-between

等間隔 space-around

幅の割合：flex

flexboxを使って横並びにした要素の横幅の割合を設定します。横幅の割合の設定にはflex-grow、flex-shrink、flex-basisがあります。それらを省略したものがflexになります。

例えば、横並びの要素が3つあったとして、それぞれにflex:1;を適用させると全て同じ横幅になります。

flexを1:2:1にすると真ん中が広がります。相対的に幅を設定しているということですね。