CSS overflow-wrap (word-wrap) と word-break の違い

HTMLで文章を書く場合、表示範囲の一番最後まで来た時の改行は、何も指定していない場合、以下の通りです。

日本語:単語の途中であろうと、自動改行(禁則処理あり)
英数字(適当なスペースあり):スペースに合わせて自動改行(禁則処理あり)
英数字(表示範囲を超える連続する長いもの):改行されずはみ出す

特に、この長い英数字の改行を制御するのに便利な CSSプロパティ、overflow-wrap (word-wrap) と word-break 、違いは何なんでしょう?

word-break : 表示範囲最後まで来た時、(単語が長かろうが短かろうが)単語の途中で改行させるかどうか

overflow-wrap (word-wrap) : 表示範囲に収まらない長い連続する文字列を、途中で改行させるかどうか

(②ですが、word-wrap が古い名称で、サポートされていないブラウザもあるため、新しい名称の overflow-wrap と併記した方がいいようです。)

↓このような文字列がどのように表示されるか、それぞれ見ていきます。

例)CSSで改行が指定されていないデフォルト

word-break プロパティ

word-breakは3つの値(normal, break-all, keep-all)が取れます。

1.word-break: normal
デフォルトと同じです。

2.word-break: break-all
表示範囲を超える長さの英数字の文字列、適当なスペースの入っている短い文字列、どちらにしろ、範囲に収まるように、単語の途中で自動改行
されます。
日本語はデフォルトと同じく、単語の途中で自動改行されます。

3.word-break: keep-all
表示範囲を超えたとしても、決められた場所でしか改行しません。
英数字: 「スペース(空白)」「?」「-」
日本語: 「句読点(、。)」「スペース(空白)」「?」「-(全角ハイフン)」

overflow-wrap (word-wrap) プロパティ

overflow-wrap は2つの値(normal, break-word)がとれます。

1.overflow-wrap: normal
デフォルトと同じです。

2.overflow-wrap: break-word
表示範囲を超える長いの英数字の文字列: 範囲に収まるように、単語の途中で自動改行
適当なスペースの入っている短い英数字の文字列: 単語の切れ目で自動改行
日本語はデフォルトと同じく、単語の途中で自動改行されます。

overflow-wrap (word-wrap) が効かない場合

一般的な文章なら、overflow-wrap: break-word が一番利用しやすい感じがしますが、「内容が定まるまで幅の決まらない要素」がある場合、効きません。

1.shrink-to-fit width
Flexbox(親要素が display:flex)や、display:inline-block、float、position:absolute は、内容によって幅が決まるので、自動改行が効いていないように振る舞います。
→ 回避策 width:auto になっているので、幅(width)や最大幅(max-width)を明示する。

2.テーブル
テーブルの親要素(table-layout:auto)、子要素(display:table-cell)の場合、子要素に overflow-wrap: break-word を指定しても自動改行が無視されます。
→ 回避策 親要素に対して、固定レイアウトアルゴリズム table-layout:fixed を指定する。

width の外になぜはみ出すの?基本の基本の復習

先日ですね、PHP で吐き出される文字列が、改行させずに、なぜか width で指定した幅からはみ出してしまう・・・ということがあって。
どうしてだろう?どうしてだろう?PHP の方が間違っているのかと思い込んで、散々考えても分からなかったので、人に聞いてみたら、「CSS で普通に word-wrap: break-word とか word-break: break-all で制御すればいいだけなんじゃないの?」と言われ、言われてみればそうですね。一発で改行されました。思い込みって怖いなー。盲目になってしまった時は、人に聞くのが一番ですね・・・。

word-wrap: break-word と word-break: break-all については、また考察したいのですが、width を無視して要素がはみ出る場合について、ごく基本の基本に立ち返って、まとめてみたいと思います。

インラインの非置換要素

