SPとPCのデザインカンプがあるが、その間（タブレット）のフォントの指定がない場合に悩まないように作成しました。
こちらのページを参考にしました。
Fluid-responsive font calculator
See the Pen vw base text by copain (@copain) on CodePen.
Breakpoints.jsのメディアクエリとの差を修正する
39行目の
var w = $(window).width();
を
var w = window.innerWidth;
に変更します。
＊一応変更は自己責任でお願いします。
Adobe Animate CC 2015.2からパブリッシュしたcanvasコンテンツがIE10とIE9で表示ができない件を修正する
2016.8のリリースではwindow.devicePixelRatio || 1として修正されています。
原因はwindow.devicePixelRatioの値が取れないためのようです。
出力したHTMLファイル内に以下のような箇所があります。
var pRatio = window.devicePixelRatio,
これを以下のように書き換えます。
var pRatio = window.devicePixelRatio || Math.round(window.screen.deviceXDPI / window.screen.logicalXDPI),
以上になります。
参考：javascript – window.devicePixelRatio does not work in IE 10 Mobile? – Stack Overflow
WordPress:Duplicatorプラグインでスキャンが止まってしまう
アップロードフォルダの容量が多すぎると止まってしまうようです。
アップロードフォルダをパッケージ対象から除外すれば大丈夫でした。（以下の図を参照）
CSS:今日から始める縦書き表現4
前回に引き続き具体的なレイアウトに縦書きを使ってみた例です。
DEMO:縦書きレイアウト1
レスポンシブ、Webフォント(typekit)で実装しています。
IE10＋、ほかはブラウザの最新版で検証しました。
- 句読点の禁則処理はword-wrap: break-word; overflow-wrap: break-word;としました。
- 要素の高さなどが不安定でいまいち読めないところがありました。
- SP時は縦書きをすべてクリアしました。
- SP時の3列の画像に object-fit: cover;を指定してみました。
一方でブラウザごとの差異もまだまだ有りますね。
- 縦書き部分のボックスの高さを決めないとブラウザ間で違った段数になる。
- 高さを決めてoverflow:scrollにした場合Chrome以外はスクロールバーが左に出る。
- Androidブラウザー（4.1.3で検証）はtypekitでのWebフォントは反映されませんでした。
とは言え、表現重視で行きたい場合は現状でも結構手応えを感じました。
CLNDR.jsで複数月を同時に表示
キャプチャはdemoより
jQueryのカレンダープラグインCLNDR.jsですが、バージョン1.2.11から複数月に対応していたようです。（投稿日現在はv1.4.1）
横に2列になっていますが、CSSで整形されているので縦並びも可能です。
CSS:今日から始める縦書き表現3
前回に引き続き具体的な例を2つほど作成しました。
差し込み的に使えるかと思います。
■ドロップキャップ
2段目の頭の1文字だけを大きくする、よく見かける表現（宮沢賢治の「宮」）ですが
Firefoxではfloatさせると妙な感じになってしまいました。
DEMO：縦書き（差し込み例）
CSS:今日から始める縦書き表現2
前回に引き続きcolumn-widthを指定することでレイアウトしてみることにします。
DEMO：縦書き（column-width）固定
Firefox以外高さを入れないと、妙な空きができてしまいます。
IEの場合テキスト量が段毎に同じように割り振られてしまうようでcolumn-fill:auto;を入れました。
（デフォルトでcolumn-fill:auto;のはずですが明示的に入れないとダメなようです。）
column-widthだけを指定して可変長のテキストが自動でうまく収まればブログなどでも使えそうですが、ちょっと難しそうです。
使い所としてはポイント的な差し込みで使うことは可能なので今度はそういった例にチャレンジしたいと思います。
CSS:今日から始める縦書き表現
PCブラウザ環境が変化してきましたので、そろそろ縦書き表現も
こなれてきたのだろうかと始めてみた気づきを書いておきます。
DEMO:縦書き（カラム有り）
- 縦書きの段組はCSS3 Multiple column layoutで実現可能（IE9除く）
- IEだけに有効なジャスティファイの設定がある（text-justify: inter-ideograph;）
- （まだ）ベンダープレフィックスが必要
- 等幅のほうが見やすい（font-family: monospace;）
今回はカラムの親に幅と高さを指定して調整しています。
指定しないとブラウザ間でまちまちな動きをします。
最初column-widthで調整していたのですが、動きが読めなくなってきたのでcolumn-countで指定する方法にしました。もしかしたらcolumn-widthでもうまくいく方法があるのかもしれません。
参考
CSS:flexboxの使いドコロと注意点
・折り返し（box-lines/flex-wrap）
display:box仕様でbox-linesにmultipleがあるがAndroidブラウザー4.3以下では対応していない。
＞従来通りfloatを使う
Firefox(43.0.4)ではflex-wrap:wrapは動いている模様
・簡易なグリッドレイアウト代替
＞display:tableのほうが低コスト
あくまでもflexboxでメリットが有るならやるべきか。
・最後の要素を幅を伸縮調整する（flex-grow）
＞上記の折り返しがある場合はサポートブラウザを留意する
・並び順（reverse）
＞row-reverseした時に右寄せになってしまうのは
justify-content: flex-end;
とすることで左寄せになる
columnの場合は特に癖はないので
JSなどでやっていたリストの降順、昇順ソートが簡易にできそうではある。
・並び順（order）
＞数字の若いものが先頭に来る
flexbox 2009仕様（box）では初期値が1
nth-child(n)か class OR idで個別に指定する。
例えばアイテム全体にorder:2
先頭にしたいもののIDにorder:1としてもうまくいかなかった。
実際の動きはジェネレーターを参考にされたい
CodePen – Flexbox playgroung
Flexy Boxes — CSS flexbox playground and code generation tool
Visual Guide to CSS3 Flexbox: Flexbox Playground |
もし過去のバージョンに対応させられるコストがあるならAutoprefixer（Bracketsにプラグインを入れるのがお手軽）や
IE8、9に対応させるFlexibility（display:flex仕様）や
更新が止まってしまっているがdoctyper/flexie: Legacy support for the CSS3 Flexible Box Model(display:box仕様)などがポリフィルとして使えるだろう。
現時点ではPCではIE11、Chrome Firefoxの最新版
SPではiOS7以上のSafari Android4.4ブラウザー Chromeの最新版
のdisplay:flex仕様で製作可能なプロジェクトであれば使いドコロはあるだろう。
copain blog 