ペアプロで改めて学んだ CSS たち

🎄この記事は、2023年CAMPFIRE Advent Calendar 17日目の記事です🎄

こんにちは、エンジニアチームの miyuki です。
早いものでもうこの時期がやってきましたね。今年のアドベントカレンダーはエンジニアだけでなく他部署の方々も書いてくださり、とても良い内容になっているので是非他の記事も覗いてみてください。
相変わらずソワソワしながら書いていますが、ちょっと一息つきたい時にでもゆるりと読んでいただけると嬉しいです 😊

はじめに

今年行った施策で印象に残っているのは、直近まで行っていたということもありトップページのリニューアルと、バックエンドとフロントエンドの分離です。
いままでのトップページはスライダーでプロジェクトを表示していましたが、ほとんどのPJカードが表に見える構成に変えたり、ランキングエリアを追加するというリニューアルを行いました。
また、 CAMPFIRE はすべて Rails で書かれていましたがフロントエンドを Svelte Kit で実装することとなり、その第一弾としてトップページを Svelte Kit に載せ替えました 🚚！

いままではあまり行ってこなかったペアプロを今年はたくさん行ったので、ここからは「ペアプロで改めて学んだ CSS たち」を紹介していきたいと思います。

ペアプロで改めて学んだ CSS たち

- grid レイアウト

聞いたことはありましたが、flex box と出会ってからは「flex ベンリ！flex ダイスキ！！」だったので、flex を使えば大概のことできるし、横並びにするもの = flex だと思っていました。
ですが、grid レイアウトを使うと横幅を可変させたいときに auto-fill などを使うとめちゃくちゃ綺麗に表示してくれました、、！
また、一部の要素だけ幅を変更したい時は、flexだとたくさん指定する必要がありますが grid だと親要素に一括で指定できるのでコードもスッキリ書くことが出来ました。

- flex box 関連

上記で書いたように flex ダイスキだったので、うまく使えていると思っていましたが知らないこともありました…。（悔しい）
- flex:none;
中身としては flex-grow と flex-shrink が 0、flex-basis が auto になっています。いままでは flex: 0 0 50%; と、パーセントで横幅を指定して書いていましたが flex: none を指定すると画面幅によっての表示崩れも起きませんした。
- margin-bottom: auto;
flex のプロパティではないのですが、上下に要素を配置したいときに使うとHTMLをスッキリ書けました。
たとえば以下の右側を実装をしたい時

今までだと（ざっくりですが）こう書いていたものが、

<style>
  .contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
</style>

<div class="contents">
  <h2>たいとる</h2>
  <div class="bottom-area">
    <div>舞台・パフォーマンス</div>
    <div>金額・支援者数・残り時間エリア</div>
  </div>
</div>

margin-bottom: auto; を使うと div を一つ消すことが出来、視認性が上がりました。

<style>
  .contents {
    display: flex;
    flex-direction: column;
  }

  h2 {
    margin-bottom: auto;
  }
</style>

<div class="contents">
  <h2>たいとる</h2>
  <div>舞台・パフォーマンス</div>
  <div>金額・支援者数・残り時間エリア</div>
</div>

- gap

flex や grid で並べたときの余白指定。
今までは 子要素に padding や margin を指定して、一番最後の要素だけ指定しなおす、、ということをしていましたが、gap を使うと余白のみの指定になるのでCSSの量を減らす事が出来ました。

- webkit-line-clamp

文字列の行数指定。
いままであまり実装経験がありませんでしたが、実装する時は js を使って実装していた記憶・・・🤔こんなプロパティまで用意されているなんて・・・！CSSでサクッと実装することが出来ました。

- scroll-snap-align

要素をスクロールさせる時の表示位置を指定。
デフォルトではスクロールした分だけしか表示されませんが、 scroll-snap-align: center; を指定すると要素の真ん中までスクロールしてくれますこれまでは プラグインの slick を使うことが多かったのですが、簡単なスクロールで良い場合はこれだけでも十分な気がしますね。

- aspect-ratio

アスペクト比の指定。
これまでは全て高さの指定は避けていたのですが、画像に関しては表示のガタつき防止のために指定した方が良いとフィードバックをいただいたので、高さを指定しました。その際、画面幅によって高さが変わる画像だとたくさんメディアクエリを書く必要がありましたが、アスペクト比を指定するとメディアクエリを書かなくても綺麗に表示することが出来ました。

まだまだあったと思いますが今回は6つ紹介させていただきました。
フロントエンドってどう書いても表示できちゃうので逆にどう書くかめちゃくちゃ難しい。。。そこがまたおもしろいですけどね。

さいごに

ここまで読んでいただきありがとうございました。
前職ではWEBサイトを作っていたので、ある程度書けていましたがレビューやペアプロをしていただくと学ぶことが山のようにありました。自信をもって得意と言えるように、綺麗なコードを書けるようにどんどんアップデートしていきたいとおもいます 🙌

さて、CAMPFIREのアドベントカレンダーはまだまだ続きます 🎅🥂
明日はエンジニアの kabeさん です！お楽しみに〜！