HTMLの要素は、インライン、インラインブロック、ブロックと3つのレベルに分けられます。
さらにインラインの要素は、width、height の指定できる置換要素、width、height の指定できない非置換要素があります。

インラインの置換要素(width、height を指定できる)

img iframe video embed audio canvas object

インラインの非置換要素(width、height を指定できない)

span ruby sub sup strong em mark b i small br u s ins del
cite q abbr dfn code kbd samp var bdo label

要するに、span 等のインラインレベルの非置換要素に、width を指定しても無視されます。

margin、border、padding を考慮せず、width:100% に指定

width:100% とは、content の幅です。左右の margin、border、padding の数値が「0」でなければ、その分、親要素の width からはみ出します。

回避策① calc()関数を使う

margin:0; border:2px; padding:2px の場合、左右のはみ出しの合計は 8px。calc()関数を使って、8px を引きます。
width: calc(100% – 8px)
「-」と「+」の演算子の前後にはスペースを入れるルールあり

回避策② 入れ子にする

外側の要素を width:100% でいっぱいに広げ、内側の要素の margin、border、padding、content(width:auto)を包むという考え方です。

回避策③ box-sizing プロパティの利用

box-sizing: border-box
と記述することで、要素に指定した width および height の中で border、padding を取るようにブラウザに指示。
margin は含まれない点に注意。

box-sizing を利用する際は、プレフィックスも記述した方がいいようです。
-webkit-box-sizing: border-box; /* Webkit */
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box; /* 標準 */

width の幅を超える連続する英数字

日本語や、適度にスペースの入った英語等の文章は、width で指定された幅に合わせて、自動改行されますが、切れ目のはっきりとしない連続する英数字は、width の幅からはみ出して表示されます。長いURL など、そういう例ですね。
この場合は、word-wrap: break-word や word-break: break-all を使って制御を掛けるのですが、長くなりそうなので、それはまた次回、じっくりまとめたいと思います。

All-in-One WP Migration (WordPress プラグイン)

WordPressサイトのサーバー移転って、普通にするとなると、結構、時間も手間もかかるんですよね。FTPで転送して(これが時間掛かります!)・・・データベース動かして・・・.htaccessとかファイル書き替えて・・・内部リンク直して(とても面倒臭い)・・・
私も一度やってみましたが、うんざりしましたよ。

今回、またお引越ししなくちゃいけなくなって、なんか簡単な方法はないかなってプラグイン検索してみたら、サーバー移転&バックアップ機能のあるプラグインって、いくつもあるんですね。「All-in-One WP Migration」を試してみましたが、すごーーーく簡単です!あの手動で移転の大変さが嘘みたいに、スムーズに移転ができました。
簡単 & 速い & 内部リンク自動書き換え と、本当素晴らしいです。

All-in-One WP Migrationでサーバ移転の手順

(前提として、引っ越し先サーバにもWordPressがインストールされている必要があります)
1. All-in-One WP Migration をインストール
2. 引っ越し元からデータ・エクスポート
3. 引っ越し先へデータ・インポート

All-in-One WP Migrationをインストール

引越し元、引っ越し先、両方のWordPress管理画面より、それぞれ、「プラグイン」>「新規追加」で「All-in-One WP Migration」を検索し、インストールします。有効化すると、左の欄に、「All-in-One WP Migration」と表示されます。

引っ越し元からデータ・エクスポート

引越し元のWordPress管理画面より、「All-in-One WP Migration」>「エクスポート」をクリック。

「検索(文字列)置換(別の文字列)データベース内」→ 書き換えたい文字列があれば、ここに入力
「高度なオプション」→ エクスポートしたくないファイルがあれば、ここで選択
「エクスポート先」→ 無料版では「ファイル」しか選べません。使用中のディバイスにダウンロードされます。

緑の枠に囲まれた「~をダウンロード」というのが出てきたら、そこをクリックします。

引っ越し先へデータインポート

