新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

文字をタテ書きにする方法【CSS3】

2019.3.4

文字をタテ書きにする方法【CSS3】
Web制作 0 0

こちらの記事は、このような方におすすめです。

・文字をタテ書きで表現したいとお考えのコーダーの方
・ホームページでの文字や文章の表現方法のバリエーションを増やしたい方

妙高Web屋LINE@ 友だち追加

一般的に、日本語のホームページを制作する場合、特に何かを指定しない限りは「横書き」で文字や文章が表現されます。

画面の「左上」を起点に、そこから右へ、行が変わる場合は上から下へと文字が流れていきます。

ところで。

文字を縦書きにしたいときは、どうすれば良いのでしょうか??

今回の記事は、CSSでその問題を解決する方法についてご紹介します。

この記事の目次

【結論】CSS3で文字を縦書きにする方法

まずは結論から。

こちらのコードで試してみてください。

p.className {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}

[vertical-rl]というのは、[vertical(タテ方向)]で、なおかつ[rl(文章が進むにつれて右から左に進む)]という状態を意味しています。

一方、IE等を想定したスタイル定義の[tb-rl]という値は、独自の仕様・独自の値とお考えいただければ幸いです。

また、タテ書きで右から左に行が進む文章の場合は、特定のエリアの右端に寄せておきたいという場合が多いのではないでしょうか?

ところが、ChromeやSafariといったブラウザはエリア内の右寄せになり、Firefoxは左寄せになってしまいます。

それを解消するには、外側のタグのクラス名を[.wrap]と仮定した上で、下記のようなコードで対応してみてください。

.wrap {
position:relative;
}
p.className {
position: absolute;
right: 0;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}

いかがでしょうか?

特にPCではヨコ長の画面が多いため、ヨコ書きで画面に収まっていた文字数でもタテ書きで収まらない可能性もあります。

その場合には画面をタテにスクロールする必要が発生してしまいますが、そうならない程度であれば、注目度を増す手段の1つとしても、タテ書きにしてみるのは有効だと思います。

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