縦書きWebレイアウト用のスタイルシート "tate-style.css"です。コピーしてお使いください。

※ 2013.03.27 font-family設定をアップデート。
※ 2011.07.03 細か〜い修正をしました。詳しくは → こちらで。

tate-style.cssの説明

  • div.tate-area
    縦書きエリアを<div class="tate-area">〜</div>で囲みます。
    font-size … 縦書きエリア内の基準フォントサイズ。
  • div.tate-line
    一行を<div class="tate-line">〜</div>で囲みます。
    line-height … 文字の上下間隔。
    margin-right, margin-left … 改行ピッチ。
  • span.tate-komoji
    拗音 / 促音(っ ゃ etc..)を<span class="tate-komoji">〜</span>で囲んで、それらの表示位置を調整します。
  • span.tate-kuto
    句読点を<span class="kuto">〜</span>で囲んで、それらの表示位置を調整します。
  • span.tate-cho
    長音記号や波線、三点リーダなどを<span class="tate-cho">〜</span>で囲んで、時計回りに90度回転&左右反転させて、あたかも縦書き用字形のように表示します。
  • span.tate-kakko
    括弧を<span class="tate-kakko">〜</span>で囲んで、時計回りに90度回転させて、あたかも縦書き用字形のように表示します。
  • div.tate-separator
    新聞のような、縦書き多段組のレイアウトを実現するときに、段と段との区切りとして使用します。
  • .font08 〜 .font24
    フォントサイズを変更する際、これらのクラスセレクタを使うと、文字のセンターと行のセンターがずれなくなります。
    <span class="font18">文字列</span> とすると、文字列が18ポイントのフォントサイズで表示されます。
    同様に、フォントサイズ変更に<font>タグを使用した場合、また見出しタグ(<h1> ... <h4>)を使用した場合にも、行のセンターと文字のセンターが常に合うようにスタイルシートを変更しました。
実際の表示サンプルは → こちらのページでどうぞ。

使いかた

サンプルページ縦書きページのつくりかたを参照してください。

手作業でタグを埋め込んだりするのは面倒なので、横書きテキストから縦書きWebレイアウトに自動変換するスクリプトを作ってみました。
  • 横書きと縦書きで字形が異なる文字の場合、タグを適用して縦書き用に回転させて表示させます。
  • 句読点などにタグを適用して、適切な位置に表示させます。
  • 半角文字を全角文字に強制的に変換します。

そのた

できるだけクロスプラットフォーム / クロスブラウザで綺麗に縦書き表示ができるようにがんばっています。

CSS3で定義されるtransformプロパティが実装されているブラウザからの閲覧であれば、正常に表示されます。
: FireFox 3.5〜、Safari 3〜、Google Chrome、Opera 10.5〜。
Internet Explorerについては、filterプロパティで代用することでIE6以降に対応しています。
おそらく閲覧者の90%以上はフォローできる筈です。→ 参考ブログ記事
transform未対応ブラウザで閲覧すると、"ー"などが横に寝たままの字形で表示されてしまいます。これを回避するためのJavaScriptを書いてみました。こちら

アップデートポリシー

現在、このスタイルシートに比べてよりページ作成が簡単で汎用性の高い縦書き変換JavaScript h2v.jsを製作・配布しています。そのため、当ページで公開している縦書き用スタイルシートを更新することは、おそらくありません。

ご了承ください。

参考:過去のアップデートポリシー

このスタイルシート tate-style.css は、より良い表示を実現するために、しばしばアップデートを行います。
その際、後方互換性を維持するために、基本的に以下のポリシーに基づいて手を加えます。

  • 以前のバージョンで設定していたセレクタやプロパティの削除 / 変更は行いません。
  • 新しく設定するセレクタは、以前のバージョンと衝突しないような名前を付けます。
つまり、古いバージョンで定義したスタイルは、新しいバージョンでも常に有効です。あなたのWebページのhtmlソースを書き換える必要は全くありません。スタイルシートを置き換えるだけで、以前作成したページのスタイルはそのまま有効、これから作成するページでは、新しいバージョンのスタイルシートで新たに定義されたスタイルを使用できます。