忍者CODE

ログイン

22
文字を縦書きしよう

PHPの問題

HTML_CSS

Googleでログイン Twitterでログイン
問題
文字を縦書きに実装してみましょう!
見本を参考にして実装してください。
期待する画面
ログインして解答を見る
コードのアイコン

解答ソースコード

            <div>
  <p>ninjacode  ☆忍者CODE☆  この文字を縦書きしよう</p>
</div>
¥HTML¥
          
            p {
    writing-mode: vertical-rl;
    text-orientation: upright;
}
¥CSS¥
          
答えのアイコン

解説

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

但し、このままでは英数字が90°曲がってしまいますので
text-orientation: upright; というものも合わせて付与することで
適切な向きに自動的に設定されます。
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
コース一覧のアイコン

有料コース一覧
甲賀KOGA

プログラミングスキルが
一気に上がる!
有料級の解説動画19本
を今なら無料でGETできる!

忍者CODEの公式LINE登録後
LINE内にあるURLよりご覧になれます

  • プログラミング本気で学習してる方
  • もちろん完全無料で且つ手続き不要
  • 将来プログラミングで稼ぎたい方
  • 動画解説で真剣に学びたい方
スキルアップ動画をGET