「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

縦書きwebデザインの実現方法と環境を考える

縦書きwebデザインの作り方を試す【CSS編】

本日、唐突に縦書きサイトの話が盛り上がった。

主に和食店、旅館などが「和」を感じさせる為に利用しているに止まっているイメージなのだけど、実際に縦書きのことを考えたことがなかったので考えつつ、まとめてみる。

 

縦書きの実装方法

私は基本的にコードを書く方面の人間なので、まずは実装方法が気になります。

縦書き web などで検索すればいくらでも出てくるので、皆様方にはそのサイトをご覧頂くとして、大雑把にまとめておきます。

主な実装方法とブラウザ状況

縦書きを採用しているサイトがそれなりに有ることから、特に難しいことでは無いようです。主な実装方法はこの二つ。

  • CSSのwriting-modeを使う

フロントエンドの問題なのでこの二つが実装方法なのは当然として、ブラウザの対応状況が気になるところです。

結論から言えば2016年12月現在、opera miniを除く最新ブラウザであれば問題無いらしい。

Can I Useは以下からどうぞ↓

Can I use... Support tables for HTML5, CSS3, etc

縦書きに関して言えば、最も遅れたブラウザはfire-fox。IEに関してはずいぶん前から独自対応していたという、珍しい展開。

では現実路線、どの程度まで対応するのがいいのか?というのをはっきりさせておきたいですね。

 

PCブラウザ対応状況

IE     6〜 

EDGE   12〜

fire-fox       41〜

chrome      8〜

safari         5.1〜

opera        15〜

バイルブラウザ対応状況

safari&chrome on iOS    5.1〜

opera on andoroid         37〜

chrome on android        55〜

fire-fox on android         50〜

 

現状、今からサイトを作るので有ればレスポンシブ対応したい!というのが多くなってくるでしょうから、その辺も併せて実験してみたいと思います。

まずはただ単純に縦書きにするCSSを書き加えてみます。

CSS:writing-modeの基本挙動

writing-modeをcssに書き込めば簡単に縦書きにはなります。

こちらの練習用htmlを使って挙動を確認します。

 

こんな状態ですね。

 

f:id:pochiweb:20161228082349p:plain

 

 

それでは、class="article" に対して以下の様にwriting-modeを書き加えてみます。

writing-mode: tb-rl;/*IE用の記述*/

-webkit-writing-mode : vertical-rl ; /*それ以外*/

値のvertical-rl、tb-rlの「rl」の部分はright to leftの指定です。

文章が右から左に流れていきます。

今回writing-modeを書き加えた対象は id="article"です。

こうなります。

簡単に縦書きになりました。

 

f:id:pochiweb:20161228082633p:plain

 

writng-modeの値のrlは、文章を右上開始で左に流れる指定ですね。

lrにするとこう。

左上が開始になり、文章が右に流れていきます。

 

f:id:pochiweb:20161228082952p:plain

writing-modeは親要素にかけるもの

次に、#article子要素である.sectionに対して同じCSSを書き込むとどうなるかを試してみます。

私は今回初めて縦書きを試すに当たってこの部分で少しだけハマってしまいました。親要素に指定するものだと知らずに手を動かしてしまったので、子要素にまずかけてみたんです。仕様書を読めばこんなことにはならないのでしょうが、まず動かす!が好きなんですよね。

すると、こうなりました!

 

f:id:pochiweb:20161228084149p:plain

横書きが縦に積み上がっていく(笑)

(heightはブログ上で見辛いので変更しています。)

 

ちなみに、この「子要素にwriting-mode」方法でなんとかならないか?を考えているうちにこんな面白い状況にもなりました。

なぜか、見出しにインデントがかかった様な感じに。

f:id:pochiweb:20161228085133p:plain

やったことは、

 #articleにflexをかけ、row-reverceで右詰めにして、directionにrtlを指定。

右詰めの文章が縦になるとこうなるのでしょうか?試しにltrに変更してみると行頭に戻ったのでそうゆう事な様です。