2024年1月19日

初心者でもコピー＆ペーストで実装できるpure cssサンプル。縦書きレイアウト実践ソースコード。

サイトのデザイン上の都合や、日本語風のテキスト表示をしたい場合に、稀に必要となるのがhtml上での縦書きレイアウトです。

数字も英語も伸ばし棒も表示できますし、レスポンシブ対応することも可能です。

本記事では縦書きレイアウトのデザインサンプルを紹介・解説します。ピュアCSSで実装していますので、通常のhtmlウェブサイト・WordPressなど幅広く利用いただけると思います。

縦書きレイアウトのCSS/HTMLサンプルソースコード（日本語/英語/数字/伸ばし棒OK・中央寄せ/右寄せ）。コピペ可。

早速、ソースコードを掲載します。コピペしてご利用ください。

CSSソースコード　※ダブルクリックでコピペできます

HTMLソースコード　※ダブルクリックでコピペできます

実行結果

簡単に解説しておきましょう。

このように、縦書きレイアウト自体は簡単に設定できます。基本はCSSで「writing-mode: vertical-rl;」「text-orientation: upright;」を設定するのみです。これだけでCSSが適用されている範囲が縦書きに変更されます。

text-orientationには他のオプションもありますが、基本的には「upright」を設定しておけば問題ありません。

あとは縦書きなので縦幅を指定するために「height: 500px」を指定し、英数字の連続でもレイアウトが崩れないように「word-break: break-all;」で綺麗に折り返されるように指定しています。

なお、縦書きの文章は標準だと左寄せになってしまいます。これを右寄せにしたい場合や中央寄せにしたい場合は、さらにもう１つdivで囲ってFlexboxで位置を指定します。text-alignやfloatでも対応できるかと思いますが、Flexboxが最も周りのCSS設定の影響を受けずに位置指定できます。

「display: flex;」「justify-content: center;」の部分で、中央寄せの場合は「center」、右寄せの場合は「right」を指定してください。

レスポンシブ対応！段組み式の縦書きレイアウトのCSS/HTMLサンプルソースコード。コピペOK。

上記のサンプルの場合、文章が長くなるとスマホなどで崩れてしまいます。レスポンシブ対応したいウェブサイトで縦書きレイアウトを導入する場合は、以下のサンプルコードで段組み式の縦書きレイアウトにするのがオススメです。

CSSソースコード　※ダブルクリックでコピペできます

HTMLソースコード　※ダブルクリックでコピペできます

実行結果

縦書きレイアウトを段組み化するのに必要なのは「column-count: 2;」をCSSに追加するのみです。さらに「column-gap: 20px;」の値で段組みの配置を調整できるので、適切な数値を設定してください。

ただし、この段組み式の縦書きレイアウトには弱点があります。

「width: 90vw;」などの幅調整を入れないとスマホなどで見切れが発生してしまうのですが、設定を入れると逆にＰＣなどの解像度が高い画面で見ると余白が発生してしまうのです。@media（メディアクエリ）でレイアウトごとに設定を変えるなどの微調整が必要になります。

また、段組みが長くなると真下のコンテンツと重なってしまう問題が発生する場合もあります。こちらもレイアウトごとに調整が必要となる場合があります。

ちょっと面倒ではありますが、レスポンシブ対応の縦書きレイアウトの場合は、幅に合わせた調整を緻密に入れていきましょう。

【参考】縦書きレイアウトのデザイン例

最後に縦書きレイアウトをうまく使っているサンプルをご紹介します。是非美しい縦書きレイアウトのアイデアの参考にしてください。

See the Pen
Sign Up page: Minimalist Japanese Style by Siddharth Hubli (@SRHubli)
on CodePen.

こちらはログイン画面で縦書きをワンポイントで使ったサンプルです。

See the Pen
News Card Animation Slider by Andrei (@lightmyfire)
on CodePen.

左側の月表示の部分でワンポイントで縦書きを使っています。カードっぽいレイアウトで、スペースを上手く使って縦書きを入れるとかっこいいデザインになります。

See the Pen
CSS matrix: writing-mode Reloaded by Kseso (@Kseso)
on CodePen.

縦書きの電光文字が落ちてきます。実用性はないですが面白いですね。

以上となります。

縦書きレイアウトを使って素敵なウェブサイトを作ってくださいね。