[css]文字を縦書きにしてホームページを和風にしてみよう

今回は、ホームページを和風にする手段として、cssで文字を縦書きにする方法をご紹介したいと思います。これであなたのサイトをより和風にすることができるようになるのではないでしょうか。
縦書きをする方法は非常に簡単で、cssを１つ当てるだけで実現できてしまいます。では文字を縦書きにする方法をご紹介していきたいと思います。

HTMLで縦書き用にするクラスを当てておこう

CSSを当てるために、縦書き用のクラスを当てたHTMLを用意しておきましょう。今回は、三行くらいの文字にして見ましょう。

<div class="vertical_line">
 <p>四季折々の風情が織りなす</p>
 <p>日本の山川の自然を一望できる</p>
 <p>御料理と風景の織りなす非日常の空間をご提供します</p>
</div>

サンプルHTML

このように和風らしい文章を使って縦書きにしていこうと思います。

CSSで文字を縦書きにしてみよう

上述のHTMLに、vertical_lineというクラスを当てたので、こちらにcssで縦書きにするように記述していこうと思います。

文字を縦書きにするには、writing-modeを縦にする設定を入れていく必要があります。実際に記述していこうと思います。

<style>
 .vertical_line{
   writing-mode:vertical-lr;
 }
.vertical_line p:nth-of-type(2){
   text-indent:1em;
 }
 .vertical_line p:nth-of-type(3){
   text-indent:2em;
 }
</style>
<div class="vertical_line">
 <p>四季折々の風情が織りなす</p>
 <p>日本の山川の自然を一望できる</p>
 <p>御料理と風景の織りなす非日常の空間をご提供します</p>
</div>

CSSで縦書きにして見たサンプル（左から右へ）

ちょっとオシャレに文字を1文字ずつずらして見ました。

いかがでしょうか？和風らしさがやはり縦文字だと出て来ますね。
こちらは文字が左から右へ流れていくようにしましたが、もちろん逆も可能です。その場合は、vertical-lrをvertical-rlにして見てください。サンプルも載せておきます。

cssで縦書きにして見たサンプル（右から左へ）

このように先ほどのサンプルと逆にも可能です。

まとめ

今回は、cssで縦書きにすることで、あなたのホームページをより和風にする方法をご紹介させていただきました。縦書きにして写真を神社や、日本の豊かな自然、日本料理にするだけでグッと和風らしさが引き出せますね。ぜひそういった場面があれば活用して見てください。