More than 1 year has passed since last update.

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

Last updated at 2023-05-09Posted at 2023-05-06

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構造としてはこうなっているんだ」と視覚的に理解するためのものです。このような↓見た目をしており、

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

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

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

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

使い方

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

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

要素の種類

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

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

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

目的のレイアウトを作る

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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