縦書き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:’書体1’,’書体2’,’書体3’というように指定していきます。先に指定したフォントがあれば、それが使われ、なければ次のフォントを試します。全部見つからないと、ブラウザが基準にしているフォントが使われます。

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


関連コンテンツ

スポンサーリンク

「縦書きHTML」への5件のフィードバック

  1. 最後のとこって俺含まれてます?
    多分含まれてないはずなんですが、俺かも、と思ってしまう感じでビビります。
    気持ちは分からんでもないですが、怖いッスw

  2. こんにちは^^
    訪問&コメントありがとうございます!いつも参考にさせていただいてます♪黙って使っていた一人ですみませんでした…;;
    ちなみに、プロフ写真は本人ではなく、上野じゅりちゃんです^^

  3. こんにちわ。
    WIKI文法で縦書きは使った事ありますが
    HTMLではありません。

    今年賀状の絵を書いているので、その時に
    縦の字を使わせていただきますね。

  4. なんとか 出来ました・

    記事にしました。TOMさんにリンクさせていただきました。

    ↓の記事は消去しました・・m(__)m

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください