問題

22
HTML/CSS

文字を縦書きで表示しよう

ここでは文書のデフォルトである横書きスタイルから縦書きのスタイルに変更する方法について学んでいきます。 使用頻度は多くないですが、日本国らしい表現方法なので是非覚えておいてほしい内容です。

HTML/CSSの問題に挑戦しよう!

問題

文字を縦書きで表示しよう

文字を縦書きに実装してみましょう!
見本を参考にして実装してください。

期待する画面

解答の画像

解答と解説(文字を縦書きで表示しよう)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

縦文字を表現する際は、テキストの要素に対して
writing-mode というスタイルを付与してあげます。

但し、このままでは英数字が90°曲がってしまいますので
text-orientation: upright; というものも合わせて付与することで
適切な向きに自動的に設定されます。

補足

writing-modeプロパティは、デフォルト値だと水平を意味する「horizontal-tb」が設定されており、横書きで表示されます。
語尾にある「tb」はtop to bottomの略で、上から下へ改行することを表しています。
text-orientationは、テキストの向きを設定するプロパティになりますが、縦書きのテキストの場合でしか効果が発揮されないので注意しましょう。
text-orientationは今回の問題で登場した値以外にも、mixedやsideways、sideways-rightなどが存在します。
使用頻度は少ないですが、頭の片隅に入れておくといいでしょう。
また、文字を斜め向きに表示をさせたい場合は、transform: rotateを使用することで実現が可能です。

さらにスキルアップしたい方は公式LINEから「HTML/CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは? 適正コース診断