引越し先のWordPress管理画面より、「All-in-One WP Migration」>「インポート」をクリック。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックすれば完了なんですが、ここで、私はちょっと問題がありました。
ダウンロードしたファイルのサイズは28MB。だけど、「最大アップロードファイルサイズ」が、5MBとなっています。どうやらこれは、利用しているサーバの方で、初期設定がそのようになっているらしく、それを変更する必要がありました。

いくつか方法があるようですが、私はその下のところの「最大アップロードファイルサイズをあげる方法」と書かれたリンク先の1番目に書かれていた、「.htaccessファイルをアップデートする」というのをしました。

php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300

WordPressディレクトリ直下にある.htaccessファイルに、</IfModule>の直前、このように書き込みます。これで、最大アップロードファイルサイズが128MBに広がりました。

「インポート元(先ほどダウンロードしたファイル)」を選んで、「PROCEED」をクリックして完了です!
あっという間にお引越しできました!

List Category Posts (WordPressプラグイン)

WordPressのプラグイン(拡張機能)って、本当に豊富で、こんなのないかな、って検索すると、必ずあるっていうぐらい、何でもありますね。本当に便利です。

投稿記事をカテゴリー毎、タグ毎に、一覧を表示させるプラグイン、ないかな、って思って、検索して見つけた「List Category Posts」。簡単なショートコードで一覧を作れます。

プラグイン有効化後、投稿記事や固定ページに書き込むショートコードをまとめます。

投稿タイトルの一覧表示

新着記事一覧を表示する、一番単純なショートコード。

ショートコード: [catlist]

投稿日を表示

新着記事一覧と投稿日を表示するショートコード。

ショートコード: [catlist date=”yes”]

「date_modified=”yes”」を使うと、投稿日ではなく、更新日が表示されます。

抜粋を表示

新着記事一覧と抜粋を表示するショートコード。

ショートコード: [catlist excerpt=”yes”]

カテゴリーを指定

カテゴリーを指定して、そのカテゴリーの一覧を表示するショートコード。

ショートコード-01: [catlist name=”カテゴリー名”]
ショートコード-02: [catlist id=カテゴリーID]

カテゴリーIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

タグを指定

タグを指定して、そのタグの一覧を表示するショートコード。

ショートコード-01: [catlist tags=”タグ名”]
ショートコード-02: [catlist id=タグID]

タグIDについて⇒ WordPress 記事やカテゴリーのIDの調べ方

AND指定

複数のカテゴリーまたはタグをAND指定して、その一覧を表示するショートコード。「+(プラス)」を挟み、複数指定できる。

ショートコード: [catlist id=カテゴリーID+カテゴリーID]
例: [catlist id=4+5]

(「+」の前後にスペースを挟まない)

OR指定

複数のカテゴリーまたはタグをOR指定して、その一覧を表示するショートコード。「,(コンマ)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID,カテゴリーID]
例: [catlist id=4,5]

(「,」の前後にスペースを挟まない)

除外指定

あるカテゴリーまたはタグから、別のカテゴリーを除外指定して、その一覧を表示するショートコード。「-(マイナス)」を挟み複数指定できる。

ショートコード: [catlist id=カテゴリーID-カテゴリーID]
例: [catlist id=5-4]

(「-」の前後にスペースを挟まない)

現在のカテゴリーを指定

現在のカテゴリーを指定して、記事の一覧を表示。関連記事として機能として利用。

ショートコード: [catlist categorypage=”yes”]

表示件数指定

記事の一覧に表示される件数を指定します。

ショートコード: [catlist numberposts=記事数]

(記事数は半角数字です)

「numberposts」を指定しない場合、「設定」で指定したページ数になります。
(「設定」>「List Category Posts」>「Number of Posts」に入力されている数字です。)

ページナビゲーションの表示

記事の一覧の下に、ページナビゲーションが表示されます。

ショートコード: [catlist pagination=”yes”]

