【初心者向け】CSSで文章を縦書きにする方法|コード付きで解説

※本サイトにはプロモーション・広告が含まれています。

(最終更新日:2023年10月)

✔当記事がおすすめの方

「CSSで縦書きを実現する方法を知りたい」
「縦書きのCSSのコードを確認したい」
「縦書きCSSの具体的な例を見て学びたい」

✔当記事で得られる知識

  • CSS縦書きの基本概念
  • 縦書きCSSのコードの記述方法と応用
  • 実際の縦書きCSSの適用例

当記事では、CSS縦書きの基本から応用的なオプションを用いた実践的な使い方まで、具体的なサンプルを交えながら詳しく解説いたします。

ぜひ最後までお読みください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

CSSによる縦書きの基本

こちらでは、CSSによる縦書きの基本的な手法を解説します。

縦書きデザインを実現するための基本は、CSS(Cascading Style Sheets)によるテキストの表示制御です。

  • writing-modeプロパティ
  • 文字表示方向の調整

writing-modeプロパティ

縦書きの実現にはCSSのプロパティである「writing-mode」を利用します。

このプロパティを設定することで、テキストの流れを縦方向に変更可能。

writing-mode: vertical-rl;

これによりテキストは右から左へと縦に並びます。

文字表示方向の調整

文字自体の向きを指定するために、CSSプロパティ「text-orientation」を使用しましょう。

text-orientation: upright;

すべての文字が上向きになり、日本語だけでなく、英語や数字も上向きのまま縦書き表示が可能です。

ただし、これにより英数字が縦になるため、一部視認性に問題が生じることもあります。

適切な文字表示の調整をしてください。

英数字と縦中横の対応方法

こちらでは、縦書きデザインにおける英数字の扱いと、縦中横というテクニックについてご紹介します。

これらを適切に使用することで、視認性の高い縦書きデザインを作り出すことが可能です。

  • 英数字で縦書きデザイン
  • 縦中横の活用

英数字で縦書きデザイン

縦書きデザインでは、英数字が上下逆さまになり視認性に問題が生じます。

これを解決する方法のひとつは、英数字だけを横書きにすること。

これはCSSのプロパティである「text-combine-upright」を使って実現します。

text-combine-upright: digits 2;

2文字までの英数字を1文字分のスペースに収めて表示します。

縦中横の活用

「縦中横」は、縦書きの中で特定の文字だけを横に並べる書式のことです。

縦書き文中で年月日や時刻を表記する際などに用いられます。

HTMLでは、縦中横にしたい部分をspanタグで囲み、CSSで以下のように指定しましょう。

text-combine-upright: all;

これにより、該当部分が横書きになり、縦中横を再現できます。

縦書き時の文字配置

縦書きデザインをおこなう際、文字の配置についても注意が必要です。

中央揃えや字下げはデザインを決定づける重要な要素となります。

  • 中央揃えにする方法
  • 縦書き時の字下げ

中央揃えにする方法

縦書き時に、文字を中央揃えにする方法は簡単です。

text-align: center;

これにより、縦書き文節が容易に中央揃えになります。

縦書き時の字下げ

縦書きでも字下げをおこなうこと可能です

「text-indent」プロパティを用いましょう。

text-indent: 1em;

各段落の最初の行が1文字分下がります。

これは左から右への横書きにも同様に適用可能で、こちらでは左インデントです。

縦書きデザインと一緒に使いたい小技

ここでは、リンクの線装飾と振り仮名(ルビ)の表示設定について紹介します。

縦書きデザインをより引き立てるための小技も見ていきましょう。

  • リンクの線装飾の活用
  • 振り仮名(ルビ)の表示設定

リンクの線装飾の活用

リンクに線装飾を施すことで、縦書きデザインが一層引き立ちます。

text-decoration: underline;

リンク文字下部に下線が引かれます。

以下は、リンク文字中央に取り消し線が引く方法です。

text-decoration: line-through;

これらを駆使して、リンク部分を強調しましょう。

振り仮名(ルビ)の表示設定

振り仮名は、主に日本語の文章において文字の読み方を示すために使われます。

縦書きでも、うまく活用できるテクニックです。

「ruby」タグと「rt」タグを用いて、HTML上で振り仮名を表示できます。

応用編: 縦書きウェブサイトの作成

縦書きの知識を活かして、実際に縦書きウェブサイトを作成してみましょう。

HTMLとCSSのコード例を提供します。

  • HTMLコード例
  • CSSコード例

HTMLコード例

以下は、縦書きウェブサイトの簡単なHTMLコード例です。

<div class="vertical-writing">
  <p>これは縦書きのサンプル文章です。</p>
  <p>ここに<a href="#">リンク</a>を追加してみましょう。</p>
  <ruby>難解<rt>なんかい</rt></ruby>な単語には<ruby>振仮名<rt>ふりがな</rt></ruby>を付けます。
</div>

このコードでは、縦書きにする領域を”vertical-writing”クラスで指定しています。

CSSコード例

以下は、上記HTMLコードに対応するCSSコード例です。

.vertical-writing {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.vertical-writing a {
  text-decoration: underline;
}

.vertical-writing p {
  text-indent: 1em;
}

このコードでは、以下をおこなっています。

  • “vertical-writing”クラスに対して縦書きを設定
  • リンクに下線を追加
  • 各段落の最初の行を1文字分下げる

縦書きデザインの注意点

縦書きデザインは魅力的ですが、実装時にはいくつか注意すべき点があります。

文字間スペースと行間の調整、レスポンシブ対応の検討などを見てみましょう。

  • 文字間スペースと行間の調整
  • レスポンシブ対応の検討

文字間スペースと行間の調整

縦書きでは、文字間スペースと行間の調整が重要になります。

  • 「letter-spacing」プロパティ:文字間を調整
  • 「line-height」プロパティ:行間を調整

これらの設定は読み易さに大きく影響するため、適切な値を探すために試行錯誤が必要です。

レスポンシブ対応の検討

スマートフォンなどの小さい画面でも、読み易いデザインにすることは重要といえます。

なぜなら縦書きは、小さい画面で読むのが困難になることがあるからです。

レスポンシブ対応をおこない、デバイスによって横書きに切り替えるなどの配慮しましょう。

まとめ: 縦書きデザインを活用して印象的なウェブコンテンツを作ろう

縦書きデザインの基本的な手法と注意点を見てきました。

この知識を活かせば、伝統的な日本語の美しさを反映した縦書きデザインをウェブ上で表現できます。

縦書きデザインは新鮮さと魅力を持つため、ユーザーの興味を引きつける強力なツールです。

さまざまなデザインやレイアウトを試してみて、自分だけの縦書きウェブサイトを作成してみてください。

これからも縦書きデザインを学び、探求し、さまざまなウェブコンテンツで活用していくことを強くおすすめします。

タイトルとURLをコピーしました