CSSで文字を縦書きにする方法

CSS
スポンサーリンク
Toshi
Toshi
今回は、CSSで文字を縦書きにする方法について説明します。一般的なWebサイトは横書きですが、目を引くデザインにするためには CSS で文字を縦書きにしても良いんじゃないでしょうか?では、早速解説します!

今回解説していく内容は以下です!

 本記事の内容

・CSSで文字を縦書きにする方法


スポンサーリンク

CSSで文字を縦書きにする方法

CSSで文字を縦書きする方法は「writing-mode」を使っていきます!


C SSでおしゃれにデザインを

ということでこんな感じの縦書きをサイトに入れたらなんかおしゃれな感じが出るんじゃないかと思ってます。ちょっと「C」はアニメーションにこだわってみたんですが、アニメーションで色を変化させていく話は後日したいと思います。ということで実際にサンプルコードと内容をみていきましょう!

サンプルコード


CSSで
おしゃれに
デザインを1


CSSで
おしゃれに
デザインを2


CSSで
おしゃれに
デザインを3

.sample2{
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
}
.sample3{
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}
.sample4{
  -webkit-text-orientation: upright;
  text-orientation: upright;
}

 

サンプルをみていただくとわかる通り、右から左に、左から右に文字を読んで行くようにするのか?英数字は立てるのか、倒したままなのか?指定することができます。

わかりやすく、縦書きについて書いてあった記事を発見したので詳しくはそちらを確認してみてください。名前は…

縦書きWeb
普及委員会

だそうです。

面白い。。。

縦書きと横書きを組み合わせてみてもおしゃれなサイトが作れそうですね!

番外編:CSSの行間調整

今回、CSSで文字を縦書きにする方法についてざっくりと説明させてもらったわけなんですが…そこで思ったのが行間調整も必要なんじゃないかなって。ちなみに行間を調整する際には以下のコードを使います。

letter-spacing:値;

行間調節をするにはletter-spacing:1.2em;
行間調節をするにはletter-spacing:12px;

上記は、「em」と「px」を使ったサンプルになります

「em」 – フォントサイズに応じて字間が決まる
「px」 – 決まったpx数で指定する

まとめ

Toshi
Toshi

いかがでしたか?今回は、CSSを使用した文字の縦書きと行間調整について説明させていただきました。ちょっと他のWebサイトと差をつける。デザインにこだわりたいということであれば文字を縦書きにするのもありなんじゃないかと思います。ぜひ、いろいろ試してデザインに役立ててみてください!

 

 

コメント