難易度:★★☆
プロパティ:writing-mode:verticle-rl
関連レッスン:Chapter2 レッスン2
header タグで囲まれているところに対し、CSSを反映させていきます。
縦書きにするので文字をカタカナに変更しましょう。
横に並べるために<br>で改行もさせましょう。
アルファベットを縦書きにすると横向きの表示になります。
CSSのセレクタで h1 を探しましょう。
サンプルでは h1 に指定しています。
カタカナはアルファベットより大きく見えるので、font-size を60px と小さくしています。
writing-mode プロパティを追加して縦書きの設定にします。
writing-mode: vertical-rl; を追加して文章を縦書きにします。
サンプルでは縦書きにしたときに文頭がそろうようにしたいので、文字を中央にそろえる設定をしている text-align:center を削除します。
コピーしたコードを目的の箇所にペースト(貼り付け)するか、直接書いてみましょう。
margin プロパティを変更してレイアウトを整えます。
サンプルではh1が画面の中央にくるようにmargin を auto に指定します。
auto は要素(今回はh1)を自動で中央に配置してくれる設定です。
コピーしたコードを目的の箇所にペースト(貼り付け)するか、直接書いてみましょう。
文章が縦書きに変わっていたら完成です。