「CSSだけ」初心者に贈る、flexbox基本のキ

執筆の経緯

• 筆者は普段Vue.jsでお仕事をしているフロントエンドエンジニア。
  今までCSSの勉強をまともにしたことがなく、BulmaやChakraUIのようなCSSフレームワークに頼りきっていた。
  更に参画案件には強強マークアッパーがいるので、特にCSS知識を要求されたこともなかった。
  フロントエンドエンジニアを名乗っているのに、CSS全く分からんのはヤバい！
• CSSの教材を調べると、「HTML CSS JavaScript」入門みたいなプログラム自体初心者向けのものしかない。
  font-sizeで字が大きくなるよ、みたいなのではなく、主要な躓きポイントを教えてほしい。
• なかったら作れ！(ハック精神)

対象読者

• 私のようにCSSを置き去りにしてきた人。
  なので普段マークアップしている方からすると易しすぎる内容です。
• コードはCSSではなく、SCSSで記述します。

CSS初心者って何が一番分かっていないのか

• 結論
  flexboxだっ！
• 何故flexbox？
  あなたの前に1つのdivタグが現れました。
  このdivタグを赤い字にしてくださいと言われたら、color: red;って多分すぐ分かりますよね？(仮にパッと出てこなくても調べ方分かりますよね？)
  でももしも2つのdivが現れて左右に分かれて表示させてくださいって言われるとフリーズしますよね。
  なのであなたが分かっていないのはcssというよりまずflexboxなのだ！

題材

• 今回のケーススタディ用に会社の名刺をHTMLとCSSで再現しました。
  • 完成形
    プログラム業界の超有名人、ほげ山さんの名刺です。
    ちなみに記事用に住所等を適当に書いてますが、弊社大阪オフィスは7Fにあります。
    
  • リポジトリ

やってみよう

• 完成形のように左右に分かれて配置したい状況とします。
  
  まずは普通にhtmlを書きましょう。

index.html

<div class="wrapper">
  <div class="header">
    <img src="./images/logo1.png" class="header_textlogo" />
    <img src="./images/logo2.png" class="header_marklogo" />
  </div>
</div>

index.scss

.wrapper {
  width: 240px;
  height: 400px;
}

.header {
  width: 240px;
  height: 400px;

  &_textlogo {
    width: 50px;
    height: 20px;
  }

  &_marklogo {
    width: 50px;
    height: 20px;
  }
}

• ブラウザで確認。
  一応補足ですが、HTMLタグはブロック要素とインライン要素という2種類あります。
  ブロック要素は名前のとおり縦に積みあがっていき、インライン要素は横に並んでいきます。
  imgタグはインライン要素なので、画像のとおり横に並びます。
  

• 「要素をなんか良い感じに並べたい。」時の必殺呪文を記載する。

index.scss

.wrapper {
  width: 240px;
  height: 400px;
}

.header {
  display: flex; // 必殺の呪文

  &_textlogo {
    width: 50px;
    height: 20px;
  }

  &_marklogo {
    width: 50px;
    height: 20px;
  }
}

• ブラウザを確認。
  
  変わらんやないかいという声が聞こえてきそうですが、少し僕に時間をください。
  今皆さんが書いた必殺の呪文display: flex;は他にもプロパティ(補助呪文)を設定することで真価を発揮します。
  display: flex;は補助呪文を使いたいがための必殺呪文と捉えると良いと思います。
  そして子要素を縦積みするか横積みするかはflex-directionというプロパティで指定が出来まして、初期値が横積みになっています。
  今回はimgタグがそもそもインライン要素なので何も変わらないように見えますが、もしも子要素がdivタグだった場合、display: flex;とするだけで子要素が横に並ぶようになります。

• 完成形のように左右に分けたい場合はjustify-contentというプロパティを設定します。

index.scss

.wrapper {
  width: 240px;
  height: 400px;
}

.header {
  display: flex; // 必殺の呪文
  justify-content: space-between; // 必殺の呪文の補助呪文

  &_textlogo {
    width: 50px;
    height: 20px;
  }

  &_marklogo {
    width: 50px;
    height: 20px;
  }
}

• ブラウザで確認。
  やったぜ。
  
  後はザクザクと補助呪文を唱えまくっていくだけです。
  めちゃくちゃ良いチートシートを配布されている方がいるので参考文献で共有しております。

余談

• 本記事を社内の方にチェックしてもらっていたところ、強強エンジニアパイセンから「justify-contentって常に画面の水平方向の話みたいに言われるけど、厳密には主軸に対して水平ってことやで」という指摘を受けました。
  分からなさ過ぎて小鹿のように震えていたところ、パイセンから以下レクチャーがありました。
  • CSSはflex-directionという補助呪文で主軸というものを決定している。
    デフォルト値はrowで主軸の流れは左から右へ向かう。
    なので特にflex-directionを触らない限りはjustify-contentは常に画面の水平方向の話と思って差し支えない。
    もしもこの値をcolumnにすると、主軸の流れは上から下へ向かう。
    justify-contentは主軸に対して水平方向なので、flex-direction: column;の状態では主軸は画面に対して垂直、すなわちjustify-contentは画面の垂直方向になる。
• コメントで補助呪文を試しまくれるサイトをご紹介いただきました。ありがとうございます！

参考文献

• 日本語対応！CSS Flexboxのチートシートを作ったので配布します
• 補助呪文がとても見やすく並んだチートシート。もうこれなしでCSS書きたくないレベル。