cssのflexを使えるようになった経緯

HTMLでレイアウトを組む際にいろいろな方法がありますが、最近はflexやgridを利用するのではないでしょうか。

自分はfloatを使用して組んできた老人なので、cssのflexに対応できずにレイアウトは人に任せることが多く修正できない状態になっていました。

デザインを作成してもらい、プログラムを組み込むといろんな場面でデザイン通りに作れないことや表示を工夫したほうがいいことがあり、修正に必要以上の時間を使っていました。

cssのプロパティが理解できていなかったため、修正もお手本そのまま使う。になっていたわけです。

tailwindcssを使うようになり、レイアウトにflexを使用することが楽になりました。

テンプレートみたいな使い方を複数覚えて使えるようになったことで、心理的な壁がなくなったことで「flex使えるじゃん」となったわけです。

最初に覚えたflexの使い方

<div class="flex">
    <div>氏名：<div>
    <div><input type="text"><div>
</div>

<div class="flex items-center">
    <div>氏名：<div>
    <div><input type="text"><div>
</div>

まずこれを使えるようになっただけでかなり進歩です。最初の一歩です。

これが使えるようになってから、最後だけ右端に寄せたり、均等に配置してみたりするぐらいが実際の利用ケースになってます。

webの開発でお金をいただいているので、できることは多い方がいいと思ってます。

使えるようにするためにサンプルを色々とみて理解しようとしましたが全然身につきませんでした。その結果、プログラムの動作だけ作りデザインは人任せを3,4年続けてしまいました。

必要なかったといえばそうなりますが、自分でもできる状態と自分ではできない状態には大きな違いがあると思っています。自分でできないと人に任せる状態になるため相手のスケジュール次第でできあがる時期が変わります。

個人で仕事をしている状態でカバーできない状況はあまりにもリスクになってしまい、作ったプロダクトが進まないこともしばしば発生してしまったり、難しい状況になってしまったわけです。

flexを理解できないと開発ができないわけではないですが、便利さは変わってきます。cssのflexを使うようになってわかったことは、便利ですね。

なぜこれを勉強しなかったのか。と思うくらい便利です。

dockerとかと同じで使い方がわかってくるとかなり便利ことがわかるものは理解するまでが大変なものが多いです。（私自身は新しい事柄への理解度が高い方ではないと思ってます）

毎回新しい知識が使えるとも限らないため10個に1個ぐらい「覚えて良かった。」があればいいと思ってます。

わからない時期は大変ですが、意外と時間が解決することが多く、試してみてわからない。半年後に「あーなるほど」となるケースが多く、種まきをしておくと意外と収穫されていくケースが多いと思ってます。

わからなくても一度試してみるのがいい。というわけです。

kazu22002の技術覚書