目次
文字を縦書きにする方法
好きな季節は春です。とらりんです。
さてさて、今回は文字や文章を縦書きにしたい場合どうしたらいいのか、という漢字圏特有の問題に迫ってみようと思います。
改行
最もオーソドックスで間違いがない、でもhtml的には非常にダサい方法です。
参考ソースの掲載も割愛するぐらいです。
使い道があるとすれば、表内のタイトルなどのごく短い単語にはいいかもしれません。
幅指定
力技ですが、一文字分だけの横幅を指定すると縦書きになります。
しかし複数行には使えないのであまり実用的では無いですね。
CSSプロパティ
旧式な方法を試してきましたが、何を隠そう実はCSSに縦書きプロパティがあるのです。
その名も「writing-mode」。覚えやすいですね。
プロパティの代表的な値に下記があります。
| horizontal-tb | コンテンツは左から右へ水平に、上から下へ垂直方向に流れます。次の水平な行は、前の行の下に配置されます。 |
|---|---|
| vertical-rl | コンテンツは上から下へ垂直に、右から左へ水平方向に流れます。次の垂直な行は、前の行の左に配置されます。 |
| vertical-lr | コンテンツは上から下へ垂直に、左から右へ水平方向に流れます。次の垂直な行は、前の行の右に配置されます。 |
各ブラウザでの対応は下記参照。まだベンダーが必要なようです。
https://caniuse.com/#search=writing-mode
下記MDNサイトに詳しい説明がありますのでぜひ参考にされてください。
https://developer.mozilla.org/ja/docs/Web/CSS/writing-mode
まとめ
いかがでしたか。
特に和風なサイトでは文字を縦書きにしたい事があるかと思いますのでお役に立てますと幸いです。
ショップアイズは大阪のWeb制作会社「アイズオブシー」が運営する
Shopify（ショッピファイ）専門のEC構築サービスです。
Shopify（ショッピファイ）の構築・運用にお困りの場合は気軽に相談ください。
