HOME  /WordPress(応用)
 /BootstrapとFlexboxの特徴と違い
2020年03月22日

BootstrapとFlexboxの特徴と違い

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、今回のサイト改定ポイントはここにあります。

これをCSSで実現する方法としてBootstrapとFlexboxが挙げられます。

両者ともCSSでデバイス幅をメディアクエリ(@media)で、PCの場合、タブレットの場合、スマホの場合に分けてコントロールします。

下記に両者の特徴と違いを解説します。

1.Bootstrapの場合

Bootstrap3は上記のメディアクエリ設定があらかじめ用意されています。

よってユーザはクラスを指定するだけで使える事が特徴です。

1-1.Bootstrapのブレークポイント

Bootstrapのブレークポイントは下記になります。

  モバイル タブレット   デスクトップ① デスクトップ②
表示幅(px)  ~767  768~991  992~1199  1200~
名前  xs  sm  md  lg

1-2.Bootstrapのグリッドシステム

下記プログラムとCSSは、4個のボックスをBootstrapのグリッドシステムで表示しています。
尚、Bootstrapのグリッドシステムは横幅を12等分して、ここでは何個使うか?で指示します。

<div class="container">
  <div class="row">
    <div id='test_waku' class="col-xs-6 col-sm-4 col-md-3">1</div>
    <div id='test_waku' class="col-xs-6 col-sm-4 col-md-3">2</div>
    <div id='test_waku' class="col-xs-6 col-sm-4 col-md-3">3</div>
    <div id='test_waku' class="col-xs-6 col-sm-4 col-md-3">4</div>
  </div>
</div>

CSSは下記になります。

#test_waku{border:1px solid #c0c0c0;}

上記プログラムの解説は下記になります。

class=”container”は、Bootstrapのコンテナです。

class=”row”は、グリッドシステムのコンテナです。

③この中に4個のブロック(1,2,3,4)が記述されています。

<スマホに表示した場合>

col-xs-6は、表示画面がスマホ(xs)の場合は6グリッド使いなさい。という指定です。

よって2個で12グリッドになる為、下記の様に2行で表示されます。

<タブレットに表示した場合>

col-sm-4は、表示画面がタブレット(sm)の場合は4グリッド使いなさい。という指定です。

よって3個で12グリッドになる為、4番目だけが2行目にいき下記の様に表示されます。

<PCに表示した場合>

col-md-3は、表示画面がディスクトップ(①md)以上の場合は3グリッド使いなさい。という指定です。

よって4個で12グリッドになる為、1行で表示されます。

(lgは指定していませんがcol-mdは、md以上を意味しています)

 

1-3.Bootstrapのその他の特徴

Bootstrapは自分でCSSを記述しなくてもBootstrapのクラスを指定するだけで使えるのが最大の特徴です。

Bootstrapはグリッドシステム以外に色々な部品(ナビゲーション,トグルボタン,タブ,表)等が用意されており、CSSの記述なしで使える便利なツールです。

2.Flexboxを使うレスポンシブデザイン

Flexboxを使って、上記のBootstrapサンプルと同様な画面を作る為には下記の様に行います。

2-1.前提とするブレークポイント

このサイトのブレークポイントはBootstrapの設定をそのまま利用しています。

  スマホ タブレット PC
表示幅(px) ~767 768~991 992~
名称 xs sm pc

2-2.プログラムとCSS

下記プログラムはid=’fx-container’の中にid=’test_waku’を4個書く事を意味しています。

<div id='fx-container'>
  <div id='test_waku'>1</div>
  <div id='test_waku'>2</div>
  <div id='test_waku'>3</div>
  <div id='test_waku'>4</div>
</div>

Flexboxは親要素と子要素から構成させます。

上記サンプルでは#fx-container(親要素)の中に#test_waku(子要素)が4個あります。

プログラムはシンプルですが、Flexboxの指定やブレークポイント処理をCSSで記述する必要があります。

#fx-container{
	display:flex;
	flex-wrap:wrap;
