Zenn
✨️

超よわよわ CSS マンでも Chrome で Flexbox 使えばいい感じになるよって話

2022/12/01に公開
CSS
tech

今年も ミライトデザイン Advent Calendar をやりますよ！

https://qiita.com/advent-calendar/2022/miraito-inc

去年 のカレンダーは無事に完走できたので、今年も頑張りたいと思います！

初日はアドカレ隊長の ほげさん ( zenn ) が、サクっと投稿します。

〜 僕みたいな CSS 書かない人に 〜

スキルマップ的に、お仕事的に、CSS を触らないという人もいると思います。
僕もそうですほぼ全く触りません。

僕はたまーに気まぐれで書いてみて、「あぁ... やっぱり俺って...」ってなっちゃうよわよわ CSS マンです。

でも最近ちょっとやってみたらね、ボタンぽちぽちだけですげぇそれっぽく作れることがわかったんですよ！

Chrome ( Developer Tools ) のこの Flexbox のツールめっちゃ便利な！

箱 ( <div> ) に display: flex; だけ指定すると、ボタンが出る

押してメニュー出したら

ぽちぽちするだけで中身の配置が変わる！ ( 横並び → 縦並び )

アイコンがわかりやすいので、これ押してればなんとかなっちゃう。

調べたら 2021/04 からできるらしいけどね！
僕は今年の夏に知ったよ！

サンプル

ぽちぽちすると楽しいので、いくつかサンプルを。

縦とか横とか

適当に HTML を用意。
( display: flex; 以外はかざりなので無視で OK )

<div style="display: flex; background-color: #ccffff; width: 80%; padding: 1em;">
    <img src="https://storage.googleapis.com/zenn-user-upload/avatar/3e056388b0.jpeg" style="border-radius: 50%; width: 3em; height: 3em;">
    <img src="https://storage.googleapis.com/zenn-user-upload/avatar/3e056388b0.jpeg" style="border-radius: 50%; width: 3em; height: 3em;">
    <img src="https://storage.googleapis.com/zenn-user-upload/avatar/3e056388b0.jpeg" style="border-radius: 50%; width: 3em; height: 3em;">
</div>

初期表示 ( ↓ )

↓ みたいなアイコンを押すだけで縦並びになる ( ↓ )

flex-direction: column; が勝手にブラウザ上で追加されているので、コピーしてエディタに貼れば完成！

隙間の調整

さっきの HTML で img に margin-bottom: 2em; とかを設定しちゃうと、最後に変な空間ができる。 ( ↓ )

これをやめようと思ったら「テンプレートエンジンで for の最後だけ margin-bottom を付けない」とか「CSS の擬似クラス :last-child で調整する」とかしないとだけど、そんなのより row-gap が楽。

flex を付けた外側の箱 ( <div> ) に row-gap: 2em; を ( 手書きで ) 付けるだけ。 ( ↓ )

この「縦並べ」と「隙間調整」でだいたいのパーツは作れるのではないか。

チャット風

また display: flex; だけあてた箱 ( <div> ) を用意、今度は 2 つ。

<div style="display: flex; background-color: #ccffff; width: 80%; padding: 1em;">
    <img src="https://storage.googleapis.com/zenn-user-upload/avatar/3e056388b0.jpeg" style="border-radius: 50%; height: 3em;">
    <div style="background-color: #ffffff; border-radius: 8px; padding: 0 1em;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
</div>

<div style="display: flex; background-color: #ccffff; width: 80%; padding: 1em;">
    <img src="https://storage.googleapis.com/zenn-user-upload/avatar/3e056388b0.jpeg" style="border-radius: 50%; height: 3em;">
    <div style="background-color: #ffffff; border-radius: 8px; padding: 0 1em;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
</div>

ただ表示するとこんな感じ ( ↓ )

横の隙間は箱 ( <div> ) に column-gap: 2em; のように指定すれば OK ( ↓ )

ぽちぽちするだけでアイコンを左下にも右下にも一瞬で動かせる ( ↓ )

応用

最後に、display: flex; を入れ子にすれば望むところに配置できる例を。

<div style="display: flex; background-color: #ccffff; width: 80%; padding: 1em;">
    <div style="display: flex;">
        <div style="display: flex;">
            <img src="https://storage.googleapis.com/zenn-user-upload/avatar/3e056388b0.jpeg" style="border-radius: 50%; height: 2em;">
            <span>suzuki-hoge</span>
        </div>
        <div style="display: flex;">
            <span>✏️</span>
            <span>🗑️</span>
        </div>
    </div>
    <div style="background-color: #ffffff; border-radius: 8px; padding: 0 1em;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

初期表示 ( ↓ )

ぽちぽち結果 ( ↓ )

こういうパーツのまとまりかなーって想像できると、どこに display: flex; を付けるか決められる ( ↓ )

  • パーツ１ の中の画像と文字の高さを揃えるのは align-items: center
  • パーツ２ も同様
  • パーツ１ の中の画像と文字の隙間は column-gap: 0.5em;
  • パーツ２ も同様
  • パーツ１ と パーツ２ で距離を取るのは justify-content: space-between;
  • ヘッダ と 本文 を縦に並べるのは flex-direction: column;
  • ヘッダ と 本文 の縦の隙間は row-gap: 1em;

こんだけで意外とかなりやれる

大変そうだけど、xxx-gap 以外は本当にぽちぽちしているだけで済むので、案外できる

押せばわかるのですぐ理解できるよ！

これである程度の CSS は当てられるはずだ！

僕みたいなのでも、ぽちぽちだけで簡単なものならそれっぽく作れるようになる！

一言: Flexbox と Grid との違い

ところで、Grid というのも耳にすることがありますね。
簡単に一言で整理するとこんな感じです。

  • Flexbox は縦にしろ横にしろ一次元に並べるための仕組み

「ただ縦に並べて隙間を適当に調整したい」みたいなときは Flexbox で十分かな？

  • Grid は並べると言うより二次元上の指定した場所に置くための仕組み

「縦や横にセル結合したエクセルっぽい配置をしたい」みたいなときは Grid がいいかな？

Grid に関しては bucchi が今年のミライトアドカレで書く予定らしいので、細かいことは彼にお願いすることにします！

→ でました〜
https://zenn.dev/t_kitamura/articles/cbecc45853a959

おしまい

サンプルに em 使ってるけど、rem にすればよかったってあとで気付いた。

やっぱりよわよわだったw

でも案外それっぽくなるのは本当だよ！
試してみると面白いよ！

CSS の話はこれでおしまい、明日は kakiuchi が S3 のウェブサイトホスティングの記事を書いてくれるらしいです。

お楽しみに！

Discussion