• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

リクルートサイトはこちら >

さらに万能になったBootstrap4を使いこなす

2018年8月17日

  • このエントリーをはてなブックマークに追加

こんにちは!
デザイナーの伊東です。

先日、Bootstrap4についてのセミナーに参加して来ました。
ALAKIでは、コーディングのテンプレートに1部Bootstrapのスタイルを採用しているくらいで、
完全にBootstrapをベースにサイト制作をすることはありませんでした。
Flexboxへ完全に対応していなかったことや、
bootstrap独自のスタイルを打ち消すCSSを用意する手間などがおもな原因です。

しかし、今回のセミナーで新しいバージョンのBootstrap4の新機能を知り、
その便利さや汎用性からテンプレートをBootstrap4ベースに移行することも検討しています。
現在は進行中の案件でテスト運用ているところです。

今回はどういった点が強化されたのかをご紹介します。

この記事の目次

  • 1 Flexboxへ対応
  • 2 メディアの対応サイズが4つに
  • 3 横幅100%のコンテナ
  • 4 新しいコンポーネント
  • 5 まとめ

Flexboxへ対応

個人的にはFlexboxへの対応が一番嬉しいポイントです。
今やFloatよりもFlexboxを使うシーンが圧倒的に多いですが、
Bootstrap3では完全に対応していない状態でした。

そのため、ALAKIのコーディングテンプレートでは、
独自のFlexbox用のスタイルを用意して使用していました。

Bootstrap4ではFlexbox関連のクラスがとても充実しており、
メディアサイズに応じて細かく指定することができます。

指定できるクラスは以下の通りです。

基本設定

.d-flex display:flex
.d-(sm)-flex ()内のサイズ以上の時にdisplay:flex

並べる方向

.flex-row 左から横並び flex-direction: row
.flex-row-reverse 右から横並び flex-direction: row-reverse
.flex-column 上から縦並び flex-direction: column
.flex-column-reverse 下から縦並び flex-direction: column-reverse

横方向の整列

.justify-content-start 左揃え justify-content: flex-start
.justify-content-end 右揃え justify-content: flex-end
.justify-content-center 中央揃え justify-content: center
.justify-content-between 両端から均等配置 justify-content: space-between
.justify-content-around 等間隔で配置 justify-content: space-around

縦方向の整列

.align-items-start 上揃え align-items: flex-start
.align-items-end 下揃え align-items: flex-end
.align-items-center 中央揃え align-items: center
.align-items-baseline ベースライン揃え align-items: baseline
.align-items-stretch 縦にいっぱいに伸ばす align-items: stretch

メディアの対応サイズが4つに

Bootstrapまでは3つのメディアサイズに対応してスタイルを変化させることができましたが、Bootstrap4では1つ増えて、4つのメディアサイズに対応可能です。

sm 576px未満
md 768px未満
lg 992px未満
xl 1200px未満

上記のsm、mdなどのサイズを表す文字は、各クラスと合わせて使います。
試しに、先ほどのFlexboxのスタイルにサイズ指定を加えると以下のようになります。

1
2
.d-sm-flex
→576px未満はdisplay:flex;

横幅100%のコンテナ

Bootstrapの.containerといえば、横幅の最大値が決められており、
ウィンドウサイズが大きくなった時は最大値以上は大きくならないように制御されていました。

具体的には、通常の.containerはmax-width: 1140px;というサイズが指定されます。

Bootstrap4からは、横幅100%まで広がる.container-fluidが用意されています。
.container-fluidにはmax-widthが指定されず、width:100%;という値が指定されています。

ちなみに”-fluid”というクラス名は画像に対しても指定できます。
.img-fluidというクラスを画像につけると、親要素の幅に合わせて伸び縮みする
レスポンシブ対応になります。

新しいコンポーネント

Bootstrap4では新しいコンポーネント(パーツ)も増えました。
いくつか新登場のコンポーネントをご紹介します。

カードコンポーネント

ブログの記事一覧のような見せ方の時によく使われるレイアウトが、
カードコンポーネントです。
下記のような記述で再現できます。

1
2
3
4
5
6
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

スクリーンショット 2018-08-17 7.57.32

カルーセルコンポーネント

カルーセルスライダーもBootstarp4では標準で用意されています。
コントローラ、ページャーの表示/非表示など、細かい設定も可能です。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=777&fg=555&text=First slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=666&fg=444&text=Second slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src=".../800x400?auto=yes&bg=555&fg=333&text=Third slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

スクリーンショット 2018-08-17 8.03.29

まとめ

いかがだったでしょうか。
Flexboxへの対応、コンテナの100%対応、新しいコンポーネントの追加により、
現在のWebサイト制作の現場でより使いやすいフレームワークに進化した印象です。

Bootstrapをそのまま使うと、デザインの部分でいわゆる”Bootstrapっぽさ”が出て来てしまうので、
部分的にはBootstrapのスタイルを打ち消すようなCSSを追加する必要があります。

それぞれの利用シーンに合わせて、適切なCSSテンプレートをご用意されてみてはいかがでしょうか。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • スクリーンショット 2018-02-16 1.45.20

    遅延読み込みでWebページを高速化!jQuery Lazy Loadの使い方

    16 2月, 2018

  • スクリーンショット 2018-02-01 23.59.43

    Creative Cloud Extractを使ってPSDからCSSを自動生成!コーディングを効率化する方法

    2 2月, 2018

  • 2b56af4cae58a76b18979a678f6a8a4b_m

    レスポンシブ対応時にクリックイベントが、うまく動作しない時の対処法

    23 2月, 2018

デザイナー募集
プログラマー募集
  • Next story Laravel5.6でテンプレートエンジン「Twig」を使えるようにしよう!
  • Previous story 第6回・7回「ALAKI ◯◯Lab」を開催します!

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.