縦書きのＨＰの作り方
俳句・短歌・漢詩などは、
縦書きレイアウトにしたいところですね。
スタイルシート「css」を使えば、
それが比較的簡単に出来るようになりました。
最新のインターネットエクスプローラーでは、
ｈｔｍｌページの本文内容を、
縦書きにすることができるようになりました。
いままで縦書き文章を作成するのは、
大変面倒でしたが、
「css」 この方法を使えば、
何気なく書いた内容がブラウザで、
表示をおこなうと、 一発で縦書きになってしまいます。
その方法は非常に簡単です。
ライティングモードと言われる、
スタイルシート「css」を使います。
まず単純に縦書きにするための
スタイルシートを使う方法です。
bodyの中で 縦書きにしたい文章を
<div style="writing-mode:tb-rl">
ここに縦書きにする文章を書く。
</div>
で囲みます。
そうすると書いた文章は、
縦書きには成るのですが、
少し問題があります。
通常、縦書きは右側から書き始めますので、
「writing-mode:tb-rl;」とすると、
縦書きの文章はブラウザの画面右側に表示されます。
そこでブラウザを立ち上げたときに、
画面を左にスクロールしてやらないと、
右端に表示された縦書き文字は見えないことになります。
ページの内容全てを、
右端から表示させるには、
以下のタグをご参照下さい。
「css」を使って縦書きにするソース例
<html>
<head>
<title>htmlを縦書き表示する</title>
</head>
<body>
<body style="direction:rtl">
<div style="direction:ltr; writing-mode:tb-rl">
縦書きにする文章を入れます。
（この部分は縦書き）
<div style="writing-mode:lr-tb">
横書きの文章を書きます。
（この部分のみ横書き）
</div>
（再び縦書き）
</div>
</body>
</html>
戻る
ホームへ
メールは、こちらからどうぞ!
copyright (c) tomy. all rights reserved.