血統の森+はてな

旧はてなダイアリーの自動インポートによるアーカイブです。

海外競馬オタのためのHTMLメモ

ドイツ語競馬用語集、作ってみましたGalopp in der Bundesrepublik、tbce.orgより)
これ見て思ったのは技術的にはもったいないな、と言うのが率直な感想。

ウムラウト付きのアルファベットは、実体参照を使わずに直接記述するのがエレガントかな、と。
(例えばÄをÄとHTMLにぶち込んで表示するのではなく、Äと直接テキストに入力して直接表示する。)

ここでは、簡単にウムラウトをはじめとする、記号付きアルファベット(ドイツ語はもちろん、フランス語、スペイン語ポルトガル語etc...で見られるアルファベット群)をWindowsで入力、HTMLに保存、ブラウザで表示させる方法を簡単に追っていければと。技術的な話はなるべくはしょって簡単に書いているつもりですが、何か難しいところがあればコメントなりで突っ込んでください。

キーボードで入力できるようにする

話は前後しますが、ここで書いてる方法はWindows XP/2000でのお話です。Windows ME/98とか使っている人はさすがにレアだと思いますが一応断り書き。

さて、キーボードで入力する方法ですが、
Windows2000/XPで多国語入力設定をする方法
がとりあえずわかりやすいかと。欧州諸国の言語だけでなく、香港・台湾あたりの言語も入力できるようになる。支那語朝鮮語・越南語の日本語以外の漢字変換入力方法は…どうだったかね(汗

これで、WordやNotepadで入力できるようになるはずです。キーボードの刻印と特殊文字との対応は
パソコンで仏語・独語・スペイン語の文章を書けますか?
この辺参照。最終的には肌で覚えることになるのかねえ。

エディタを導入する

NotepadでHTMLを読み書きしている、ある意味で玄人な人もいるかもしれませんが、あまりにもマゾ過ぎるのでやめましょう(笑)。適当なテキストエディタを選んでください…といつもなら言うところですが、日本語と外国語を混在して扱えるエディタというのは実は限られています。ということで、今回はこれ。

EmEditor Freevector

直接特殊なアルファベットを読み書きする際は、EmEditorを使えってことでひとつ*1。カラフルでHTMLも読みやすい、と。

HTMLを保存する際の注意

何気に重要。W3C HTML4.01に従うとして、以下のようにHTMLにmetaタグを付け足すか書き換える。すでに

<meta http-equiv="content-type" content="text/html;charset=shift_jis">

のように書いてある場合は、shift_jisutf-8に書き換える。

<meta http-equiv="content-type" content="text/html;charset=utf-8">

またEmEditor側でも、保存する際にエンコードUTF-8にしておく。その際、「Unicodeサイン(BOM)を付ける」のチェックは外しておく。

言語でフォントを変える(ちょっと高度)

Internet Explorerでは無理だけど、そんな糞ブラウザエンジン使ってる人はいないと思うので(マテ)。
例えば、ドイツ語のフォントをTimes New Romanで表示して、英語をArialで表示して、日本語をMS Pゴシックで表示するとか言う変態的なこともできなくはない。HTMLのサンプルは


<ul>
<li lang="de">Länge</li>
<li lang="en">Length</li>
<li lang="ja">馬身</li>
</ul>
とか用意しておいて、スタイルシートでこんな感じで書いておく。

li[lang=de] { font-family: "Times New Roman"; }
li[lang=en] { font-family: Arial; }
li[lang=ja] { font-family: "MS Pゴシック"; }

とすれば、きれいに分かれる。実際に表示させるとこんな感じ。
http://momdo.s35.xrea.com/sp/utf-8_font_test.html

ドイツ語、英語、日本語以外のlang属性の値と言語の関係は以下の資料参照。

上で紹介した以外のOSに標準で入ってると思われるフォントのサンプルは

あたりを参照。

*1:別に秀丸エディタとかEmacs(えー)とかでもいいんですけど。