CSSのflexを練習できるツールを作ってみた

CSSでレイアウトを構築する方法はいくつかありますが、一見すると簡単そうな「上下に並べる」「左右に並べる」だけでも以下のようなポイントがあって、「いったいどのように整理・理解したら良いのか」と相談を受ける機会がありました。

- `display: flex`, `flex-wrap`, `row-reverse`, `justify-content`, `align-items`, `flex-grow`, `flex-shrink` の組み合わせ
- 横並びを意図した `flex` と `inline-block` と `float`の違い
- 左右揃えを意図した `margin: auto` と `text-align` と `justify-content` の違い
- 上下揃えを意図した `align-items` と `vertical-align`の違い
- 上下揃えを意図した `height` と `line-height` と `padding`の違い
- `margin`の相殺
- `@media` と上記の組み合わせ
- 上記の組み合わせを前提としたHTMLの構造の組み立て

さらには「不必要に使ってはいけないが、必要なら使っても良い」みたいなテクニックもあり、初心者を惑わしているように思います。

- マイナスの`margin`
- `position: absolute`
- `transform`

じゃあ初心者はどう学習したら良いのか。基本的には(月並みですが)よくある「文法の解説を探す」「サンプルの写経」をお勧めしたいです。

ただ、「`flex`だけでもここまでできる！」ということを視覚的に理解してもらうと、グッとコーディングがスムーズになることがあるので、**そこだけに特化したツール**を作ってみました。

# 対象の読者

- HTML/CSSを学習し始めて、練習問題などで数行〜数十行くらいは書いてみたことがあるが、少し入り組んだレイアウトは苦手という人。
- 「要素の中に要素」が5階層くらいになってくると、頭がごちゃごちゃになってしまう人。

# ツールの概要

このツールは、「いきなり色々な文法は分からない、でも上下左右きちんと並んだレイアウトってHTML構造としてはこうなっているんだ」と視覚的に理解するためのものです。このような↓見た目をしており、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/c229652b-908e-742d-4bd2-d2047e7c2139.png)

ボタン操作で「上下に並べる」「左右に並べる」レイアウトを組み立てることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/72a36cd2-5916-6ced-a06d-c566e907d61f.png)

レイアウトした結果どのようなHTMLの階層になっているか、デベロッパーツールで確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/1dd4238f-4741-ad41-38a0-58c4ba2a2850.png)

**あくまで確認できるだけで、コーディング作業そのものを支援するツールではない**のですが、これで「横並び/縦並びと要素の関係」を観察でき、コーディングがスムーズになることが期待できます。

なお、**"保存"機能はありません**。ツールの目的をよくご理解いただき、`flex`の理解を深めるために使っていただければと思います。

# 使い方

こちら↓をクリックするとツールが開きます。
https://yymmt.sakura.ne.jp/css-elementary-layout/

左がスマホ(SP)表示、右がPC表示です。要素をクリックするとSP/PCが連動して選択されます。

