• Home
  • Web制作
  • 【CSS】text-orientation：縦書きデザインを使いこなす！文字の向きを自由自在に操る方法

【CSS】text-orientation：縦書きデザインを使いこなす！文字の向きを自由自在に操る方法

schedule
Tags: CSS

はじめに：縦書きWebデザインの可能性

近年、Webデザインにおいても、従来の横書きだけでなく、縦書きの表現が注目を集めています。縦書きは、日本語の美しさを引き立てたり、伝統的な雰囲気を演出したりするなど、Webサイトに独特の印象を与える効果的な手段です。

CSSには、要素内の文字の向きを制御する「text-orientation」というプロパティが用意されています。このプロパティを活用することで、縦書きと横書きを組み合わせた、より柔軟でデザイン性の高いWebページを作成することが可能になります。

本記事では、CSSの「text-orientation」プロパティについて、基本的な使い方から実際の活用例までご紹介します。

text-orientationの基本：縦書き・横書きを自在に操る

「text-orientation」プロパティは、要素内のインラインレベルのコンテンツにおける文字の向きを指定するために使用します。

書き方

.selector {
  text-orientation: 値;
}

プロパティ値

「text-orientation」プロパティで指定できる値は以下の通りです。

  • mixed:
    • 縦書きと横書きの混在を許可します。
    • ブラウザは、周囲の文字の向きに基づいて、最適な文字の向きを自動的に判断します。
  • upright:
    • 縦書きの行において、英数字などを横書きではなく縦方向に回転させずに表示します。
  • sideways:
    • 縦書きの行において、英数字などを90度回転させて縦方向に並べて表示します。

使用例

例えば、以下のように記述することで、指定した要素内の文字を縦書きで表示することができます。 

.vertical-text {
  text-orientation: upright;
  writing-mode: vertical-rl; /* 縦書き表示に必要なプロパティ */
}

活用事例：text-orientationで広がる表現の可能性

「text-orientation」プロパティを活用することで、以下のような表現が可能になります。

  • 縦書きのデザインアクセント
    • タイトルや見出し、メニューなどを縦書きにすることで、視覚的なアクセントを加え、ユーザーの目を引くことができます。
    • 特に、日本語の美しさを表現したい場合や、和風な雰囲気を演出したい場合に効果的です。
  • 表組みにおける縦書き表示
    • 表のセル内を縦書きにすることで、見やすく、スタイリッシュな表組みを実現できます。
  • 画像とテキストの組み合わせ
    • 縦書きのテキストと画像を組み合わせることで、デザイン性の高いレイアウトを作成できます。

まとめ：text-orientationでWebデザインを進化させよう

本記事では、CSSの「text-orientation」プロパティについて解説しました。

「text-orientation」プロパティを活用することで、縦書きと横書きを組み合わせた、より自由度の高いWebデザインを実現することができます。

ぜひ、本記事を参考に「text-orientation」プロパティを試していただき、表現豊かなWebサイト制作に役立ててください。

関連記事