お仕事
css講座 縦書きにしてみよう
みなさんiOS11にアップデートされましたか?
画面の動画が撮れるとか、デフォルトでQRコードが読み取れるとか、気になるところはあるけれど、様子をうかがっています。うるしです。
アップデートしていないので、iPhoneの話は置いといて、今日はcssで縦書きにする方法です。
私も最近まで、縦書きは環境によっては無理だと思っていて、やったことがありませんでした。
最近縦書きにする機会があったので、意外と出来るということ知った次第です。
cssで縦書きにしてみよう
では、まず縦書きにする文章を用意しましょう。
<p>かねた一郎さま 9月19日<br> あなたは、ごきげんよろしいほで、けっこです。<br> あした、めんどなさいばんしますから、おいで んなさい。<br> とびどぐもたないでくなさい。</p>
css 基本の形はこれです
p { writing-mode: vertical-rl; }
IE用、safari用も追加しましょう
p { -webkit-writing-mode: vertical-rl; /*safari*/ -ms-writing-mode: tb-rl; /*IE*/ writing-mode: vertical-rl; }
このままだと、罫線で囲ってみたりするとわかるのですが、IEとedgeでは縦書き要素の高さがブラウザの高さになってしまいます。
そんな時はdisplay: inline-block;にしてみましょう。
p { -webkit-writing-mode: vertical-rl; /*safari*/ -ms-writing-mode: tb-rl; /*IE*/ writing-mode: vertical-rl; display: inline-block; }
出来ました。
かねた一郎さま 9月19日
あなたは、ごきげんよろしいほで、けっこです。
あした、めんどなさいばんしますから、おいで んなさい。
とびどぐもたないでくなさい。
縦中横にする
さて、文章の中に日付がありますね。数字が横向きになっていると思います。
これを縦中横にしてみましょう。
<span class="yoko">9</span>月<span class="yoko">19</span>日
css 基本の形
.yoko { text-combine-upright: all; }
これにもIE用、safari用を追加しましょう
.yoko { -webkit-text-combine: horizontal; /*safari*/ -ms-text-combine-horizontal: all; /*IE*/ text-combine-upright: all; }
できました。
かねた一郎さま 9月19日
あなたは、ごきげんよろしいほで、けっこです。
あした、めんどなさいばんしますから、おいで んなさい。
とびどぐもたないでくなさい。
縦中横は他にも方法があるようなので調べてみてください。
おまけ 横書きにもしたい
縦にしたら、横に戻したい時もある。というわけで横書きバージョンはこちら
p { -webkit-writing-mode: horizontal-tb; /*safari*/ -ms-writing-mode: lr-tb; /*IE*/ writing-mode: horizontal-tb; }
難しいと思って避けてきたそこのあなた、縦書きに挑戦してみては?