CSS コーディング

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を知らなかった皆様、おめでとうございます。これでレスポンシブも怖くないですね!!

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

この記事をシェアする

関連記事

  • 2023.11.28

    楽しくする!便利にする!VSCodeの拡張機能

    コーディング

  • 2022.11.22

    【簡単】CSS でスクロールを促すラインアニメーションを作る方法

    CSS

    HTML5

    コーディング

    制作

  • 2022.11.15

    Wordpressで多言語対応をする方法

    コーディング

    制作

おすすめ記事

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.05.31

    超簡単!GoogleMapの色をサイトにあわせて変える方法

    コーディング

    制作

  • 2022.04.22

    【動画編集ソフト】アフターエフェクトとプレミアプロってなにが違うの?違いと使い分けを解説!

    制作

    動画

×