「pagination」を指定しない場合、「設定」での指定に応じます。
(「設定」>「List Category Posts」>「Pagination」が「true」だと、ページナビゲーションは表示されます。)

アイキャッチ画像の表示

アイキャッチ画像をサムネイルとして、記事の一覧と共に表示。

ショートコード: [catlist thumbnail=”yes”]

アイキャッチ画像のサイズ

アイキャッチ画像のサイズを指定するショートコード。

ショートコード: [catlist thumbnail=”yes” thumbnail_size=”値”]

指定可能な値は以下の通りです。
・ small ⇒ 小サイズ
・ medium ⇒ 中サイズ
・ large ⇒ 大サイズ
・ full ⇒ フルサイズ
・ 任意の幅と高さ ⇒ 数字,数字 (例: thumbnail_size=50,40)

その他、並び順の変更、カスタム投稿の表示、カスタムタクソノミーの表示など、たくさん機能があるみたいですね。とっても使い勝手のいいプラグインです!

WordPress 記事やカテゴリーのIDの調べ方

WordPressでは、投稿記事、固定ページ、カテゴリー、タグに、それぞれIDが振られています。プラグインを利用する時や、PHPで所定の記事だけを処理したい場合など、このIDを利用することになります。

それぞれのIDの調べ方をまとめます。

投稿記事IDの確認方法


「投稿」>「投稿一覧」で一覧を表示し、IDを知りたい記事にカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、記事IDとなります。

もしくは、「投稿」>「投稿一覧」>(記事を選び)「編集」で、各記事の編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=556&action=edit
記事IDは、「556」となります。

カテゴリーIDの確認方法

「投稿」>「カテゴリー」で一覧を表示し、IDを知りたいカテゴリーにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「category&tag_ID=番号」の番号が記事IDとなります。

もしくは、「投稿」>「カテゴリー」>「編集」で、各カテゴリーの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「category&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=category&tag_ID=5&post_type=post
カテゴリーIDは、「5」となります。

タグIDの確認方法

「投稿」>「タグ」で一覧を表示し、IDを知りたいタグにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post_tag&tag_ID=番号」の番号が、記事IDとなります。

もしくは、「投稿」>「タグ」>「編集」で、各タグの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post_tag&tag_ID=番号」の番号の部分が、記事IDとなります。

例)https://web.hazu.jp/wp-admin/term.php?taxonomy=post_tag&tag_ID=9&post_type=post

タグIDは、「9」となります。

固定ページIDの確認方法


「固定ページ」>「固定ページ一覧」で一覧を表示し、IDを知りたい固定ページにカーソルを合わせます。その時、ブラウザのステータスバーにリンク先のURLが表示されます。そのURLに含まれている「post=番号」の番号の部分が、固定ページIDとなります。

もしくは、「投稿」>「固定ページ」>(ページを選び)「編集」で、各固定ページの編集ページを表示し、ブラウザのアドレスバーにURLが表示されます。その中の「post=番号」の番号の部分が、固定ページIDとなります。

例)https://web.hazu.jp/wp-admin/post.php?post=51&action=edit
固定ページIDは、「51」となります。

CSS Flexboxを使いこなす – まとめ

CSS Flexboxは、プロパティがたくさんあって、初めは覚えるのが大変だと思いましたが、一通り使ってみて思ったのは、レイアウトの実現が楽で、プロパティが多くてもストレスレスな感じですね。
Flexコンテナ(親要素)とFlexアイテム(子要素)、それぞれに記載するプロパティを図にしてみました。

Flexコンテナ(親要素)に記述するプロパティ

以下、詳細へのリンクと、要約です。

Flexboxの基本の記述
「desplay: flex」と最初に記述。必須。

flex-direction
方向の指定 値:row, row-reverse, column, column-reverse

flex-wrap
改行可否の指定 値:nowrap, wrap, wrap-reverse

