CSSで縦書き表記にする方法を完全マスター!【簡単】

CSS

CSSで縦書き表記にする方法を完全マスター!【簡単】

2019年01月16日 8:00 

CSSで縦書き表記にする方法を完全マスター!【簡単】

おはようございます!社員Aです👩

今回は、CSSで縦書き表記にする方法を完全マスターしていきたいと思います。

CSSで縦書きを表現することは普段あまりないのですが、デザイン性の高いサイトや和風サイトでは取り入れることがあります。

その際にやり方をいろいろと調べたりするのですが、今回はCSSで縦書きを完全マスターしたいと思います。



 

CSSで文字を縦書きにするテクニック

まずは基本の縦書きテクニックについて見ていきましょう。

CSSで文字を縦書きにするには、「writing-mode」プロパティを使います。

表示

あいうえおaiueoあいうえお

 

ソース

 



文字の向きを揃えたまま縦書きにする

上記の「writing-mode」プロパティで簡単に縦書きにできましたが、英字は横向きのままになってしまいます。

この英字の向きを揃えるには、「text-orientation」プロパティを追記します。

表示

あいうえおaiueoあいうえお

 

ソース

 

英数字や記号を縦中央にしたまま縦書きにする

さらに、「text-combine-upright」プロパティを使うことで、英数字や記号を縦中央にしたまま縦書きにすることができます。

HTMLで記述する際に、先程まではPタグで囲むだけでしたが、縦中央にしたい英数字や記号をspanで囲います。

表示

10年間売上01

 

ソース

HTML
CSS
 

まとめ

縦書きをCSSで実装する頻度は少ないのですが、自分の備忘録も含めてまとめてみました!

英数字や記号も縦中央にしたまま実装できるので、便利ですね。

画像で実装するよりも、SEO面やカスタマイズ性も高くなるので、これから活用していきたいと思います。

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!