HOME  /WordPress(応用)
 /Flexboxを使った画面コントロール
2020年08月05日

Flexboxを使った画面コントロール


Flexbox(Flexible Box Layout Module)はフレキシブルなレイアウトが組めるCSS3のレイアウトモジュールです。

従来のCSSはブロック要素が縦に書かれましたが、Flexboxの基本は横書きです。但し指定方法によっては縦書きも可能で、この辺がフレキシブルなレイアウトツールの意味する所です。

それではFlexboxの基本から順次解説していきます。

1.flexboxの基本

Flexboxは対象がエリアで、親要素と子要素から構成されます。

下記HTMLは親要素がflex-box子要素がflex-itemになります。(divでなくULを親、liを子でもOK)

<div class="flex-box">
<div class="flex-item">
		<p>子要素①</p>
	</div>
<div class="flex-item">
		<p>子要素②</p><p>二行目</p>
	</div>
	<div class="flex-item">
		<p>子要素③</p>
	</div>
</div>

CSSは下記になります。

.flex-box{display:flex;border:1px solid #000;padding:5px;}
.flex-item{margin-left:5px;padding:5px;background-color:#d9edf7;margin-bottom:5px;}

※1.親要素(.flex-box)display:flex;を指定する事により、このエリアがFlexbox対象になります。

上記の表示結果は下図になります。

これはFlexboxのプロパティで下記のデフォルト値が設定されている為上記の様な表示になります。

区分 プロパティ デフォルト値 挙動

flex-wrap nowrap nowrapは子要素を1行で表示します
align-items stretch stretchは子要素の高さを一番高い物に合わせます
justify-content flex-start flex-startは子要素の基準は左です
flex-direction row rowは子要素を左から右に書きます

flex-basis auto autoは子要素の幅をコンテンツサイズにします
flex-grow 0 0は子要素は伸長させない設定です
flex-shrink 1 1は子要素は縮小させる設定です

※1.区分の親要素は、flex-boxに指定するプロパティです。

※2.区分の子要素は、flex-itemに指定するプロパティです。

尚、上記のプロパティのデフォルト値を他の値に変更する事により表示形式を変更する事ができます。

以下に説明します。

2.1行表示の場合

2-1.親要素にalign-itemsを指定する

align-itemsは垂直方向の揃え方です。

書式はalign-items:××;になります。

stretch flex-start flex-end center
意味 ストレッチします。
デフォルト
align-items:stretch
上に揃えます
align-items:flex-start
下に揃えます
align-items:flex-end
中央に揃えます
align-items:center
表示

※1.上記以外にbaselineという指定方法がありますが上記htmlではflex-stratと表示は同じになります。

2-2.親要素にjustify-contentを指定する。

justify-contentは水平方向の揃え方です。

書式はjustify-content:××;になります。

設定値 意味 表示
flex-start 左基準 デフォルト
justify-content:flex-start
flex-end 右基準
justify-content:flex-end
center 中央基準
justify-content:center
space-between 始めと最後を端にして他は均等
justify-content:space-between
space-around 総てを余白を均等
justify-content:space-around

­ ­メモ

ヘッダでは、ロゴは左に寄せ、その他は右に寄せたい等のニーズがある。

この様な場合はデフォルトの「justify-content:flex-start」で2番目の要素を下記の様に指定すると可能になる。

・要素名が明確な場合:2番目の要素{margin-left:auto;}

・li要素のLISTの場合:li:nth-child(2){margin-left:auto;}

そうすると2番目以降の要素も右基準となる。

2-3.親要素にflex-directionを指定する。

flex-directionは子要素を書く方向を指定します。

書式はflex-direction:××;になります。

設定値 意味 表示
row 左から右 デフォルト
flex-direction:row
row-reverse 右から左
flex-direction:row-reverse
column 上から下
flex-direction:column
column-reverse 下から上
flex-direction:column-reverse

 

2-4.子要素にflex-growを指定する。

flex-growは子要素を伸長させる方法を指定します。

書式はflex-grow:××;になります。

設定値 意味 表示
0 伸長しない デフォルト
flex-grow:0
1 伸長させる
flex-grow:1

 

3.複数行表示の場合

複数行表示にする為には下記を指定する必要があります。

flex-basis:××%;

flex-wrap:wrap;

上記を親要素に設定すると子要素が横画面一杯なると次の行に書かれます。

 メモ

横に5個並べる場合は下記になります。

.flex-item{margin:0 0.5%;flex-basis:19%}

計算式は、左右マージン1%×5個+19%×5個=100%

3-1.align-contentを設定する

align-contentは複数行にした時の縦方向に余白がある場合の揃えになります。

設定値 意味 表示
stretch デフォルト

枠一杯にストレッチする

flex-start 上に寄せる

flex-end 下に寄せる

center 中央に寄せる

space-between 1行目と最後の行を上下に合わせて他は均等配置

space-around 総てを均等に配置する

4.その他

PCは横に5個並べるが、タブレットは4個、スマホは2個にしたい等のニーズがあります。

その場合はメディアクリエータを使って処理します。

.flex-item{    /* PCの場合 */
flex-basis:19%;
 	margin:5px 0.5%;}
@media screen and (min-width:768px) and (max-width:991px){  /* タブレットの場合 */
	.flex-item{flex-basis:24%;}
}
@media screen and (max-width:767px){  /* スマホの場合 */
	.flex-item{flex-basis:49%;}
}

※1.flex-basisの代わりにwidthを使っても動作は同じです。

以上のFlexboxの機能を使うと、綺麗に画面が設計できます。

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

関連ドキュメントは下記の関連記事一覧から探して下さい。


<関連記事一覧>

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

WordPressからメールを送る為に下記の様な色々なプラグインを利用してきました。 ①WP Mail SMTP ■昔は簡単なプラグインだったが機能が拡張された時に障害が発生した段階で使用を断念。 ②Gmail SMTP […]

SynologyでWordPressを運用している時に、遅い!と感じる状況に遭遇しました。対策は①All in One SEOと②WP Mail SMTPの廃止です。この経緯を説明しています。

ここではWordPressからGmailのSMTPを介してメールを送る為に「Gmail SMTPプラグイン」を利用する方法を解説しています。このプラグインは「SMTP認証にOAuth2.0プロトコル」を利用するので、Gmailのセキュリティを守る事ができます。

WordPressサイトの公開後のプログラム変更は、サイトダウン等の危険性があるので難しくなります。そこで、私が行っているSyonologyを2台使った開発環境構築事例を紹介しています。

WordPressのメジャーアップデート(5.5や5.6)ではWordpressの更新が失敗する事があります。このような時にサイトを修復する方法を解説しています。

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

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

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

ここでは、SynologyのNASの中でWordPressがどの様に稼働するか?を解説しています。

「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)」に変更になりましたが「ビジュアルエディタ」を使い続ける方法を解説しています。

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

画像が多いサイトを作成するとどうしても表示スピードが遅くなります。 この対策の一つとして画像を圧縮する方法があります。   画像圧縮には色々なツールがありますが、ここでは「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」の表機能を利用しています。ここではそれらの設定方法と利用方法を解説しています。

レスポンシブWebデザインとは、ユーザーが閲覧するデバイス幅に応じたデザインで表示させる技術のことで、有名所でBootstrapと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と完全に分離するので見やすくすることができます。

SynologyのNASのphpmyadminのセキュリティ対策として2要素認証を利用する方法を解説しています。尚、スマホを紛失した時の対応方法も解説しています。