今回解説していく内容は以下です！
本記事の内容
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」を使ったサンプルになります！
「px」 – 決まったpx数で指定する
まとめ
いかがでしたか？今回は、CSSを使用した文字の縦書きと行間調整について説明させていただきました。ちょっと他のWebサイトと差をつける。デザインにこだわりたいということであれば文字を縦書きにするのもありなんじゃないかと思います。ぜひ、いろいろ試してデザインに役立ててみてください！
コメント