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 を使って制御を掛けるのですが、長くなりそうなので、それはまた次回、じっくりまとめたいと思います。

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

WordPressでCSSのキャッシュを自動リロードさせる方法

はっと気が付いたのですが、CSSって更新しても、キャッシュに残っている場合、スーパーリロードさせないと新しいのが反映されないんですよね。ここもちょこちょことCSS書き足しているのですけれどね・・・。自分だけで見ているのなら、その都度スーパーリロードをかければいいのですが、公開していることを考えるとどうすればいいのか?「皆様、何月何日何時、CSS更新しましたので、キャッシュのリロードお願いします」なんてわけにもいきませんしね。

CSSのキャッシュを自動リロードさせるには、どうすればいいのか?
CSSファイルの更新日時を取得し、それに合わせてリロードするよう、htmlのheadに指示を書き込むことで解決できるみたいです。

やりたいこと

CSS更新時、クライアント側のキャッシュを自動的にリロードさせる

利用する関数

[ PHP関数 ]
filemtime() → ファイルの更新時刻
date() → 日時の取得

[ WordPress関数 ]
bloginfo() → サイト情報を表示
get_stylesheet_directory() → 現在のテーマ、子テーマのスタイルシートのディレクトリパスを取得

手順

1. WordPressの利用中のテーマ、もしくは子テーマ(すでにheader.phpが子テーマの中にあるのなら)から、FTPで header.php をダウンロード
2. header.php に自動リロードの指示を追加
3. 子テーマに header.php をアップロード(子テーマについては後日書きます)

head.php

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<!--?php wp_head(); ?-->

/* ここに↓を追加 */
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>
?ver=<?php echo date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')); ?>" />

</head>

↑の head.php は、テーマ twenty seventeen のものですが、wp_head() の読み込まれたあとに追加すれば問題ありません。
やっていることは、要するに、更新日をそのままstyle.cssのバージョン名として、新たなstyle.cssとして認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。

サイトにソースコードを記述する

このサイトのページに、CSSやPHPなどのソースコードを載せたいのですが、そのための記述の仕方をまとめます。

やりたいこと

左に行数を表示し、右にソースコードを記述

HTMLタグ

<pre>タグ: 整形済みテキストを表示する(ブロックレベル要素)
<code>タグ: プログラムコードやHTMLやCSSなどのコードを示す(インライン要素)

CSSカウンター

counter-reset プロパティ: カウンターに名前を設定し、値を初期化
counter-increment プロパティ: counter-resetで設定したカウンターの値に1を加算
content プロパティ: 要素を生成された値で置き換え
counter() 関数: 値を生成
::before 疑似要素: 選択した要素の最初の子要素として擬似要素を作成

ソースコード記述の為のCSS例

/* 全体を収めるブロック */
div.code-toolbar {
    position: relative;
}

/* 整数済み部分 */
pre {
    position: relative;
    padding: 1em 1em 1em 3.8em;
    overflow: auto;
    counter-reset: linenumber;
    border-left: 1px solid hsla(256, 97%, 27%, 0.71);
    font-size: 14px;
    box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.1), 0 0.5px 0.5px rgba(0,0,0,0.1);
    border-top: .1px solid hsla(0, 0%, 84%, 0.1);
    border-right: .1px solid hsla(0, 0%, 84%, 0.1);
    background: #f5f2f0;
    display: block;
}

/* ソースコード記入部分 */
code {
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: relative;
}

/* 行数表示部分全体 */
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 各行数表示 */
.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

/* カウンター */
.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

ソースコード記述の為のHTML例

<div class="code-toolbar">
<pre><code>/* シュークリームが大好きです */
<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

ブラウザでの表示

/* シュークリームが大好きです */

CSS ボタンジェネレイター

CSSってスタイルの指定以外にも、結構色々な事ができるんですよね。jQueryやFlashの代わりとか、絵がかけるとか。

こんなドラえもんとか!→ CSSだけで描いたドラえもん

すごいですねー。

ウェブサイトに使われるボタンは、画像を利用するより、CSSのみで実装する方が軽量化を図れるし、SEOの観点からも優れていると言われています。CSS3の「border-radius(角丸)」や「linear-gradient(グラデーション)」を組み合わせると、画像と間違えるような美しいボタンが出来るのですが、少々面倒ですね。そんな時、CSSボタンジェネレーターを使うと、簡単にボタンのCSSを生成してくれます。

「CSSボタンジェネレーター」で検索すると、色々出てくると思いますが、私が利用しているのはこちらです。

www.bestcssbuttongenerator.com

左の部分から、基本のデザインを選び、右の部分で、細かな設定を調整します。
Text: ボタンの文字列、任意のクラス名、フォントスタイル、サイズ
Size: ボタンの高さ、幅
Border: ボタンの角丸、輪郭線幅
Box Shadow: 影の種類

スタイルが決まったら、出来上がったボタンをクリック。そうすると、右の部分に、HTMLとCSSが表示されます。あとはそれをコピペするだけ。
1行目はHTMLに、それ以外はCSSに。HTMLにリンク先を入れれば、それで完了です。

About Me

↑ 出来上がったボタン

便利ですね!