その他

2023.11.14

コーダー同士の情報のやり取りで効率がアップした話

こんにちは!コーダーのぶんちゃんです。

今週のGoodNewsはですね、コーディングの技術的な話です。

よくこういうレイアウトってありますよね。

お知らせやコラムなど投稿を一覧で表示する際のレイアウトです。
flexで横並びにした時、レスポンシブまで考慮して可変させたいときどうしてますか?

今までの私は

.img_area{
width:400px;
margin-right:50px;
}
.text_area{
width:calc(100% - 450px);
}

そして、今回私が知ったのが、

.img_area{
width:400px;
margin-right:50px;
}
.text_area{
flex:1;
}

可変したい要素にflex:1;と入れるだけで勝手に可変してくれるというのです。
知りませんでした。。

そしてこの話をしたら、弊社のコーダー・オガワは「私最近flexでgap使うのハマってるんですよ~!」と。え、使ってみたい!となり、直近のプロジェクトで使い始め、flexの実装が実に快適になりましたとさ。

flex:1を知らなかった皆様、おめでとうございます。これでレスポンシブも怖くないですね!!

それではまた。読んでいただきありがとうございました!

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2023.12.30

    案件を切り替える拡張機能「Project Manager」が便利!

    その他

おすすめ記事

  • 2023.11.10

    ロゴのクオリティを上げるためには「細分化」して検証する

    その他

  • 2021.04.22

    【勝手にWEBサイトレビュー#29】動きに統一感のあるコーポレートサイト

    その他

  • 2021.05.24

    初心者でもすぐに使えるjQueryが満載なおすすめ本【書評】

    その他

TAG

×