アフィリエイト広告を利用しています

広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「 Big Bang 」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

縦書き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
t op to b ottom かつ r ight to l eft
つまり上から下かつ右から左という意味です。

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

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

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

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

新ブログ「Big Bang」で続きを読む

×

この広告は30日以上新しい記事の更新がないブログに表示されております。

Build a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: