BLOG

ホームページ制作・Wordpress構築やHTML5やUnity3Dでのアプリ開発など
WEBやアプリ開発に関する技術的な内容をお届けいたします。

Bootstrap 4 alphaでCSS3のFlexboxを試す!

bootstrap4_flexbox

Bootstrap 4 alphaが発表されましたが、その特長の1つとしてレイアウトシステムにcss3のFlexboxが選択できるオプションが加わったことが挙げられます。
早速試してみたいと思います。

まずは、「Bootstrap 4 alpha」の公式サイトからソースコードをダウンロード。node.jsで必要なファイルをインストール

ソースコードは、「Getting Started」ページの「Download Source」からダウンロードできます。

ソースコードをダウンロードし終えたら、次にGruntでソースコードをビルドできるようにします。
Build Tools」のページに行くと、ビルド方法が掲載されています。

  1. Node.jsがインストールされていない方は、インストールします。
  2. Macのターミナル等、コマンドラインでgrunt-cliをインストールします。
    下記のコマンドを実行します。

    npm install -g grunt-cli

  3. Bootstrap 4のソースコードをダウンロードしたディレクトリに行き、下記のコマンドを実行し依存関係のあるファイルをインストールします。

    npm install

ここまでくれば、CSSとJSがビルド可能になります。

次は、FlexboxモードになるようにSASSファイルを修正します。

Bootstrapをダウンロードしたディレクトリ配下の「/scss/_variables.scss」のファイルを開き、
46行目付近の

$enable-flex:false !default;

$enable-flex:true !default;
に変更します。

最後にビルドします。

コマンドラインでBoostrapのディレクトリ直下に移動し書き出し用のコマンドgrunt dist;などを実行します。
これで/dist/ディレクトリにCSSとJSが書き出されます。
書きだされたCSSを読み込んで実際に表示を確認してみます。

Flexbox用に用意されているクラス、「row-xs-top,row-xs-center,row-xs-bottom」などを試してみます。
下記はシンプルなグリッドレイアウトのソースコードです。

表示すると下記のようになります。天地中央揃えや下揃えがきちんと表現されていますね。

Flexbox用のユーティリティクラスはまだまだ少ない気がしますが、一般的に閲覧されるブラウザがIE10以上になれば、よりフレキシブルなレイアウトが可能になりそうです。

Flexbox含め、Bootstrap 4の今後が楽しみですね。

※Flexboxモードで書きだしたCSSはこちら

1 Comment. Leave new

[…] 利用方法はこちらのサイトなどが一番わかりやすいと思います。 Bootstrap 4 alphaでCSS3のFlexboxを試す! […]