3/4 文章を縦書きで表示する方法 [ホームページ作成] All About

縦書きで表示させるスタイルシートのまとめ

冒頭のサンプルのように表示させるソースをまとめてご紹介いたします。

■HTML：

<div class="vertical">
   <p class="head">
      謹賀新年
   </p>
   <p class="body">
      旧年中は大変お世話になり、ありがとうございました。
      本年もどうぞよろしくお願い申し上げます。
   </p>
   <p class="foot">
      二〇〇九年元日
   </p>
</div>

■スタイルシート：

<style type="text/css"><!--
   div.vertical {
      writing-mode: tb-rl;  /* 縦書き表示の指定 */
      width: 360px;           /* 横幅 */
      height: 185px;          /* 高さ */
      padding: 10px;          /* 内側の余白量(10px) */
      line-height: 1.8;       /* 行の高さ(1.8文字分) */
      overflow: auto;         /* はみ出る領域の指定 */
      font-family: "HGP行書体","HG正楷書体-PRO"; /* ※ */
      background-color: #fffff0;  /* 背景色(淡い黄色) */
      border: 4px double black;   /* 枠線(黒の二重線4px) */
   }
   div.vertical p.head {
      font-size: 150%;     /* 文字サイズ(1.5倍) */
      margin: 0px;         /* 外側の余白(なし) */
   }
   div.vertical p.foot {
      text-align:right;    /* 右寄せ(縦書きだと下寄せ) */
      margin: 0px;         /* 外側の余白(なし) */
   }
   div.vertical p.body {
      margin: 1em;         /* 外側の余白(1文字分) */
   }
--></style>

※ここでは毛筆などのフォントで表示されるよう、フォント名を列挙しています。しかし、指定したフォントがインストールされていない環境では標準のフォントで表示されてしまいます。できるだけ毛筆系・草書系のフォントで表示できるように、ここではフォント名をたくさん列挙しています。上記ソースでは2つしか記述していませんが、この記事中のサンプルではもっと記述しています。実際の記述内容はこちら。

上記のソースを表示させると、以下のように見えます。

謹賀新年

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

二〇〇九年元日

Internet Explorerであれば縦書きで表示されます。