CSSで横並びにする方法 〜初心者はどれを選択すればいい？〜 Inline-block・Float・Flexbox〜 【CSS初心者入門】

こんにちは、かなきち(@kanakichi0801)です

今回は、CSS初心者入門【第五回】ということで、CSSで横並びにする方法を紹介していくよ！

横並びにする方法は数あれど、初心者が選択すべき方法はどれなのか？ 迷うところですよね。

この記事では、Inline-block・Float・Flexbox それぞれの基本的な使い方と注意点をきちんと伝えていきます。

今回は難易度高めです。

いつも通り、CSSの設定方法を序盤に紹介してから本題に入っていくので、すぐに記事を読みたい方は スキップ を押してね！

これからの記事を読むと
Float・Inline-block・Flexboxの基本的な使い方と注意点がわかるようになるよ！

こんな人に読んで欲しい

・コーディング初心者の方

・CSSで要素を横並びにする方法を知りたい方

・Floatの基本的な使い方を知りたい方

・Inline-blockの基本的な使い方を知りたい方

・Flexboxの基本的な使い方を知りたい方

先ずはCSSの復習

以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。 blog.mimipen.net

CSSとは？

ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。

CSSの基本構造

h1タグにCSSを使って見た目を指定した場合。

[HTMLの中身]

<h1>たいとる</h1>

[CSSの指定]

h1{
　font-size: 32px;
}

セレクタ：どこのデザインを変更するか(※h1タグ)
プロパティ：どの要素に変更を加えるか(※font-size=文字の大きさ)
値：どのように変えるか(※32pxという大きさに変える)

HTMLファイルにCSSファイルを読み込ませる方法

HTMLファイルのhead内に以下を記述します。

<link rel="stylesheet" type="text/css" href="[CSSファイル場所]">

CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。 blog.mimipen.net

Inline-blockの基本的な使い方

See the Pen oNvrOXQ by かなきち (@kanakichi) on CodePen.

使い方は簡単！横に並べたい要素にdisplay: inline-blockを指定します

特徴としては、要素が左から順に並び、要素が親要素の幅を越えると改行されます。しかし、指定するだけだと隣り合う要素の間に余白が入ります。※余白を取り除く方法は以下で解説しています。

昔からあるプロパティなので、ブラウザ対応は基本的に考えなくていいと言えます。安心して使えるので初心者にはおすすめですね！

Inline-blockを使って要素を横に並べる基本コード

/*親要素に font-size: 0 をして余白を消します*/
ul.ib{
  font-size: 0; 
}
/*子要素に display: inline-block と子要素が文字の場合は子要素の文字を指定してあげる*/
ul li{
  display: inline-block;
  font-size: 12px;
}

Inline-blockの注意点

先ほどもお伝えしたように、簡単に横並べができる Inline-block ですが、指定するだけだと要素同士に余白が入ってしまうんです。

それを回避するには、親要素にfont-size: 0または、letter-spacingを使う方法があります。余白と一言で言っても、ブラウザごとに余白の大きさが違います。そのため、各ブラウザの対応を考えると私はfont-size: 0をよく使用します。

ブラウザごとに余白の大きさが違うとは？
クロームで余白分を考慮して、width(幅)を指定しても他のブラウザ(サファリ)で崩れてしまうことがありました。親要素に font-size: 0 を指定すれば、余白分を考えて大きさの指定をしたり、実機チェック時に崩れる心配がないので、めんどくさくても指定するようにしましょう！

Floatの基本的な使い方

See the Pen xxKoNjw by かなきち (@kanakichi) on CodePen.

要素を左に詰めたい場合は、float: left。右に詰めたい場合は、float: rightを使用します

Floatは、Floatを使用すると親要素の高さが出ません。※親要素の高さの出し方は以下で解説しています。

また、要素の高さが変わる場合、このプロパティはおすすめしません。以下のように回り込んでしまいます。

では、どう言った場合にFloatを使うのでしょう。私がよく使うレイアウトは以下のような場合です。

Floatを使って要素を左右に並べ、clearfixで親要素に高さをつける基本コード

ul li.left{
  float: left;
  background-color: pink;
}
ul li.right{
  float: right;
  background-color: yellow;
}
.cf {
  display: block;
}
.cf:after {
  content: "";
  display: block;
  clear: both;
}
.cf:before {
  content: "";
  display: block;
  clear: both;
}

Floatの注意点

Floatは崩れやすいプロパティとも言われており、ただ横に要素を並べる場合は使用をおすすめしません。ただ、先ほどのように２つの要素を両サイドに並べるレイアウトの場合はこのプロパティを使うと良いでしょう。

