10月14日に広島で行われたCSS Nite in HIROSHIMA, Vol.10に登壇いたしました！ご参加くださった皆さん、ありがとうございました！参加してみた感想などを簡単にレビューしたいと思います！

↑私が10年以上利用している会計ソフト！

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

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

紹介したデモ

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

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

See the Pen Code Challenge: Flexbox – Sample Answer by Mana (@manabox) on CodePen.

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

See the Pen Center div both horizontally and vertically by Mana (@manabox) on CodePen.

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

See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen.

4. 画像のトリミング

See the Pen Image Trimming w/ object-fit: cover by Mana (@manabox) on CodePen.

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

See the Pen Image Trimming w/ object-fit: contain by Mana (@manabox) on CodePen.

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

See the Pen Sticky Heading by Mana (@manabox) on CodePen.

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

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

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

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

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

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

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

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

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