縦書きHTML

昔、よく「このサイトはNetscape Navigatorでご覧ください」とか
「このサイトはInternet Explorer用です」とか書いてあるサイトがあって、非常にむかつきました。客に制約を課すな！と思うんです。

ですがこの記事においでのみなさん、この記事だけはInternetExplorerでご覧ください。

背景イラスト「年賀状・干支イラスト桜屋」: 作者の方のブログ「イラスト素材ブログ」

これはイラスト以外はすべてHTMLで書いています。そして、InternetExplorerで見た場合のみ縦書きで表示されます。理由はInterbetExplorer特有の機能を使っているからです。

Webの世界で言えば、この記事は欠陥品です。なぜならばInternetExplorerでしか見ることができない。訪れてくれた人に向かって「InternetExplorerで見ろ！そーでない客お断り」と言っている状態が今見ているページです。そんなものは完璧な欠陥品です。

では全く使えないのでしょうか？いいえ使えます。縦書き表示ができるブラウザはInternetExplorerだけです。これは非常に優れた機能です。

HTMLやブラウザを使うのは、必ずしもインターネットだけではありません。
これは個人的なことですが、わたし自身はWindows用のソフトウエアを作る時によく、InternetExplorerを埋め込みます。埋め込んでしまえば、firefoxやGoogle Chromeへの対応を考える必要はなく、強力な機能が使いまくりです。

ではプログラミングをしない人にはどんな使い道があるのか？

例えば上のように、HTMLでレイアウトをすれば、画像ソフトなしでも年賀状が作れます。
実際上の年賀状はイラストを除いて、すべてHTMLだけで実現しています。

<div style="background:url('URL') bottom right no-repeat;width:10cm;height:14.8cm;padding:0;writing-mode:tb-rl;font-family:'HG正楷書体-PRO'">
	<p style="font-size:6em;font-weight:bold;color:#d00;margin:20px 20px 0 0">謹賀新年</p>
	<p style="font-size:1.6em;font-weight:bold;margin-top:1em">慎んで新年のお喜びを申し上げます</p>

	<div style="margin:17em 15em 0 0;padding:0">
		<p style="font-size:2em;font-weight:bold">東京都千代田区永田町一ノ一</p>
		<p style="font-size:2em;font-weight:bold;margin-top:6em">やまだ たろう</p>
	</div>
</div>

writing-mode:tb-rlが縦書きを実現するスタイルです。

ライティングモードがtb-rl
top to bottom かつ right to left つまり上から下かつ右から左という意味です。

これが指定されたdivタグの中だけが縦書きになっています。

font-family:’HG正楷書体-PRO’が書体（フォント）の指定です。楷書体を指定しています。このフォントがパソコンの中にない場合もあるので、書体は複数指定できます。

その場合はカンマで区切って、font-family:’書体１’,’書体２’,’書体３’というように指定していきます。先に指定したフォントがあれば、それが使われ、なければ次のフォントを試します。全部見つからないと、ブラウザが基準にしているフォントが使われます。

あとはじぶんで調べてください。最近やるきにならない。普通、書いたことが参考にされたり、使われたりすればうれしいんだけど、このぶろぐではガッカリする。俺の常識では使ったら、相手に知らせるものだけど、このブログでは全員が黙って使う。報告しろとは書いてないからまあいいけど、初心者相手はだめだな。常識が違う。