LoginSignup
1
2

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-05-06

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

  • display: flex, flex-wrap, row-reverse, justify-content, align-items, flex-grow, flex-shrink の組み合わせ
  • 横並びを意図した flexinline-blockfloatの違い
  • 左右揃えを意図した margin: autotext-alignjustify-content の違い
  • 上下揃えを意図した align-itemsvertical-alignの違い
  • 上下揃えを意図した heightline-heightpaddingの違い
  • marginの相殺
  • @media と上記の組み合わせ
  • 上記の組み合わせを前提としたHTMLの構造の組み立て

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

  • マイナスのmargin
  • position: absolute
  • transform

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

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

対象の読者

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

ツールの概要

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

image.png

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

image.png

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

image.png

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

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

使い方

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

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

要素の種類

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

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

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

image.png

目的のレイアウトを作る

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

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

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

image.png

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

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

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

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

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

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

image.png

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

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

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

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

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

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

image.png

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

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

高度な使い方

任意の class を設定する

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

image.png

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

  • containerposition: relative
  • starposition: absolute

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

image.png

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

まとめ

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

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

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

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2