和風サイトってテキストが縦書きになってることがあるけど、どうやってコーディングしてるの？？
たしかに縦書きデザインのサイトは結構ありますよね。
僕も初めて縦書きデザインのサイトをコーディングした時は、いろいろと調べながら書いていたのを覚えています。
まさか一文字ずつ 改行タグを付けるのかな？なんて思ったりもしました(笑)。
この記事では、縦書きの方法や、縦書きでの中央寄せ、均等配置などについても紹介しています。
一通り読んでいただければ、基本的な縦書きデザインはできるようになるので、ぜひ参考にしてみてください。
もちろん、参考コードはコピペ用のテンプレとして使っていただいてOKです！
HTML/CSSで縦書きをマスターしよう
縦書きの基本的な書き方
ひとまずどうやったら縦書きができるのか教えてほしいな！
はい、まずは基本的な縦書きの方法です。
実はすごく簡単です。
縦書きにしたい文章、もしくはその親要素に『writing-mode: vertical-rl;』を書くだけ。
実際に見てもらったほうが分かりやすいと思うので、以下に参考例を載せています。
See the Pen Untitled by fukumaru ryosuke (@fukumaru) on CodePen.
おお！縦書きになってる。感動。
簡単ですよね^^
本当に縦書きになるか、ぜひ一度試してみてください。
読む方向を逆にする(左→右)
そーえいば、vertical-rlの『rl』ってなに？？
いいところに気が付きましたね。
『rl』とは、rightとleftのことで、右から左に向かって読める方向ということです。
なるほど！つまり、左から右に読めるようにしようとすると、『lr』って書くんだね。
全くもってそのとおりです。
読む方向を逆にしたい時は、『writing-mode: vertical-lr;』としましょう。
以下、参考コードです。
See the Pen writing-mode2 by fukumaru ryosuke (@fukumaru) on CodePen.
左右中央寄せにする(方法①)
縦書きの文章を左右中央揃えにする方法をお伝えします。
まずは単純な方法。
参考コードのように、『margin: 0 auto;』 を書くだけ。
これは色んな中央寄せで見かけるね。
はい、中央寄せの方法としてはメジャーな方法ですね。
See the Pen writing-mode3 by fukumaru ryosuke (@fukumaru) on CodePen.
ただしこの方法、ブラウザや環境によってうまくいかない場合があるようで、その場合は次の方法②を試してみてください。
左右中央寄せにする(方法②)
方法①に比べて記述量が増えますが、親要素に『text-align: center; 』を指定することで中央寄せが可能です。
注意点としては、CSSの参考コードのように、『 display: inline-block 』を指定すること。
また、子要素も『text-align: center; 』影響を受けて、各文章の1文字目の位置がバラバラになってしまうので、『text-align: initial; 』で元に戻しましょう。
See the Pen writing-mode4 by fukumaru ryosuke (@fukumaru) on CodePen.
(※参考)『text-align: initial; 』を指定しなかった場合
各文章が縦方向に中央揃えになるので、「おはようございます。」が少し下がって見える。
See the Pen writing-mode7 by fukumaru ryosuke (@fukumaru) on CodePen.
文字と文字の間隔を空ける
文字と文字の間隔が詰まっているようにみえるけど、もっとスペースを空けられないのかな？
それも可能です。
これは横書きで文字間のスペースを確保する方法を一緒ですね。
『letter-spacing』を指定して、自由に間隔を設定しましょう。
See the Pen writing-mode5 by fukumaru ryosuke (@fukumaru) on CodePen.
幅方向に均等に配置する
最後に、いくつかの縦書き文章を等間隔で幅方向に並べる方法を紹介します。
先にコードを見てもらった方が分かりやすいかと思うので、以下に記載します。
See the Pen writing-mode6 by fukumaru ryosuke (@fukumaru) on CodePen.
おお、こんなことができるんだ。
便利ですよね。
ポイントとしては、『flex-direction: column』を指定すること。
また今回は『justify-content: space-around;』を指定しましたが、場合によっては『justify-content: space-between;』などと使い分けてみてください。
以上、『HTML/CSSで縦書きをマスターしよう』でした。
Web制作で縦書き文章に遭遇することは必ずあると思いますので、参考にしていただけると嬉しいです！
よし！テキスト全部縦書きにするぞー！！
