「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

ページの一部を縦書きに

パソコンお助け情報

ホームページ作成

困った Webページの一部をフォントで縦書きにしたい。

解決した スタイルシートで出来る方法がありますが、W3Cの1996年勧告(Cascading Style Sheet Level 1)にないもので、Internet Expiorer 5.5 6.0でのみ対応していて一般的ではありません。このページを Mozilla Firefox で見ると下の縦書きサンプルが横書きに表示されます。

どのブラウザでも表示できるようにするためには、画像にする方法が良いと思います。ここではスタイルシートによる方法とフリーソフトを紹介します。

縦書きのスタイルシート

縦書きのスタイルシートは writing-mode: tb-rl; を使います。

writing-mode の値
tb-rl top to bottom, right to left 上から下へ、右から左へ という意味で、ほかに
lr-tb left to right, top to bottom 左から右へ、上から下へ という横書きモードがあります。
(縦書きの文章の中に横書きを入れるときに使うのだと思います。)

仏所遊履
国邑丘聚
靡不蒙化
天下和順
日月清明
風雨以晴
災助s起
国豊民安
兵戈無用
崇徳興仁
務修禮譲

左の例は無量寿経の一節です。
実際の使い方は、<body>の中に入れればページ全体が縦書きに、<p>の中に入れればその段落が縦書きになります。

<p>(段落)のスタイルシートに width(幅) と height (高さ)及び各行末に<br>(改行)を入れます。
丁寧にするには更に
line-height(行間)
letter-spacing(文字間隔)
段落の位置
などを設定します。

上の縦書きサンプルのソースです。
<p style="writing-mode:tb-rl;width:11em;height:4em;float:left;">
仏所遊履<br>
国邑丘聚<br>
靡不蒙化<br>
天下和順<br>
日月清明<br>
風雨以晴<br>
災助s起<br>
国豊民安<br>
兵戈無用<br>
崇徳興仁<br>
務修禮譲<br>
</p>

フリーソフトによる方法

縦書きにする部分をHTMLファイルの中で縦書きに出来れば、<pre>(整形済みテキスト)要素でそのままブラウザで表示できるのですが、縦書きに出来るアプリケーション(Wordや縦書き機能のあるエディタ)からコピーしてHTMLファイルを編集しているエディタに貼り付けても、横書きになってしまいます。

そこで縦書きHTMLというフリーソフトを使います。

フリーソフトの「縦書きHTML」は http://go.to/tategaki/  からダウンロード出来ます。Windows98/Me/2000版とWindows XP 版の2種類あります。ダウンロードしたファイルは自己解凍型ファイルでダブルクリックすると指定したフォルダに解凍して、プログラムメニューに登録したりデスクトップにショートカットを作ったり出来ます。

tate.exe を実行するとテキストを入力するテキストボックスと、<pre>(整形済みテキスト)縦書きにしたソースが表示され、フォントサイズ・1行文字数・文字間隔・行間などの書式が設定出来ます。更に設定ボタンで縦書きに変換されたソースをクリップボードにコピーする設定にしておくと、編集中のHTMLエディタにコピー出来ます。

使い方は馴れないと書式の設定が面倒ですが、いろいろやってみて目的の書式にします。

HTML4.01では推奨されないタグの<font>や<center>を使ったり、フォントを設定していないのに</font>と入ったり、スタイルシート使用が推奨されている<tt>(等幅フォント)を使用していますので、HTMLファイルの再編集の必要があります。

上の例を<pre>だけにしてみたサンプルファイルです。 (2005/8/5 UP 2005/8/8 add)


「陽だまり」ホームページ > パソコンお助け情報INDEX > Webページ作成 INDEX

作成&連絡先 NET・陽だまり