まずは縦書きスタイルの適用のしかたから
例えばこんな文章を縦書きにしてみましょう。
「ふーん」
「決して、こっちの手を出しちゃ…
まずは縦書きエリアを用意します。
<div class="tate-area">
</div>
各行を、tate-line で囲みます。
<div class="tate-area">
<div class="tate-line">「ふーん」</div>
<div class="tate-line">「決して、こっちの手を出しちゃ…</div>
</div>
このままだと、こんな感じに表示されます。
括弧の表示を調整するには
tate-kakko、句読点の位置を調整するには
tate-kuto で囲みます。長音記号や三点リーダは
tate-cho で囲みます。ちいさい っ などは
tate-komoji で囲みます。
<div class="tate-area">
<div class="tate-line">
<span class="tate-kakko">「
</span>ふ
<span class="tate-cho">ー
</span>ん
<span class="tate-kakko">」
</span></div>
<div class="tate-line">
<span class="tate-kakko">「
</span> 決して
<span class="tate-kuto">、
</span>こ
<span class="tate-komoji">っ
</span>ちの手を出しち
<span class="tate-komoji">ゃ
</span><span class="tate-cho">…
</span></div>
</div>
すると、気持ちいい感じに表示位置が調整されます。
いちいちタグで囲んでゆくのは面倒なので、
横→縦 変換スクリプトを使って楽をしてください。
スタイルシートの設定などなど
そんなに面倒な作業は必要ないと思います。大まかな流れは、
- Webページの文字コードを "UTF-8" に設定する。(必須ではありませんが推奨です)
- 縦書きレイアウト用のスタイルシートを設定する
- 縦書き変換スクリプトで横書きテキストを縦書きhtmlに変換する。
- 生成されたhtmlコードをあなたのページのhtmlソースにコピペ。
- 完成!
縦書きレイアウトエリアの位置調整などに、スタイルシートの知識が少しだけ必要かもしれません。
では、順を追って説明。
1 . Webページの文字コードを "UTF-8" に設定する
htmlソースのヘッダ部分で文字コードを設定します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> 〜 </title>
</head>
<body>
…
</body>
</html>
2 . 縦書きレイアウト用のスタイルシート設定する。
スタイルシートは
コチラのページで公開しています。このスタイルファイル "tate-style.css" をあなたのページに適用してください。
下記のいずれかひとつの方法で、縦書きスタイルを使用したいhtmlに tate-style.css を適用してください。
1）
tate-style.cssの内容をコピーしてcssファイルを作成し、あなたのサイトの適当な場所に置いて、それを読み込む。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="あなたが保存した場所/ファイル名.css" type="text/css" />
<title> 〜 </title>
</head>
<body>
…
</body>
</html>
2）
tate-style.cssの内容をコピーして、あなたのhtmlファイルに直接記述。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
<--
この位置に記述します
-->
</style>
</style>
<title> 〜 </title>
</head>
<body>
…
</body>
</html>
3 . 縦書き変換スクリプトで横書きテキストを縦書きhtmlに変換する。
変換スクリプトは
コチラのページです。
縦書きレイアウトのhtmlソースを生成します。
<b> や <i> などの一部の文字修飾タグを使用可能です。
"「" "」" などの括弧の類いや記号などは、自動的に縦組み用の字形に変換されます。
半角英数字は自動的に全角英数字に変換されます。
4 . 生成されたhtmlコードをあなたのページのhtmlソースにコピペ。
<body> 〜 </body> の表示したい位置に貼付けてください。
縦書きレイアウトのエリアは <div class="tate-area" style="
xxx"> 〜 </div> です。ページ内での表示位置や、このエリアの横幅などを適宜調整する必要があるかもしれません。
positionや
widthなどのスタイル属性を追加で設定してください。
5 . さらに、古いブラウザとの互換性を求める場合は…。
CSS3のtransformプロパティに対応していない古いブラウザでもレイアウトが不自然にならないように、JavaScriptを仕掛けてみましょう。
詳しくは
コチラのページで解説しています。