- スタイルシートで縦書きページを作ろう

縦書き用スタイルシート [ 旧版 ]

割と重要なお知らせ
2010年10月、縦書き用スタイルシートの新版を掲載しました。
　　→ 縦書き用スタイルシート[ 新版 ]
特にこだわりが無い場合は、新版のほうを使ってみてください。
　　→ 新旧スタイルシートの違い
縦書きWebレイアウト用のスタイルシート "tategaki.css"です。

tategaki.cssの説明

  • div.tate
    縦書きエリアを<div class="tate">〜</div>で囲みます。
  • div.gyo
    一行を<div class="gyo">〜</div>で囲みます。
  • div.midashi_1、div.midashi_2、div.midashi_3
    <div class="gyo">〜</div>の代わりに<div class="midashi_x">〜</div>を使うと、その行が見出し行のように表示されます。
  • div.komoji
    拗音 / 促音（っ ゃ etc..）を<div class="komoji">〜</div>で囲んで、それらの表示位置を調整します。
  • div.kuto
    句読点を<div class="kuto">〜</div>で囲んで、それらの表示位置を調整します。
実際の表示サンプルは → こちらのページでどうぞ。

使いかた / 使用上の注意

  • 上記スタイルを、
    • htmlファイルの<head>〜</head>部分に、<style type="text/css">〜</style>で囲んで直接記述。
    • 別ファイルに保存して、htmlファイルから読み込む。
    • ウチのサイト(http://freefielder.jp/tate/css/tategaki.css)から読み込む。
    …などなどして使ってください。
  • 横書きと縦書きで字形が異なる文字(括弧や長音記号など)は、縦書き用の字形に変換する必要があります。
  • スペース(空白文字)や括弧などはブロック要素(<div>)で囲む必要があります。
  • 半角文字はレイアウトを崩します。
手作業でタグを埋め込んだり、字形を変換するのはとっても面倒なので、変換スクリプトを作ってみました。

横書きテキストから縦書きWebレイアウトに自動変換するスクリプトは → コチラ。
  • 横書き字形を縦書き字形に変換します。
  • 句読点などにタグを適用して、適切な位置に表示させます。
  • 半角文字を全角文字に強制的に変換します。