フォントサイズの最小値と最大値を決めてその間は横幅に応じて拡縮するSCSSのmixinを作ってみました。

SPとPCのデザインカンプがあるが、その間(タブレット)のフォントの指定がない場合に悩まないように作成しました。
こちらのページを参考にしました。
Fluid-responsive font calculator

See the Pen vw base text by copain (@copain) on CodePen.

広告

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フォントは反映されませんでした。

とは言え、表現重視で行きたい場合は現状でも結構手応えを感じました。

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仕様で製作可能なプロジェクトであれば使いドコロはあるだろう。

参考:Solved by Flexbox — クリーンでハックのない CSS

text-overflow: ellipsisの時にリンクの下線が出ない症状

firefoxでリンクの下線が出ない場合がありました。
line-heightをフォントサイズ+1pxにすることで表示されるようになりました。
おそらくtext-overflow: ellipsis;と同時にoverflow: hidden;ためで下線が隠れてしまったと思われます。
他の最新ブラウザでは表示されていました。