また、Floatの特徴として親要素の高さが出ないという特徴があります。この場合ば以下のコードを親要素に指定します。
※cfというclass名にclearfixと呼ばれる指定をしています。

Floatの解除(clearfix)

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

clear: bothのみで、Float解除する方法もありますが、メンテナンスしづらいのでclear: bothのみでの指定はおすすめしません。当ブログでは非推奨なので紹介することはないと思います。

Flexboxの基本的な使い方

Flexboxは、CSSプロパティの指定方法が根本的に違います。これまでは、変化を加えたい要素にプロパティを指定してきましたが、親要素にプロパティを指定します。

上級者向けのプロパティで、覚えることが多いのですが、その分できることもたくさんあります。この記事では全て紹介できないので使いやすそうなものだけ紹介します。

Flexを設定した親要素が「Flexコンテナ」と言われるものに性質を変え、その子要素は自動的に「Flexアイテム」と呼ばれるものに変わり、親要素に対するFlexプロパティの設定によって、要素の配置、順番を柔軟に変更できるようになります。

Flexboxで横に並べる

See the Pen yLLBVzq by かなきち (@kanakichi) on CodePen.

Flexアイテムの幅を指定して横に並べる

.flex01{
  display: flex;
  flex-wrap: wrap;
}
.flex01 li{
  width: 25%;
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex01{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.flex01 li{
  width: 25%;
}

画面幅に応じて横に均等に全てを配置する

.flex02{
  display: flex;
  justify-content: space-between;
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex02{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

Flexアイテムの高さを揃えて並べる

See the Pen eYYOgOw by かなきち (@kanakichi) on CodePen.

高さを揃えて並べる

.flex03{
  display: flex;
  align-items: stretch;
}
.flex03 li{
  width: 25%;
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex03{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.flex03 li{
  width: 25%;
}

上記の記述で高さは揃いますが注意点もあります。

例えばリンク付きのボタンを横に並べる場合、flexアイテム子要素のaタグの高さが出ません。

基本的にaタグに display: block を指定すると親要素の高さになります。しかし、aタグがflexアイテムの子要素の場合は指定しても反映されません。

Flexアイテムの子要素に高さを出す

See the Pen oNNvBgz by かなきち (@kanakichi) on CodePen.

flexアイテムにも同じように display: flex を指定することでaタグにも高さが出るようになりました。 ※わかりやすいように、aタグに薄い白色を指定しています。

.flex04{
  display: flex;
  align-items: stretch;
}
.flex04 li{
  width: 25%;
  display: flex; /*子要素にも指定*/
}

ブラウザ対応を考える※ベンダプレフィックス
※最新ブラウザから2バージョン前のブラウザまでを対応させた時の記述。

.flex04{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.flex04 li{
  width: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /*子要素にも指定*/
}

Flexboxの注意点

便利なプロパティなのですが、仕事として使うのには致命的な注意点があります。それは ブラウザ対応です。 以下のサイトで問題ないとの表示にはなってますが、ブラウザでのバグがまだあるなという印象です。
対応状況
https://caniuse.com/#feat=flexbox

便利で私自身使いたいのですが、自信を持って使おうと言えないのが歯がゆいところです。

当たり前ですが、このプロパティを使う場合は各ブラウザできちんと実機チェックをすることをおすすめします。また、ベンダプレフィックス表記が必要かも、きちんと確認しましょう！

まとめ

今回は、Inline-block・Float・Flexbox それぞれの基本的な使い方と注意点解説させていただきました。どれを使えばいいか、意見が分かれるところです。

私の場合は、基本的には Inline-block、Float を使い、工数に余裕がある案件でFlexboxを使用していますかね。

Autoprefixer CSS onlineの使い方

最後まで読んでいただいた方に便利なサイトを紹介します。 autoprefixer.github.io

使い方はいたって簡単です。リンクにアクセスし、左入力エリア(スマホは上)にソースコードを貼り付けます。自動でベンダプレフィックスの記述付きのコードを右に生成されます。

入力エリア下部にあるFilterに「last 2 versions」と書くと最新ブラウザから2バージョン前のブラウザまで対応させるためのベンダプレフィックスコードを生成してくれます。よかったら使ってみてください。

次回からは以下の記事で紹介したデザインを元に簡単なサイト制作に入っていくよ！ blog.mimipen.net

↓痒いところに手がとどく記事を日々更新中！ blog.mimipen.net blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします！

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】 技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)