HTML_CSS
Googleでログイン
問題22：文字を縦書きで表示しよう
文字を縦書きに実装してみましょう!
見本を参考にして実装してください。
見本を参考にして実装してください。
期待する画面
解答ソースコード
<div>
<p>ninjacode ☆忍者CODE☆ この文字を縦書きしよう</p>
</div>
¥HTML¥
p {
writing-mode: vertical-rl;
text-orientation: upright;
}
¥CSS¥
補足
writing-modeプロパティは、デフォルト値だと水平を意味する「horizontal-tb」が設定されており、横書きで表示されます。
語尾にある「tb」はtop to bottomの略で、上から下へ改行することを表しています。
text-orientationは、テキストの向きを設定するプロパティになりますが、縦書きのテキストの場合でしか効果が発揮されないので注意しましょう。
text-orientationは今回の問題で登場した値以外にも、mixedやsideways、sideways-rightなどが存在します。
使用頻度は少ないですが、頭の片隅に入れておくといいでしょう。
また、文字を斜め向きに表示をさせたい場合は、transform: rotateを使用することで実現が可能です。
語尾にある「tb」はtop to bottomの略で、上から下へ改行することを表しています。
text-orientationは、テキストの向きを設定するプロパティになりますが、縦書きのテキストの場合でしか効果が発揮されないので注意しましょう。
text-orientationは今回の問題で登場した値以外にも、mixedやsideways、sideways-rightなどが存在します。
使用頻度は少ないですが、頭の片隅に入れておくといいでしょう。
また、文字を斜め向きに表示をさせたい場合は、transform: rotateを使用することで実現が可能です。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
writing-mode というスタイルを付与してあげます。
但し、このままでは英数字が90°曲がってしまいますので
text-orientation: upright; というものも合わせて付与することで
適切な向きに自動的に設定されます。