文字を縦書きにする

できあがりイメージ

つくりかた

Step2 文字をカタカナに変更する

縦書きにするので文字をカタカナに変更しましょう。
横に並べるために<br>で改行もさせましょう。
アルファベットを縦書きにすると横向きの表示になります。

Step3 縦書きにする要素のCSSセレクタを探す

CSSのセレクタで h1 を探しましょう。
サンプルでは h1 に指定しています。
カタカナはアルファベットより大きく見えるので、font-size を60px と小さくしています。

Step4 文章を縦書きにする

writing-mode プロパティを追加して縦書きの設定にします。
writing-mode: vertical-rl; を追加して文章を縦書きにします。
サンプルでは縦書きにしたときに文頭がそろうようにしたいので、文字を中央にそろえる設定をしている text-align:center を削除します。

Step5 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step6 レイアウトを整える

margin プロパティを変更してレイアウトを整えます。
サンプルではh1が画面の中央にくるようにmargin を auto に指定します。
auto は要素（今回はh1）を自動で中央に配置してくれる設定です。

Step7 コードを書くかコピー＆ペーストする

コピーしたコードを目的の箇所にペースト（貼り付け）するか、直接書いてみましょう。

Step8 実際の見え方を確認する

文章が縦書きに変わっていたら完成です。