SPとPCのデザインカンプがあるが、その間(タブレット)のフォントの指定がない場合に悩まないように作成しました。
こちらのページを参考にしました。
Fluid-responsive font calculator
See the Pen vw base text by copain (@copain) on CodePen.
SPとPCのデザインカンプがあるが、その間(タブレット)のフォントの指定がない場合に悩まないように作成しました。
こちらのページを参考にしました。
Fluid-responsive font calculator
See the Pen vw base text by copain (@copain) on CodePen.
39行目の
var w = $(window).width();
を
var w = window.innerWidth;
に変更します。
*一応変更は自己責任でお願いします。
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
アップロードフォルダの容量が多すぎると止まってしまうようです。
アップロードフォルダをパッケージ対象から除外すれば大丈夫でした。(以下の図を参照)
前回に引き続き具体的なレイアウトに縦書きを使ってみた例です。
DEMO:縦書きレイアウト1
レスポンシブ、Webフォント(typekit)で実装しています。
IE10+、ほかはブラウザの最新版で検証しました。
一方でブラウザごとの差異もまだまだ有りますね。
とは言え、表現重視で行きたい場合は現状でも結構手応えを感じました。
キャプチャはdemoより
jQueryのカレンダープラグインCLNDR.jsですが、バージョン1.2.11から複数月に対応していたようです。(投稿日現在はv1.4.1)
横に2列になっていますが、CSSで整形されているので縦並びも可能です。
前回に引き続き具体的な例を2つほど作成しました。
差し込み的に使えるかと思います。
■ドロップキャップ
2段目の頭の1文字だけを大きくする、よく見かける表現(宮沢賢治の「宮」)ですが
Firefoxではfloatさせると妙な感じになってしまいました。
DEMO:縦書き(差し込み例)
前回に引き続きcolumn-widthを指定することでレイアウトしてみることにします。
DEMO:縦書き(column-width)固定
Firefox以外高さを入れないと、妙な空きができてしまいます。
IEの場合テキスト量が段毎に同じように割り振られてしまうようでcolumn-fill:auto;を入れました。
(デフォルトでcolumn-fill:auto;のはずですが明示的に入れないとダメなようです。)
column-widthだけを指定して可変長のテキストが自動でうまく収まればブログなどでも使えそうですが、ちょっと難しそうです。
使い所としてはポイント的な差し込みで使うことは可能なので今度はそういった例にチャレンジしたいと思います。
PCブラウザ環境が変化してきましたので、そろそろ縦書き表現も
こなれてきたのだろうかと始めてみた気づきを書いておきます。
DEMO:縦書き(カラム有り)
今回はカラムの親に幅と高さを指定して調整しています。
指定しないとブラウザ間でまちまちな動きをします。
最初column-widthで調整していたのですが、動きが読めなくなってきたのでcolumn-countで指定する方法にしました。もしかしたらcolumn-widthでもうまくいく方法があるのかもしれません。
参考
・折り返し(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仕様で製作可能なプロジェクトであれば使いドコロはあるだろう。