CSS Nite in HIROSHIMA Vol.10 に登壇しました！

CSS Nite in HIROSHIMA, Vol.10

「CSS の最新テクニックを使って、一歩先取るコーディング」というセッションで登壇いたしました。CSS Nite は昨年のNite in HIROSHIMA Vol.9以来です。今回は個人的に忙しくしていた時期で、直前まであわわわしてましたが…無事終わってよかったです w

今回はFlexbox を使ったレイアウトやobject-fit を使った画像のトリミング方法、position:sticky を使った要素の固定について、ライブコーディングをしながら解説していきました。実際にコーディングする様子を見せながらの講演は初めてだったので、うまくいくかドキドキしていましたが…特に問題なく進められてホッとしました…！

紹介したデモ

サンプルコードとして紹介したものです（一部 CSS Nite でお見せしたものと若干ことなる部分があります）。ご参加くださった方も、そうでない方も、参考になると幸いです！

1. Flexbox でレイアウト組み - 基本の横並び

2. Flexbox でレイアウト組み - ボックスを上下左右中央に配置

3. Flexbox でレイアウト組み - 画像とテキストを互い違いに表示

4. 画像のトリミング

5. 画像のトリミング - 余白を表示させる場合

6. スクロールすると要素を固定

参加者からいただいたご感想

ライブコーディングすごくよかったです。

実際にデモでどうなるかどうかしてくださったので、わかりやすかったです。

polyfill を使えば、古いバージョンのブラウザにも対応できるが本当に必要か、デメリットも考えるのが大事。

スピード、見せ方がとてもわかりやすかった

flexbox の使い方がわかりやすく、今度使えそうなものがたくさんありました。

テクニックも丁寧でわかりやすくご紹介いただけて、実務にさっそく取り入れていきたいと思いました。

たくさんの嬉しいお言葉ありがとうございます！

ライブコーディングはかなり好評だったので、今後も講演の機会があれば取り入れていきたいですね！今回はすこーし持ち時間より短くなってしまったので…もうちょっと時間配分をしっかり考えながら行いたいと思います…！またイベントに参加する時は告知いたしますので、よろしくお願いします！