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：縦書き（差し込み例）
