記事一覧MenuSidebarSearchホーム>ホームページ作成>HTML/CSSfontを縦書きにしたときの設定まとめ2020年1月31日サイトを和のテイストに仕上げたいとき、ピンポイントで縦書きを使いたいときがままあります。そんなとき使うのがcssのwriting-modeプロパティ。writing-mode自体は10年前ぐらいから存在していたと思うのですが、なかなか使いやすさが向上しないのは欧米に必要ないものだからでしょうか。昨日ひさしぶりに縦書きモード使ったので、要点をまとめておきたいと思います。違いは右から左(-rl)か左から右(-lr)かという意味です。執筆時(2020/01/29)現在、まだベンダープレフィクスが必要です。設定ざっくりまとめると、行間・文字間は縦書きで書く時の感覚通り。通常時と同じように動きます。国境の長いトンネルを抜けると雪国であった。信号所に汽車が止まった。島村の前のガラス窓を落した。solid;}こんな感じです。ここで問題が1つ、それをクリアするとまた1つ発生します。OSには明朝体を表示するためのフォントデータが入っていません。明朝体を指定しても、Androidだけゴシック体表示になってしまいます。明朝体とゴシック体では実際の表示サイズなどにも結構差が出るので、デザインそのものが意図したものとずれてしまいます。いうことで、ここはwebフォントの出番になります。方に簡単に説明すると、htmlを表示するときフォント表示用データもセットで送りつけることで、OSに入っていない独特なフォントでも表示できるというものです。フォントデータ分すこし重くなりますが、意図したとおりのデザインを表示できます。紹介されているのがGoogleWebFontです。CDNで使えるのでデータを自前で用意する必要がないので便利です。思いきや次なる問題が発生します。悲しきかな、GoogleWebFontをwriting-mode:verticalにすると、文字がぐちゃっと押しつぶされてしまいます。試してみたのですが、まだ縦書きには対応できないようです。Square」を無償提供している場合があります!一番楽そうなのでそちらを使います。調べたところ、モリサワフォントが無料で使えるレンタルサーバーは下表です。月7.5万pvまでこれらのレンタルサーバー利用でかつWordPressブログなら、TypeSquare利用のためのプラグインがプレインストールされているはずです。>一文読み込ませるだけで利用できます。これら以外のレンタルサーバーでもTypeSquareを直接契約すれば使えます。月1万pv未満、1書体、1ドメインだけなら無料。3書体までなら年間26,400円(または月2,200円)、制限は月25万pv。これで無事にAndroidOSでも表示することができ、文字が潰れてしまうことも無くなりました。