hiromitsuuuuu.log();

to see more to see.

第3回HTML5ビギナーズ!で「新しいCSSの仕様を色々調べてみた」と喋ってきた

10月23日(水)に、サイバーエージェントさんの会場をお借りして行われた第3回HTML5ビギナーズ!で、新しいCSSの仕様について喋ってきました。

 

解説した仕様

今回解説したのは以下の6つの仕様。FlexboxとMulti-columnはだいぶ使えるけど、その他はまだまだ仕様も不安定で絶賛実装中のものばかり。それでも、こんな未来がくるかもよ!ということで僭越ながら紹介させてもらいました。

  • Flexbox
  • Regions
  • Shapes
  • Multi-column Layout
  • Grid Layout
  • Exclusions

言い忘れたこと

Multi-columnで言い忘れたのが、「何が便利になるか」のところ。「雑誌みたいなレイアウト」ができるのが利点だけど、見た目が「ぽく」なることが重要ではないんだろうなと思った。

PCもデバイスも進化して、画面サイズはどんどん大きくなった。コンテンツもアダプティブで、広い画面に合わせてテキストが広がる。そうなると、読みにくいんだな。人間が読みやすい1行の文字数って決まっていて(何文字かは忘れたけど)、だから新聞ってああいう風になってる。

広いデバイスで、読みやすさを提供できることがMulti-columnのいいところなんじゃなかろうかと調べてて思ったのです。

サンプルコードはある?

あります!まだローカルに…汗。Git初心者なものでてこずっております…しばしお待ちを(´・ω・`)

アウトプットって、大事だ。

今回で外部のコミュニティ関連で話すのは2回目。html5j関連では初めて話させてもらったわけだけど、改めて、アウトプットって大事なんだなと。slideshareで公開したあと、400以上のはてブ、300以上のTweet、250以上のいいねをいただきました。こんなにシェアされたのは生まれて初めて…!色んなコメントを見ることができて、ああこういう反応が返ってくるんだなって勉強になりました。

「初心者向けにレイアウト系の新しいCSSをいろいろ解説」して、とお願いされたのが11月の頭くらい。flexboxはhtml5jのサイト修正をお手伝いした際にはじめて知ったレベルだし、Multi-columnは仕事で少し使ったくらい。あとの仕様は「確かそんなのあるって誰か言ってたよね」レベル。

期初で平日は余裕が無かったので、電車の中でiPad miniで調べてはEvernoteに貼り付け、週末にまとめる、そんな感じでバタバタと調べてました。CSSのエキスパートでもないのに大丈夫かな…と心配でしたが(現に前半10分くらい緊張しすぎて膝が笑ってた)、たくさんの人に見てもらえて、少しでも役に立ってよかった!「わかりやすかった」とか「参考になった」とか、すごく嬉しかったです。初心者でも、出してみるって、大事だ。

フィードバックはご褒美だな。