2017/3/16

Web制作

「Flexbox漬けハンズオンセミナー」に参加しました

CSS Nite in KOBE, Vol.22 「Flexbox漬けハンズオンセミナー」に参加しました。
http://cssnite-kobe.jp/vol22/
ハンズオンという名の通り、ノートPCを持ち込んで、ひたすらガリガリとFlexboxをコーディングして動作を確認する4時間でした。
Bootstrap4の解説もあり、そちらも興味津々で伺いました!
講師はKDDIウェブコミュニケーションズの阿部 正幸さんでした。ありがとうございました!

Flexboxの対応ブラウザ


「Can I use」
http://caniuse.com/#search=flexbox
Flexboxと入力すると現状のサポートブラウザがわかります。
古いIEやアンドロイドでは表示できないようですが、もう実務でも大丈夫じゃないか、というお話でした。

ちなみに、去年秋にリニューアルいたしましたkunugi designのサイトは、ところどころFlexboxでレイアウトを組んでいます。
アクセス解析で非対応ブラウザの割合を調べた結果、2.6%でした。

IE8・9の対応

IE8・9の対応が必要な場合の対策として「flexibility.js」が紹介されました。
https://github.com/jonathantneal/flexibility

上記flexibility.jsをダウンロードし、HTMLに読み込み

flexboxを使いたいクラスに対して-js-の指定

Flexbox実装

Flex containerとFlex item

display:flex;を指定した要素が「Flex container」となり、その子要素が「Flex item」となる

See the Pen flexbox01 by kunu (@k_d_n) on CodePen.

flex containerに対するプロパティ

  1. flex-direction ー flex itemを横並びか縦並びにする
    flex-direction:row(初期値) | row-reverse | column | column-reverse

    See the Pen WpEPwR by kunu (@k_d_n) on CodePen.

  2. flex-wrap ー flex itemの折り返しを指定
    flex-wrap:nowrap(初期値) | wrap | wrap-reverse

    See the Pen flex-wrap by kunu (@k_d_n) on CodePen.

  3. flex-flow ー flex-directionとflex-wrapのショートハンド
    flex-flow:flex-directionの値 flex-wrapの値(初期値はrow nowrap)

    See the Pen flex-flow by kunu (@k_d_n) on CodePen.

  4. justify-content ー 左右中央寄せの指定
    justify-content:flex-start(初期値) | flex-end | center | space-between | space-around

    See the Pen justify-content by kunu (@k_d_n) on CodePen.

  5. align-items ー 縦並びの位置を指定
    align-items:flex-start | flex-end | center | baseline | stretch(初期値)

    See the Pen align-items by kunu (@k_d_n) on CodePen.

  6. align-content ー 複数行にまたがった時の縦並びの位置の指定
    align-content:flex-start | flex-end | center | space-between | space-around | stretch(初期値)

    See the Pen align-content by kunu (@k_d_n) on CodePen.

flex itemに対するプロパティ

  1. order ー 並ぶ順番を指定
    order:数字を入力(初期値は0)

    See the Pen order by kunu (@k_d_n) on CodePen.

  2. flex-grow ー 他と比べて幅が大きくなる指定
    flex-grow:数字を入力(初期値は0)

    See the Pen flex-grow by kunu (@k_d_n) on CodePen.

  3. flex-shrink ー 他と比べて幅が小さくなる指定
    flex-shrink:数字を入力(初期値は1)

    See the Pen flex-shrink by kunu (@k_d_n) on CodePen.

  4. flex-basis ー 幅をpx固定
    flex-basis:XXpxなど指定 ただし数値は固定ではない(初期値はauto)

    See the Pen flex-basis by kunu (@k_d_n) on CodePen.

  5. flex ー flex-growとflex-shrinkとflex-basisのショートハンド
    flex:flex-growの値 flex-shrinkの値 flex-basisの値(初期値は0 1 auto)

    See the Pen flex by kunu (@k_d_n) on CodePen.

  6. align-self ー Flex Item個別の縦並びの位置を指定
    align-self:auto(初期値) | flex-start | flex-end | center | baseline | stretch
  7. See the Pen align-self by kunu (@k_d_n) on CodePen.

様々なFlexboxレイアウトの参考に「Flexbox Patterns」


「Flexbox Patterns」
http://www.flexboxpatterns.com/home
Flexboxの使用例とソースが公開されています。
ヘッダーのナビゲーションの並び方やカード型コンテンツなど、参考になりそうなスニペットが掲載されています。
このサイトいいですね!

Bootstrap4

実務でBootstrap3を何度か使用しましたが、4はまだ使ったことがありません。
現在はalpha.6。以前のalpha.5に比べて、Flexboxがしっくり使いやすくなっているそうです。
α版は実務ではまだ早いかなというお話でした。
早くβ版が出て欲しいです!

セミナーでは、実際にBootstrap4をコーディングし、色々なコンポーネントを入れてみました。
今後、振り返って必要そうなところをいくつかメモ。

対応ブラウザ

最新版のバージョンに対応しているとのことでした。
http://v4-alpha.getbootstrap.com/getting-started/browsers-devices/

ブレイクポイント

Bootstrap3までは3つでしたが、4つに増えました。
https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints

Flexbox用のclass

Flexboxを指定する専用のclassが設定されていました。class名もわかりやすい!
https://v4-alpha.getbootstrap.com/utilities/flexbox/

navbar設定

navbarの固定もclass指定で簡単に行えるようです。
https://v4-alpha.getbootstrap.com/components/navbar/

「Scroll Spy」という方法が紹介されました。
表示位置に合わせて、該当メニューのactiveが自動に変更されます。
シングルページのナビゲーションなどでページ内リンクをする場合にめっちゃいい!
https://v4-alpha.getbootstrap.com/components/scrollspy/

最後に

長丁場のハンズオンセミナー、表示も重量も重いへっぽこWindowsを抱え、長距離移動も相まって帰宅後はヘトヘトになりました^ ^。

tableレイアウトからfloatレイアウトに変わった13〜4年前・・・。
あの頃も脳みそ爆発させながらコーディングしていましたが、よく考えたらfloat:rightかleftかclearかcleafixくらいしかない!!
Flexboxのプロパティは12個。少ないようで、多い!!
また、Flex Itemが横並びか縦並びかによって、基準が変わってより複雑になる!!
特にflexプロパティは頭がこんがらがる!!
復習と思いこの記事を書きましたが、まだまだ難しいです。。間違っていたらごめんなさい。。こっそりご指摘ください。。

今年は自分のサイトを2つ公開するのが目標なので、ぜひBootstrap4を試したかったのですが、それまでにβ版が出ないかなあー。

Share on Facebook11Tweet about this on Twitter

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

こちらもあわせてどうぞ

    関連する記事は見当たりません…