CSSで縦書きを表現しよう
ひとつ前の記事でPhotoshopで縦書き文字ツールで縦書きをする方法を書きましたが、今回はcssで文字を縦書きにする方法になります。
スポンサーリンク
横書きが基本となるWEBサイトにおいて縦書きを使用することは、和をイメージするのにとても効果的です。
日本の新聞や小説などは、上から下に。右から左へ。というように、縦書きに文字が流れるので、その影響も大きいと思います。
CSSで縦書きの方法
縦書きにする方法は、縦書きにしたい箇所にCSSを当てるだけなので、とても簡単です。
サンプルページを表示
writing-mode: vertical-rl;
※IEのサポートが終了しているので、IEのベンダープレフィックスは省略。
writing-modeのプロパティは以下の通りです。
プロパティ | 内容 |
---|---|
horizontal-tb | 横書き・改行は左から右へ |
vertical-rl | 縦書き・改行は右から左へ |
vertical-lr | 縦書き・改行は左から右へ |
日本語のみであればこのままで問題無いのですが、文中に英数字が入ってくる場合は注意が必要です。
英数字を含む縦書き
文中に英数字が含まれる場合、先述のcssでそのまま表示すると英数字が横方向を向いてしまいます。
前回のPhotoshopで縦書きを作った時と同じような感じですね。
Photoshopの縦書き文字ツールで英数字も綺麗に見せよう
英数字の文字方向の不具合を解消するには、以下のcssを使用します。
サンプルページを表示
writing-mode: vertical-rl; text-orientation: upright;
text-orientationのプロパティは以下の通りです。
プロパティ | 内容 |
---|---|
mixed | 英数字が横向き、かな・漢字は縦向きに表示 |
upright | 英数字、かな・漢字ともに縦向きに表示 |
sideways | 英数字、かな・漢字ともに横向きに表示 |
uprightを使用すれば特に問題はなさそうですが、場合によっては英数字のみ横に並べたほうが見栄えが良いケースもあります。cssでもPhotoshopと同じく縦中横ができます。
CSSで英数字を縦中横にする
英数字を縦中横にするには、以下のcssを使用します。
そのまま縦書きテキストに対して追加してしまうとテキスト全体が縦中横になってしまうので、縦中横にしたい部分にだけcssをあててあげるのがポイントです。
サンプルページを表示
text-combine-upright: all;
表示する文字、場所、読みやすさを考えて、綺麗に見えるようにcssを調整してあげるとよいと思います。
日本らしさを表現!CSSで文字の縦書きに挑戦! | Webクリエイターボックス
https://www.webcreatorbox.com/tech/writing-mode
【CSS】徹底検証!CSSで縦書きデザインをやってみる!
https://webdesignday.jp/inspiration/technique/css/3789/