flex-flow
「flex-direction」「flex-wrap」を一緒に記載するショートハンド

justify-content
水平方向の配置 値:flex-start, flex-end, center, flex-between, flex-around

align-items
垂直方向の配置 値:flex-start, flex-end, center, baseline, stretch

align-content
行の配置 値:flex-start, flex-end, center, flex-between, flex-around, stretch

Flexアイテム(子要素)に記述するプロパティ

以下、詳細へのリンクと、要約です。

flex-grow
flexアイテムの伸長倍率 値:数値(マイナス無効)

flex-shrink
flexアイテムの短縮倍率 値:数値(マイナス無効)

flex-basis
flexアイテムのサイズ 値:auto, 数値(pxなど)

flex(ショートハンド)
「flex-grow」「flex-shrink」「flex-basis」を一緒に記述するショートハンド

align-self
各Flexアイテムの垂直方向の配置 値:flex-start, flex-end, center, baseline, stretch

order
Flexアイテムの並べ替え 値:数値

CSS Flexboxを使いこなす – その3

CSS Flexboxを使いこなす – その1CSS Flexboxを使いこなす – その2 の続きです。

前回までにまとめたこと

これまでのプロパティは、Flexコンテナ(親要素)の方に記述をして、Flexコンテナ内のFlexアイテム全体に値を指定していましたが、今回のプロパティは、各Flexアイテム(子要素)にそれぞれに値を指定します。

flex-grow プロパティ(Flexアイテムの伸びる倍率)

Flexコンテナ(親要素)に全てのFlexアイテム(子要素)を格納してなおスペースが余る場合、そのスペースを自動的に埋めるための各Flexアイテムの伸びる倍率を指定します。

(デフォルト flex-grow: 0 マイナスの値は無効)

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-webkit-box-flex: 0;
	-ms-flex-positive: 0;
	flex-grow: 0;
	}

例)
Flexコンテナ(親要素)に、widthが30px の6個のFlexアイテム(子要素)は入っています。
左詰めで、右側に96pxの余りのスペースがあります。

全てのFlexアイテム(子要素)に、flex-grow:0と、同じ値を指定すると、余りのスペースは6等分され、96px÷6=16pxで、各Flexアイテムは16pxずつ伸びます。

flex-growに異なる値を指定すると、余りのスペースはその割合で分配されます。
↓の図の場合、2番目のFlexアイテムのみflex-grow:3で、他はflex-grow:1なので、2番目は他に比べて3倍伸びます。

サンプルページ: flex-grow.html

flex-shrink プロパティ(Flexアイテムの縮む倍率)

Flexアイテム(子要素)のサイズの合計が、Flexコンテナ(親要素)のサイズを上回ってしまう場合、自動的にFlexコンテナの中に収めるために、各Flexアイテムの縮む倍率を指定します。

(デフォルト flex-shrink: 1 マイナスの値は無効)

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-negative: 1;
	flex-shrink: 1;
	}

例)
Flexコンテナ(親要素)に、widthが50px の6個のFlexアイテム(子要素)は入っています。Flexアイテムの幅の合計は、Flexコンテナより48px小さいです。

全てのFlexアイテム(子要素)に、flex-shrink:1と、同じ値を指定すると、はみ出した部分は6等分され、48px÷6=8pxで、各Flexアイテムは8pxずつ縮みます。

flex-shrink:0とすると、そのFlexアイテムは、オリジナルのサイズを維持します。それ以外の数値を指定されたFlexアイテムが、その数値の比率で縮みます。
↓の図の場合、2番目と3番目ののFlexアイテムのみflex-shrink:0なので、オリジナルの50pxを維持します。他はflex-grow:1なので分割され縮みます。

サンプルページ: flex-shrink.html

flex-basis プロパティ(Flexアイテムのサイズを指定)

各Flexアイテム(子要素)のサイズを指定できます。widthとほぼ同じですが、後に記述するflexショートハンドに含められるので便利です。

