Junya03 | SCAJ2025、CSSグリッド

SCAJ2025、CSSグリッド

2025-09-28

こんにちは。今回は今月あった話をゆるっと振り返ってみます。

先月、SCAJ2025 に行ってきました！参加は 4 回目くらいですが、社会人になってからは初めての参加です。

SCAJ2025 開場前の写真

SCAJ は毎年秋に東京で開かれるコーヒーのお祭りみたいなイベントです。世界中のコーヒー豆や器具が集まり、試飲やデモンストレーションを楽しめます。

コーヒー好きならワクワクする体験が盛りだくさんで、会場全体がコーヒーの香りに包まれています ☕✨

会場に入ると、まずその広さにびっくりします！今年はBtoB（業界向け）とBtoC（一般向け）でエリアが分かれており、目的に合わせて回ることができました。

↓↓ 会場はこんな感じ！↓↓

企業ブース会場全体の写真

以前の会場は L 字型でしたが、今年は四角い形になっていて回りやすかったです。ブースの数は少し減ったように見えましたが、通路が広く、ゆっくり歩きながら楽しめました。

ここ数年でコーヒー関連の友人や知り合いも増えて、久しぶりに会えたのがとても嬉しかったです。もちろん、コーヒーを淹れてもらったり、味の違いを比べたりする時間も楽しみました。

コーヒーを淹れてもらっている写真

SCAJ はコーヒー好きなら一度は訪れたいイベントです。普段は見られないプロの技や、世界各国のコーヒーを体験できる貴重な場で、友達や家族と一緒に行っても楽しめます。

「コーヒーって奥が深いな」と改めて感じることができる、素敵な一日でした ☕✨

最近、普段使っているコンポーネントを整理していて、リスト表示用のグリッドレイアウトを見直していました。そのとき「これは便利！」と思った組み合わせがあったので紹介します。

まず、CSS で下記のように書くと、画面幅に応じて列数が自動で変わります。

// css

.grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

この方法でも十分機能しますが、画面幅が350px 未満になると、要素が縮小できずに見切れてしまうことがあります。

これはminmax()の最小値が350pxに固定されているためです。

min()関数を使うと、最小値を「350pxまたは画面幅の100％の小さい方」にできるため、画面幅が狭くなっても自動で幅が調整されます。

// css

.grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
}

これにより、メディアクエリを追加せずに柔軟なレスポンシブデザインが可能になります。実際に下記のエディタで触ってみて、動きを確認してみてください。

今月はコーヒーと技術、どちらも楽しめた月でした。SCAJ では友人に会いながらプロのコーヒーを体験し、技術面では CSS グリッドの工夫で画面幅に応じたレスポンシブレイアウトを試しました。どちらも、ちょっとした工夫や体験で楽しみ方が広がることを改めて感じた、充実した月でした ☕💻