0%

Programmingプログラミングナレッジ

Posted:2019.03.17

CSSでテキストの縦書きに対応する

クライアントワークで縦書きのテキストを扱うケースがあったので備忘録として残しておきます。CSS3以降、様々な機能拡張が進められており、javascriptなどを使わず手軽に実装できるようになってきているようですね。

 

writing-modeでテキストを縦書きにする

テキストはデフォルトで左から右の横書きになっていますが、writing-modeというプロパティで縦書きを適用することができます。このプロパティはブラウザ間で対応状況が異なるのでベンダープレフィックスをつけておくといいでしょう。

// HTML
<p class="tategaki">いろはにほへと ちりぬるを<br>わかよたれそ つねならむ
</p>

// CSS
.tategaki {
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
}

 

実際にこのプロパティを適用するとこんな感じになります。せっかくなのでフォントも明朝体などにしてみました。

いろはにほへと ちりぬるを
わかよたれそ つねならむ

 

writing-modeのプロパティに使える値は下記のようになっています。表記方向が記載されているので覚えやすいのではないでしょうか。

 

horizontal-tb 左から右方向へ水平にテキストが表記(=横書き)されます。※top to bottom
vertical-lr 左から右方向へ垂直にテキストが表記(=縦書き)されます。※left to right
vertical-rl 右から左方向へ垂直にテキストが表記(=縦書き)されます。※right to left

 

また、縦書きにした時の各プロパティですが、横書きとはテキストの方向軸が異なるのでこちらも変わります。テキストの調整をするときに必要となりますので合わせて覚えておきたいですね。

 

text-align leftで上端に揃える、centerで中央軸に揃える、rightで下端に揃える
line-height 左右への行の間隔を調整できる
letter-spacing 文字の上下間の間隔を調整できる

 

 

text-orientationで半角英数字も縦書きに合わせる

writing-modeのプロパティでテキストを縦書きにすることができましたが、そのままですと半角英数字だけ文字の表記方向が異なります。

ABCDE ABCDEFG
12345 1234567

 

そこで全角文字と表記方向を合わせたいときは、下記のようにtext-orientationというプロパティで調整することが可能です。

// HTML
<p class="tategaki-all">ABCDE ABCDEFG<br>12345 1234567
</p>

// CSS
.tategaki-all {
 -webkit-writing-mode: vertical-rl;
 -ms-writing-mode: tb-rl;
 writing-mode: vertical-rl;
 text-orientation: upright;
}

 

text-orientationのプロパティで値をuprightにすることで全角文字と半角文字の全てが縦書きに揃いました。ちなみに初期値にはmixedという値が設定され、こちらは文字に合わせて自動的に適切な方向で表示されるようになります。

ABCDE ABCDEFG
12345 1234567

 

ちなみに、このtext-orientationのプロパティですが、現在のところIEとsafariは未対応になっています。使用する際は注意するようにしましょう。

 

(参考にさせて頂いたサイト)
CSS3で縦書きにする方法と挙動

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】