(デフォルト flex-basis: auto

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
	}

例)
Flexアイテム(子要素)に、flex-basis:autoを指定すると、元のサイズを維持します。
↓の図の場合、5番目のFlexアイテムのみ、flex-basis:150pxが指定されているので、サイズ変更されています。

サンプルページ: flex-basis.html

flex プロパティ(flex-grow、flex-shrink、flex-basisをまとめて指定するショートハンド)

flex-grow、flex-shrink、flex-basisを個別に指定するよりも、flexプロパティを利用してまとめて指定する方を、W3Cで推奨しているようです。

(デフォルト flex: 0 1 auto

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-flex: 0 1 auto;
	flex: 0 1 auto;
	}

「flex:」に続けて、スペースを開けて、「flex-grow」「flex-shrink」「flex-basis」の順に指定します。

「flex: 0 1 auto」なら、「flex-grow: 0」「flex-shrink: 1」「flex-basis: auto」となります。

また、「flex: auto」「flex: none」という値も指定できます。
「flex: auto」=「flex: 1 1 auto」
「flex: none」=「flex: 0 0 auto」

サンプルページ: flex-shorthand.html

align-self プロパティ(各Flexアイテムの垂直方向の配置を指定)

align-items プロパティでは、Flexコンテナ(親要素)の中にある全てのFlexアイテム(子要素)に対して同じ配置を指定しますが、align-selfは、それぞれのFlexアイテムに個別に配置を指定します。

(デフォルト align-self: auto

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-ms-flex-item-align: auto;
	-ms-flex-grid-row-align: auto;
	align-self: auto;
	}

align-self プロパティに指定できる値は、align-items プロパティと同じです。

「align-self: auto」align-items プロパティで指定された値を維持
「align-self: flex-start」上揃え
「align-self: flex-end」下揃え
「align-self: center」中央揃え
「align-self: baseline」ベースライン揃え
「align-self: stretch」Flexコンテナの高さ、もしくはコンテンツが一番多いFlexアイテムに合わせる

「align-self」の値は、「align-items」より優先されます。

サンプルページ: align-self.html

order プロパティ(Flexアイテムの並べ替え)

HTMLの記述の順番を変えずに、Flexアイテムの配置の順番を変えられます。

(デフォルト order: 0

/* 親要素 display:flex; の記述は必須 */
.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	}

/* 子要素 それぞれの子要素に適当な値を指定 */
.flex-item {
	-webkit-box-ordinal-group: 1;
	-ms-flex-order: 0;
	order: 0;
	}

サンプルページ: order.html

おしまい!

⇒ 次回、CSS Flexboxまとめ です。

⇒  Flexbox を使いこなす – その1

⇒  Flexbox を使いこなす – その2

CSS Flexboxを使いこなす – その2

CSS Flexboxを使いこなす – その1 の続きです。

前回は、以下の3点についてまとめました。

今回は、以下の3点です。

justify-content プロパティ(水平方向の揃え方の指定)

flex-direction プロパティで指定した方向に対して、Flexアイテム(子要素)の配置を指定できます。

