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

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の使い方がわかりやすく、今度使えそうなものがたくさんありました。

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

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


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

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)