margin:0 5%;}
#test_waku{border:1px solid #c0c0c0;   /* PCの場合 */
width:25%;}
@media screen and (min-width:768px) and (max-width:991px{    /* タブレットの場合 */
#test_waku{width:33.33%}
}
@media screen and (max-width:767px){   /* スマホの場合 */
#test_waku{width:50%}
}

#fx-container(親要素)にdisplay:flex;を指定する事により#test_waku(子要素)はFlexboxのコントロール下に入る事を宣言します。

flex-wrap:wrap;はFlexboxのオプションで、1行で表示できない時は次の行にいけ!という命令です。
(上記の指定をしないと枠を縮小して1行で表示します)

#test_waku(子要素)の表示幅は%で指定します。

・PCの場合は子要素は幅を25%にしているので4個で表示されます。

・タブレットの場合は幅を33.33%に指定しているので3個で一杯になり4個めは2行目に書かれます。

タブレット判定:@media screen and (min-width:768px) and (max-width:991px)

・スマホの場合は幅を50%に指定しているので2個で一杯になる為で2行で表示されます。

スマホ判定:@media screen and (max-width:767px)

尚、Flexboxでは、flex-wrap以外にも色々なオプションコマンドがありますがこの辺は別の投稿で詳しく説明します。

3.Bootstrapとflexboxの違い

上記の例では単純なBOXを4個並べた例なのでBootstrapとFlexboxは、たいして違わない様に見えますがこの両者は根本的に異なります。

Flexboxは行単位で設計していきます。

ヘッダを作る場合は1行目にサイト名とお知らせボタン、2行目にサイト解説と検索ボタン等です。

また商品表示等で複数行表示(flex-wrap:wrap;)の場合も、個々の子要素の高さが異なってもフレキシブルに並べてくれます。

下記事例はNASシリーズのみがキャンペーン対象の為、各BOXの表示高さが異なった例です。

 

一方、Bootstrapは列で設計していきます。

ヘッダをBootstrapで書く場合は2列表示にして、1列目にサイト名とサイト解説、2列目にお知らせボタンと検索ボタンを配置する等です。

そうすると1列目のサイト名と2列目のお知らせボタンは独立しているので、横位置が合わない場合は色々なテクニックを使って微調整します。

また商品を横に並べる場合も、個々の商品の高さが異なると画面が崩れる為、高さを合わせる為に色々なテクニックを使って位置調整します。

いづれにしてもBootstrapの場合は微調整が難しいのでFlexboxの方がお勧めになります。

 

私の最近の開発方針は「Bootstrapの部品+Flexboxによる画面デザイン」で行っています。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(応用編)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wprdpress-ad」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

今まではWordPressの更新にあまり気を使いませんでしたが、WordPress5.5に更新しようとするとエラーが発生して、更新できない事態に遭遇しました。そこで5.5に更新する裏技を紹介しています。

ここでは「WP-Mail-SMTP」プラグインと「Gmail API」を使ってWordPressからメールを送る方法を解説します。特徴はGoogleのセキュリティ審査で警告は出ないが、設定と運用が面倒な事です。

ここでは「WP-Mail-SMTP」プラグインと「Googleのアプリパスワード」を使ってWordPressからメールを送る方法を解説します。特徴は簡単で運用が簡単だがGoogleのセキュリティ審査で警告がでます。

Wordpressのセキュリティ強化の方法として「SiteGuard WP Plugin」と「Google Authenticator」の使い方を解説しています。

「Velvet Blues Update URLs」はWordpressのプラグインです。よって、WordPress稼動中にURLを変更するツールです。これを使ってサイトのURLを変更する方法を解説しています。

WordPressを構築した後、URL変更をしたい等のニーズが発生しますが、この時に重要なのはWordPressの稼働環境を理解する必要があります。ここでは「WordPressの稼働環境」と「MariaDBの中の構造」を解説しています。

「PHP7.0」から「PHP7.3」に変更したや、画面が途中で表示されないという問題が発生しました。この時に対応した内容を紹介しています。

「PHP Compatibility Checker」で「File has mixed line endings; this may cause incorrect results」の警告が出た時の対処方法を解説しています。

Jqueryでコントロールするページネーションです。
デバイスに全リストを送り、Jquryで何処を表示するか?のコントロールをします。

PHPでコントロールするページネーションを投稿ページ等に配置すると動作しない事があります。
これを解決する方法を解説しています。

このドキュメントではビジュアルエディタでモーダルウィンドウを使ったコンテンツを作成する方法を解説しています。更に1ページの中に複数のモーダルウィンドウ定義があっても対応できるJqueryにしています。

ビジュアルエディタで文書を作成する時、ボタンを作成したい時があります。
ここでは下記のBootstrapのボタンをビジュアルエディタで利用する方法を解説します。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

親テーマのビジュアルエディタのCSSが「editor-style.css」でない場合はTinyMCE Advancedプラグインを利用するのに一工夫が必要になります。
ここではその解決方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

ビジュアルエディタの操作画面に幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。

広告を読み出すHTMLをそのまま記述すると、プログラムが見づらくなります。 その対策として関数を使う方法もありますが、ここではWordPressのウィジェット機能を使う方法を解説します。 1.サイドバーにAdSense広 […]

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「Compress JPEG & […]

WP Mail SMTP等でGMAILのSMTPサーバを利用する場合は、「アプリパスワード」又は「Google Cloud Platform」を利用する必要があります。ここでは「アプリパスワード」の設定方法を解説しています。

SynologyのDSMで80/443以外のポート番号を使ったWebサイトを構築する方法を解説しています。

SynologyでWordPressのURL変更を「Search-Replace-DB」で行う為には、ポート番号指定でDBを見に行く必要があります。ここではこの使い方を解説しています。

wordpress関数のwp_mailを使った事例を解説しています。このフォームのボタンはBootstrapで、ダブルクリックによる二重送信防止機能も付けています。

このコンテンツはこのサイトのフッタページのデザインを解説した物です。

このコンテンツはこのサイトのリストページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。またページ送りはBootstrapのページネーションを利用しています。

このコンテンツはこのサイトの投稿ページのデザインを解説した物です。ページデザインはFlexboxを採用して左にコンテンツ、右にウィジェットを配置しています。

PHPプログラムでコントロールするページネーションです。
やり方はWordPressのページネーションからデータを取得し、それをBootstrapのページネーションフォーマットで出力しています。

PC画面ではサイドバーがあっても良いが、幅が狭いスマホではこのエリアが確保できない。そこでスマホの場合は自動的にBootstrapのドロップダウンメニュに置き変えるサイドーバーの作り方を解説しています。

このコンテンツはこのサイトの固定ページのデザインを解説した物です。ページデザインはFlexboxを採用しています。またトップページはfront-page.phpを利用しています。

パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。そこでここでは自作のパンくずを作る方法を解説しています。

Bootstrapのインプットグループ機能を使った検索BOXを作成した事例です。検索BOXは関数化してボタンの色を指定できる様にしています。

Bootstrapのナビゲーション・バー(Navbar)機能を使うとスマホ画面がスマートになります。但しデフォルトでは使いづらいのでNavbarボタンの関数化とWordPressメニュを使う方法を解説しています。

Bootstrapのナビゲーション・バーとflexboxを使ったヘッダの作成事例です。Bootstrapのナビゲーション・バーを使う事により、スマホのヘッダ画面が簡単に作れます。またFlexboxを使う事によりPCやタブレットのヘッダ画面が簡単で綺麗なメニュが作れるようになりました。

モーダルウィンドウとは新しいウィンドウを表示し、その操作が完了するまで親ウィンドウの操作ができないタイプのウィンドウのことです。ここではBootstrapのモーダルウィンドウ機能をビジュアルエディタで使う方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってBOX全体がリンク対象になるBOXを作成する方法を解説しています。

Bootstrapを導入するとBootstrapが持っているアイコンフォントが使える様になります。一方、WordPressもアイコンフォントを持っています。ここではこれらの使い方を説明しています。

ここではビジュアルエディタでタブ切替ができるコンテンツを作成方法を解説しています。更にここでは1ページに複数のタブ要素があっても対応できるjqueryプログラムにしてあります。

TinyMCEのスタイルは1つの段落に対する定義になります。よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。ここではその作り方を解説しています。

TinyMCEで画像を取り扱うポイントは、画像に枠を付ける場合はどうするのか?と画像のレスポンシブ化は、どの様に実現するか?になります。ここではこれらの設定方法と使い方を解説しています。

このドキュメントではビジュアルエディタの段落、h2~h5及びリンクの設定とリンクの貼り方を解説しています。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

ビジュアルエディタで文書を作成した際にどのフォントを使うか?は悩ましい所です。ここではどの様なフォントを指定するとどの様なフォントで表示されるのかを解説しています。

ビジュアルエディタで綺麗な表を作成する為に「TinyMCE Advanced」と「Bootstrap」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

Flexboxは素晴らしい機能ですがプロパティの設定に悩まされます。本稿では具体的な事例を挙げながらFlexboxの使い方を解説しています。

PHPプログラムで表示するデバイスの種類が判ればプログラミングが簡単になります。そこでここではデバイス種類を取得する関数とデバイスの画面サイズを取得する方法を併用して、実使用上問題ない方法を解説しています。

画面サイズを取得する為には①セッション機能をONにする。②ajaxを使ったJqueryプログラム③ajaxからのデータを受け取るphpプログラムが必要になります。またajax経路はWordPressのデフォルト経路ではなく独自経路を使っています。

WordPressで用意されている関数、is_mobileやwp_is_mobileを利用すると、アクセスしてきたデバイスの種類を意識したPHPプログラムを作成する事ができます。ここではこの設定方法と使い方を解説しています。但し、これは画面サイズではありません。

ここでは整形済みテキスト(pre)の設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

Bootstrapのモーダルウィンドウの機能をビジュアルエディタで使うとどうしてもBootstrapの仕様の制限を受けます。
そこでこの投稿では自作のモーダルウィンドウの作り方を解説します。ここでは背景色の変更やコンテンツエリア幅の変更を可能としています。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで利用する方法を解説しています。更に1ページに複数のコラップスがあっても対応できるJqueryにしています。

TinyMCEのデフォルト設定ではインデントはpタグとimgタグしが使えません。またCSSを更新した時にスーパリロードしないと画面が更新されない等の問題点もあります。ここではこれらの問題点を解決して使い易いTinyMCEの設定方法を解説しています。

ビジュアルエディタのCSS「editor.style.css」を充実させると操作性は良くなりますが、「style.css」を維持する事が大変になります。ここではその管理方法の一例を紹介しています。

TinyMCEの仕様は親テーマのeditor-style.cs、子テーマのeditor-style.cssの順番に読み込みます。ここでは子テーマのeditor-style.cssだけを使う方法を解説しています。

Bootstrapはグリッドデザイン以外にボタンやナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

子テーマの作り方には色々な方法があります。ここで紹介している方法は親と子を明確に分離する方法なので、子テーマのCSSが親テーマのCSSと完全に分離するので見やすくすることができます。

phpmyadminのセキュリティ対策として①phpMyAdminを別名にする方法②phpMyAdminをrootでアクセスできなくする方法
③phpMyAdminアクセスをローカルに限定する方法を解説しています。