(デフォルト justify-content: flex-start

justify-content: flex-start(並列の場合「左揃え」、縦列の場合「上揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

サンプルページ: justify-content-flex-start.html

justify-content: flex-end(並列の場合「右揃え」、縦列の場合「下揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

サンプルページ: justify-content-flex-end.html

justify-content: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

サンプルページ: justify-content-center.html

justify-content: space-between(最初と最後のアイテムは端に、それ以外は等間隔に配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

サンプルページ: justify-content-space-between.html

justify-content: space-around(最初と最後のアイテムも含め、全てのアイテムを等間隔に配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-pack: distribute;
	justify-content: space-around;
}

サンプルページ: justify-content-space-around.html

align-items プロパティ(垂直方向の配置の指定)

全てのFlexアイテムに対して、垂直方向の配置を指定します。

(デフォルト align-items: stretch

align-items: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

サンプルページ: align-items-flex-start.html

align-items: flex-end(並列の場合「下揃え」、縦列の場合「右揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

サンプルページ: align-items-flex-end.html

align-items: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

サンプルページ: align-items-center.html

align-items: baseline(ベースラインを揃えて配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

サンプルページ: align-items-baseline.html

align-items: stretch(Flexアイテムの高さが指定されてない場合、一番コンテンツの多いものに高さを合わせる)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

サンプルページ: align-items-stretch.html

align-content プロパティ(行の配置)

flex-wrap プロパティで「nowrap」以外に設定した場合、複数行になります。その時の行の配置を指定します。

(デフォルト align-content: stretch

align-content: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: start;
	align-content: flex-start;
}

サンプルページ: align-content-flex-start.html

align-content: flex-end(並列の場合「下揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: end;
	align-content: flex-end;
}

サンプルページ: align-content-flex-end.html

align-content: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: center;
	align-content: center;
}

サンプルページ: align-content-center.html

align-content: space-between(最初と最後の行は端に、他の行は等間隔)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: justify;
	align-content: space-between;
}

サンプルページ: align-content-space-between.html

align-content: space-around(最初と最後の行も含め、全ての行が等間隔)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: distribute;
	align-content: space-around;
}

サンプルページ: align-content-space-around.html

align-content: stretch(最初の行は端に揃え、行の後に等間隔のスペース)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: stretch;
	align-content: space-stretch;
}

サンプルページ: align-content-stretch.html

ここまで!

⇒  Flexbox を使いこなす – その1

⇒  Flexbox を使いこなす – その3

CSS Flexboxを使いこなす – その1

並列、縦列レイアウトの切り替えがシンプルなコードで行える Flexbox が使いこなせると、レスポンシブデザインが簡単にできますね。サンプル用のウェブページも作ってみました。ソースと合わせて動きを見てもらえればと思います。
プロパティがかなり多いので、今回は以下の3点をまとめます。

Flexbox とは

Flexコンテナ(親要素)の中に、いくつかの Flexアイテム(子要素)を内包する構成です。
Flexコンテナ内でのFlexアイテムの配置、伸縮などを指定することができます。

↓ の HTML において、クラス item の6つの要素の配置、サイズを、順々にCSS Flexbox を利用して指定していきます。

HTML

<div class="flex-container">
   <div class="item one">1番目の要素</div>
   <div class="item two">2番目の要素</div>
   <div class="item three">3番目の要素</div>
   <div class="item four">4番目の要素</div>
   <div class="item five">5番目の要素</div>
   <div class="item six">6番目の要素</div>
</div>

Flexboxの基本の記述

CSSに「desplay: flex」と指示することで、要素が並列になります。

CSS

.flex-container {
	display: flex;
}

対応していないブラウザもあるかもしれないので、プレフィックスのも記述した方がいいでしょう。(以後、全て、プレフィックスも記します。)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

サンプルページ: flex-01.html

flex-directionプロパティ(方向の指定)

flex-directionを使うと、HTMLはそのままで、Flexコンテナの主軸の方向を設定することができます。

(デフォルト flex-direction: row

flex-direction: row(並列 左から右へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

サンプルページ: flex-direction-row.html

flex-direction: row-reverse(並列 右から左へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	-ms-flex-direction: row-reverse;
	flex-direction: row-reverse;
}

サンプルページ: flex-direction-row-reverse.html

flex-direction: column(縦列 上から下へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

サンプルページ: flex-direction-column.html

flex-direction: column-reverse(縦列 下から上へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	-ms-flex-direction: column-reverse;
	flex-direction: column-reverse;
}

サンプルページ: flex-direction-column-reverse.html

flex-wrapプロパティ(改行可否の指定)

縮小して1行に収めるか、幅を超えたら改行するかを指定できます。

デフォルト flex-wrap: nowrap

flex-wrap: nowrap(縮小して1行に収める)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

サンプルページ: flex-wrap-nowrap.html

flex-wrap: wrap(縮小しないで複数行に配置 左から右へ 上から下へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

サンプルページ: flex-wrap-wrap.html

flex-wrap: wrap-reverse(縮小しないで複数行に配置 左から右へ 下から上へ)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap-reverse;
	flex-wrap: wrap-reverse;
}

サンプルページ: flex-wrap-wrap-reverse.html

flex-flowプロパティ(flex-direction, flex-wrapをまとめて指定するショートハンド)

デフォルト flex-flow: row nowrap

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
}

「flex-flow:」に続けて、スペースを開けて、「flex-direction」「flex-wrap」の順に指定します。

サンプルページ: flex-flow.html

ここまで!続きは・・・

⇒ CSS Flexboxを使いこなす – その2

⇒ CSS Flexboxを使いこなす – その3

ドロップダウンメニュー(レスポンシブ対応)jQuery編

WordPressの最近のテーマは大概、メニューなどレスポンシブ対応で、自動でドロップダウン式に切り替わるようになっていますが、古いテーマを利用するとか、手書きで書く場合など、使えるかなと思って、レシピ的にメモしておきます。
ドロップダウンメニューはCSSだけでも実現できますが、今回はjQueryです。

ddmenu.js

jQuery(document).ready(function($){

	var agent = navigator.userAgent;
	var list = jQuery("div.menu-container");

	function menuslide(){
	//メニュー表示非表示
	jQuery("p.navtitle").click(function(){
	if(jQuery(list).css("display")=="none"){
		jQuery(list).slideDown("normal");
	}else{
		jQuery(list).slideUp("normal");
	}
    });
    }

    if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1){
        menuslide();

    }else if(agent.search(/Android/) != -1){
        menuslide();

	}else{
		var replaceWidth = 700;
		function widthSize(){
			var windowWidth = parseInt(jQuery(window).width());
			if(windowWidth >= replaceWidth) {
				jQuery(list).css("display","block");
			} else if(windowWidth < replaceWidth) {
				jQuery(list).css("display","none");
			}
		}
		jQuery(window).resize(function(){widthSize();});
			widthSize();
			menuslide();
  }
});

CSS

@media screen and (min-width: 701px) {
    p.navtitle {
        display: none;
    }
}

@media (max-width: 700px) {
    /* @media (max-width: 700px) Reduce font-sizes for better readability on smaller devices */
p.navtitle {
        color: #ffffff;
        dispaly: block;
        cursor:pointer;
        line-height:1.4;
        font-size: 14px;
        font-weight:bold;
        margin: 1.2em 0 1.2em 5px;
    }
    #access div {
        margin: 0;
    }
    #access ul {
        margin: 0;
    }
    div.menu-menu-1-container {
        height: auto;
        width: 100%;
        display: none;
    }
    div.menu-container ul {
        width: 100%;
    }
    div.menu-container ul li {
        float: none;
        background: #222;
        width: 100%;
        padding: 0;
        text-align: left;
        font-size: 14px;
    }
    div.menu-container ul li a {
        border-bottom: solid 1px #666;
    }
    
   .nav-btn-ico {
      display: inline-block;
      position:relative;
      margin: 0 10px 3px 0;
      padding: 0;
      background: #ffffff;
    }
    .nav-btn-ico, .nav-btn-ico:before, .nav-btn-ico:after {
      width: 14px;
      height: 3px;
    }
    .nav-btn-ico:before, .nav-btn-ico:after {
      display: block;
      content: "";
      position:absolute;
      top: 50%;
      left: 0;
      background: #ffffff;
    }
    .nav-btn-ico:before {
      margin-top: -8px;
    }
    .nav-btn-ico:after {
      margin-top: 4px;
    }  
}