回転 / 縦書き デザイン見本
CSS の transform: rotate() や writing-mode を使った要素の回転・縦書き表示の実装デモ。見出しラベルや縦組みレイアウトにすぐ使えるコードを掲載しています。
① transform: rotate() — 要素の回転
現在: transform: rotate(0deg)
<span class="box">Rotate Me!</span>.box {
display: inline-block;
transform: rotate(0deg);
transition: transform 0.4s ease;
}要素を指定した角度だけ回転させます。単位は deg（度）で、正の値は時計回り、負の値は反時計回りです。inline 要素に適用する場合は display: inline-block が必要です。transition と組み合わせるとアニメーション付きの回転が簡単に実装できます。回転の起点はデフォルトで要素の中心ですが、transform-origin を合わせて指定することで左上・右下など任意の点を起点にできます（例: transform-origin: top left;）。
② writing-mode — 縦書きの基本
吾輩は猫である。名前はまだない。どこで生れたかとんと見当がつかぬ。
現在: writing-mode: horizontal-tb
<p class="vertical-text">吾輩は猫である。名前はまだない。</p>.vertical-text {
writing-mode: horizontal-tb;
}テキストの書字方向を指定するプロパティです。horizontal-tb（横書き）が既定値で、vertical-rl は右から左へ流れる縦書き（日本語の伝統的な縦組み）、vertical-lr は左から右へ流れる縦書きになります。要素に height を指定すると折り返し位置を制御できます。
③ text-orientation — 縦書き時の文字の向き
Web2.0の時代
現在: text-orientation: mixed
<p class="vertical-text">Web2.0の時代</p>.vertical-text {
writing-mode: vertical-rl;
text-orientation: mixed;
height: 120px;
}writing-mode: vertical-* を指定した縦書きテキスト内での、各文字の向きを制御します。mixed（既定）は日本語・中国語は直立でラテン文字は90°回転、upright はすべての文字を直立、sideways はすべての文字を横倒しにします。英数字を縦書きで自然に見せたいときは upright が便利です。
④ 縦書き応用 — サイドラベル / 縦見出し / 縦ナビ
サイドラベルを使ったレイアウト例。縦書きテキストがセクションのアクセントになります。
縦書き見出し
縦書きの見出しと横書きのコンテンツを組み合わせたブロックの例です。
現在: サイドラベルスタイル
<div class="section-wrap">
<span class="side-label">SECTION</span>
<div class="section-content">
<p>コンテンツテキスト</p>
</div>
</div>.section-wrap {
display: flex;
align-items: flex-start;
gap: 16px;
}
.side-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.15em;
color: #2563eb;
border-left: 2px solid #2563eb;
padding-left: 6px;
}writing-mode: vertical-rl だけでは文字が右から左へ流れるため、rotate(180deg) を組み合わせることで「下から上」方向の縦書きラベルが作れます。letter-spacing を広めに設定することで縦書き特有の美しいリズムが生まれます。縦ナビでは各リンクに writing-mode を適用するだけで、シンプルな縦型メニューになります。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
