LOG IN

Bootstrap4 alpha.6

by kuroko

CSS Nite in KOBE Vol.22に参加して

2月18日に開催されたCSS Nite in KOBE Vol.22へ行ってきました。「Flexbox漬けハンズオンセミナー」ということで、約4時間みっちりFlexboxと向き合ってきました。前半はFlexbox、後半はBootstrap4と大きく2部構成でした。最後JavaScriptの話もあり、盛りだくさんの内容だったかなと思います。4時間とはいえ、あっという間。ハンズオン楽しいですねー。

Flexboxは、AED-LABO第14回 高橋さん「注目のCSSプロパティ flexboxを使ってみよう!」説明していただいてから、実案件でも使いはじめたのですが、なかなかプロパティが覚えられず...今回もハンズオンでいざこれ作ってみてってなると、プロパティを見直しながらだったりと、自分の中でまだ曖昧なのを実感。実際にいろいろと作ってみないと定着しないですね...。それにしても、やっぱりFlexbox最強!

さて、わたしの狙いは後半のセッションのBootstrap4。現在のバージョンはalpha.6。beta版まであと一歩といったところでしょうか。Bootstrap3自体も、Grid systemくらいしか使ってなかったのでちゃんと聞いてみたかったんです。今回はBootstrap4でもFlexboxの箇所を中心におさらいしてみたいと思います。

Bootstrapはフレームワークとして有名で、多くのサイトで使用されているのをみかけます。HTML、CSSだけでなく、jQueryをベースとしたJavaScriptのコンポーネントや、グラフィックアイコンなどが用意されています。

Bootstrap4はGrid systemのブレイクポイントが4つになった

Bootstrap3では、デフォルトでは750px、970px、1170pxの3つのブレイクポイントだったのですが、次のように4つになって、さらに細かく分けられるようになりました。

Grid system · Bootstrap

Grid system · Bootstrap

等間隔にしたい場合は、「.col」だけでも指定もできるようになったようです。これは、Grid systemにFlexboxが使われるようになったからですかね!

また、これらのブレイクポイントに合わせて、「.hidden-**-down」をつけると表示をなくしたり、「.hidden-**-up」で表示したりすることもできます。(**には、Grid system同様「sm」や「md」などがはいります)

Responsive utilities · Bootstrap

Responsive utilities · Bootstrap

Flexboxのプロパティを指定できる

例えば垂直位置をセンターに配置したいとき、「align-items-center」を親ボックスにつけることで、アイテムを垂直位置に配置できます。(main-axisが水平で左から右場合です)

See the pen by @kurokoro on CodePen

他にもFlexboxのプロパティ名に似た命名で、クラスをつけることができるようです。

flex containerにつけるもの

水平配置 justify-content-start justify-content-center justify-content-end

justify-content-around justify-content-between
垂直位置 align-items-start align-items-center align-items-end

flex itemにつけるもの

個別のcolの垂直位置 align-self-start align-self-center align-self-end

ComponentsのNavbarもFlexboxに

全体「.navbar」がflex container、さらに「Home」からのメニューにもflexを指定しているので、Flexboxを入れ子で使っています。コードはこちら。幅が足らずResultはハンバーガーメニューになってしまっているのですが、要素の検証で見ると「display: flex」が設定されているのがわかります。

See the pen by @kurokoro on CodePen

ナビゲーションも、いろいろとカスタムすることができるようです。
例えば、スクロールしてもナビゲーションが上部に固定される「sticky-top」

<nav class="navbar sticky-top navbar-toggleable-md navbar-light bg-faded">

スクロールにあわせて、ナビゲーションをアクティブにできる「data-spay="scroll"」
アクティブになる位置を調整できる「data-offset」

<body data-spy="scroll" data-target="#navbarSupportedContent" data-offset="100">

これらを使うと、普段CSSとJavaScriptで実装しているものが、一瞬でできてしまいますね。
めっちゃいいやないですか!

まとめ

今回講師をしてくださった阿部正幸さん(KDDI ウェブコミュニケーションズ)は、Bootstrapのセッションのはじめに「もはや使わない理由はない...」と言っていましたが、まさに実感できるようなセッションでした。Grid systemやその他用意されたComponentsなどはもちろん、JavaScriptでも結構いろんな値をとることができるようです!個人的に嬉しいのは、 CSSの命名を考えなくていいとこですかね(笑)もちろん、自分でカスタムするところはつけないといけないですが、結構命名に迷うのでフレームワークを使うとそのあたりはだいぶ解消されるのかなと...

Bootstrapを使うには、Bootstrapを考慮したデザインでないとなかなか難しいなと思っていましたが、Grid systemはGutterもカスタマイズできますし、ブレイクポイントの調整できます。Bootstrap3のカスタマイズのページを見ても、かなり細かく設定ができて使いたいところだけを使えるので、ある程度デザインに合わせて使うこともできそう。Grid systemだけしか使ってないので、他のものも使ってみようかと思いました。Bootstrap4はまだalpha版なので変わる可能性もあるそうですので注意!


kuroko
OTHER SNAPS