![](https://i.gyazo.com/003d1eddf77f625fe3572aad6b86a002.gif)

## 要素の種類

選択した要素を、「テキスト」「画像」「横分割」「縦分割」に変更することができます。分割すると、階層ごとに枠の色が変わります。

![](https://i.gyazo.com/8012edc5b8d54ab59dd4da35d7a66ac6.gif)

分割した中の要素をさらに「テキスト」「画像」「横分割」「縦分割」に変更することができます。

![](https://i.gyazo.com/9506cfcbec0ebf038855dbf718a5003d.gif)

「PC横/SP縦分割」では、PCでは横に分割、SPでは縦に分割します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/9504a50b-ab01-8f96-a835-241b994ccbf8.png)

## 目的のレイアウトを作る

このツールで使える要素の種類は上記の通り「テキスト」「画像」「分割」だけですが、いくつかオプションがあります。

「横分割」に「右から」を付加すると、左右が逆になります。「PC横/SP縦分割」ならPCのみ逆になります。

![](https://i.gyazo.com/5444a15beb35ad949ada62afcf8b612c.gif)

「横分割」に「折り返す」を付加すると、要素の幅で折り返すようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/4ec2ea15-cbf8-e9db-75ba-e62ae4999be9.png)

「＋」で選択した要素を複製、「ー」で削除します。

![](https://i.gyazo.com/e40e7085b3ebaded8d952106a7e4c4f5.gif)

これらの機能を組み合わせてレイアウトを組み立てていきますが、あくまでも「上下に並べる」「左右に並べる」レイアウトの練習ですので、**「もうちょっと大きく/小さく...」「ちょっとだけ左に余白を...」といったことは気にしないでください**。

`実際のコーディングの際、理解が不十分な状態で一足飛びに構造と微調整をいっぺんにやろうとすると、ソースコードが不必要に長くなりがちで、でもやっぱりHTMLの構造を変えてみたり、結果不要になっているCSSを消し忘れてしまったり、それがまた混乱の元になったり...という悪循環になってしまう、という方がいらっしゃいます。`

このツールでは「この画像とテキストが上下に並んでいる/左右に並んでいる」、「SP/PCともにできている」ところまでを作れることをゴールとしましょう。

## 要素の"上下左右が正しい"についての注意

この↓レイアウトを見て、「"テキスト"が縦に並んでしまった。横に並んで欲しいのに。」と思う方がいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/d5130ba0-f09e-5ff4-7c6c-b7d160592634.png)

しかし、これ↑は`要素は(期待通り、)横に並んでいる`状態です。要素の`中の文字`に注目してしまうと縦に並んでいるように見えますが、これは`余白が少ないので横書きの文字が折り返して縦に並んでいる`だけです。余白に余裕があれば(この場合↓は画像を小さくしてみたところ)、中の文字は横に並びます。文字の設定は変えていないのですから、この文字の部分はもともと(文字が縦に並んでいるように見えても)"横書き"だったのだと分かります。

![](https://i.gyazo.com/60ce04c21eb2481dee1305b08630fa12.gif)

このように、一見すると「期待通りでない」というのが、①要素の中のことなのか、②要素と要素の位置関係のことなのか、区別しましょう。①は余白の調整で期待通りになることがありますので、前述の通りこのツールでは無視しましょう(期待通りであるとみなしましょう)。②であればこのツールで要素の親子関係を整理するなどもう少し試行錯誤してみましょう。

## デベロッパーツールで構造を確認する

期待通りのレイアウトができたら、HTMLの構造をデベロッパーツールで確認しましょう。

![](https://i.gyazo.com/263a0baf21201f4acb1837dca000308c.gif)

HTMLの構造(どの要素にどの要素(画像やテキスト)が入っているか)や、`flex`アイコンの付記されている要素に注目しましょう。もしすでに実際にコーディングを進めているページがある場合は、同じようにデベロッパーツールでHTMLの構造や`flex`が一致しているか確認してみましょう。

例えばこちら↓のように、`flex`アイコンの付記されている要素`1`に注目し、その小要素`2`が横並びになっていることを確認。画像やテキスト`3`はこの`flex`から見ると孫要素なので(`flex`の影響を受けずに)縦並び。さらにこの`flex`は`@media`内に書かれている`4`ので、PC版のみ横並びで、SP版は縦並び。など、しっかりと観察しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/aff9c485-724c-28bb-c25d-11a7e3f2932e.png)

デベロッパーツールの使い方については、こちら↓の記事もご参考ください。

https://qiita.com/yymmt/items/c3a015fa97d167ca0e6c

ところで、`__tx`, `__im` や `c1`, `c2`, ... はツール独自の属性です。参考にされる場合は意味の通った名前にしましょう。また、ツールではすべて`<div>`タグでできていますが、レイアウトに応じて適切なタグを使いましょう。

## 高度な使い方

### 任意の class を設定する

要素ごとに任意の class を設定することができます。この↓例では、「横分割」の要素に `container`, 星の画像に `star` という class を設定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/90e4911a-5f97-c1ca-a966-0d46c1817560.png)

デベロッパーツールの`ソース → frame.html → style.css`には任意の css を記述可能です。この例では、

- `container` に `position: relative`
- `star` に `position: absolute`

を設定し、星の画像を重ねています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754122/3b7ace9c-ec76-cef9-a02b-65887d7595a5.png)

ただ、これはこのツールの本来の目的である`flex`の理解を深めることとは関係ありませんので、おまけ機能だと思ってください。

# まとめ

「`flex`だけでもここまでできる！」ということを視覚的に理解してもらうためのツールをご紹介しました。要素の上下左右の位置関係が決まってしまえば、あとは微調整で何とかなる(後から「やっぱりHTMLから作り直しだ！」ということにはならない)ことが多いです。

- `flex`の使い方はこのツールで感覚的に理解・会得しよう
- それ以外の微調整に関するCSSは組み合わせがすごく多いので、暗記するのではなく都度調べよう

といった温度感がお勧めです。どなたかの一助になれば幸いです。