CSSで縦書きテキストを90度倒す方法

CSSを使用してテキストを縦書きにする方法はいくつかありますが、特定の状況下ではテキストを90度回転させる必要があるかもしれません。これは、writing-mode: vertical-rl;text-orientation: sideways;の2つのCSSプロパティを組み合わせることで達成できます。

以下に、日本語のテキストを縦書きにし、さらに90度回転させる例を示します。

<p style="writing-mode: vertical-rl; text-orientation: sideways;">これはテストテキストです。</p>

このコードでは、writing-mode: vertical-rl;がテキストを縦に並べ、text-orientation: sideways;が各文字を90度回転させます。

ただし、text-orientation: sideways;プロパティはまだ全てのブラウザでサポートされていないので、使用する際には注意が必要です。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール