ホームページ作成/テキストの配置・装飾 (HTML,CSS)

文章を縦書きで表示する方法

ウェブ上での表示は「横書き」が基本です。しかし、Internet Explorerだけではありますが「縦書き」で文章を表示させることもできます。スタイルシートのプロパティ1つを使うだけで、簡単に縦書き表示を作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

ウェブ上での表示は横書きが基本です。英語には横書きしかありませんからそれで十分ですが、日本語などの一部の言語では縦書きの表記方法もあるため、ウェブ上でも縦書きで表示させたいと思うこともあるでしょう。 現在のところInternet Explorerだけですが、ウェブ上でも縦書きで文章を表示させることができます。

縦書きで文章を表示させるために必要な記述は、スタイルシートでたった1行です。 見栄えを整えるにはその他のプロパティも使う必要がありますが、縦書きにするために最低限必要なプロパティは1つだけです。

下記のサンプルは、Internet Explorerで閲覧すれば縦書きに見えるはずです。

謹賀新年

旧年中は大変お世話になり、ありがとうございました。 本年もどうぞよろしくお願い申し上げます。

二〇〇九年元日

下図は、上記のサンプルをInternet Explorerで閲覧した場合と、Safariで閲覧した場合の例です。
ここでは表示に毛筆フォントを使っています。同じフォントがインストールされている環境なら、そのフォントで表示されます。 インストールされていなければ標準のフォントなどが使われます。

Internet Explorerで縦書きを表示した例
▲Windows版 Internet Explorer 6.0 (7.0でも同様)
Safariで表示した例
▲Windows版 Safari 3.1(Firefox, Opera, Chromeなどでも同様)

今回は、上図のInternet Explorerの例のように、文章を「縦書き」で表示させる方法をご紹介いたします。

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます