HTML memo - 爺の時悠空間

（2017年10月31日まで開設していた「maruyosi's Home」当初のメモです）

HTMLを書いていて（Webページを作っていて）感じたこと、守りたいこと、よく忘れるものをまとめてみました。

XEmacs

ホームページを作成するためのソフトはいろいろあります。でも、一度はテキストエディタでHTMLをコツコツ書いてみましょう。

私は XEmacs をお勧めします。このページの作成にも XEmacs を使っています。新規作成、ファイル名、タイトルを入力した直後の画面をどうぞ。

DOCTYPE

<!DOCTYPE>を宣言し、それに準拠したタグを使いましょう。HTML4.01 Strict は厳しいです。Strict では、<CENTER>や<FONT>が使えなくなります。

文字コード

文字（漢字）コードを宣言しましょう。文字化け（最近のブラウザでは少ないそうですが）の発生を抑えることができるそうです。
<META http-equiv="content-type" content="text/html; charset=Shift_JIS">
シフトJIS（Windows, Mac系）は Shift_JIS、EUC（UNIX系）は euc-jp、JIS は iso-2022-jp。JISは電子メールなどネットワーク間をやり取りするファイルに使われています。

私の場合、「休憩室」は Shift_JIS ですが、他のページは iso-2022-jp や euc-jp かもしれません。

スクリプト、スタイルシート

スクリプトやスタイルシートを用いるときは、基準となる言語（ JavaScript, CSS など）を指定しましょう。
<META http-equiv="content-script-type" content="text/javascript">

HTMLファイルから外部スタイルシートファイルを参照する（読み込む）ときのパスは、HTMLファイルを基点とした相対パスでOKです。しかし、スタイルシートファイルの中で画像などを参照するときのパスには注意が必要です。同一の相対パスでもブラウザによって解釈が異なり、スタイルシートファイルのフォルダ（ディレクトリ）を起点としたり、HTMLファイルのフォルダを起点としたりするようです。スタイルシートから外部を参照するときは絶対パスを書いておけば間違いありません。

せっかく JavaScript や CSS を駆使しても、ブラウザ環境によってはうまく表現してくれないこともあるようです。

タグ属性値

タグの属性の値は、半角英数字やその他一部の記号などクォーテーションで囲まなくていいものもありますが、常にクォーテーション（ダブル " またはシングル ' ）で囲むクセをつけましょう。

間違えそうなのがコメント宣言等の記号。
・通常のHTMLのコメントは：　
・ JavaScript部分を囲むのは：　
・ JavaScriptのコメントは：　/*　～　*/　、あるいは文頭に //
・ CSS部分を囲むのは：　
・ CSSのコメントは：　/*　～　*/

大文字・小文字

HTML のタグは、大文字・小文字を区別しません。（ XHTML のタグはすべて小文字で書きます。）

スタイルシートは、要素名の大文字・小文字を区別しませんが、class 属性値は区別します。

Javascript は、関数名や変数名などの大文字・小文字を区別します。

サーバーで使われているUNIXは、フォルダ名やファイル名の大文字・小文字を区別します。また、Windowsで使っている日本語はUNIXでは文字化けとなります。ファイル名には日本語を使わないようにしましょう。

したがって、好みの問題もありますが、原則として小文字（半角英数字）で統一し、区別の必要なときだけ大文字にすればいいと思います。

文字サイズ

サイズ指定<FONT>は、ブラウザで設定してあるサイズに対する相対的な指定となります。3を基準に、1,2は小、4～7は大。
+や-（1～6）をつけると、<BASEFONT>で指定したサイズに対する相対的な指定となります。<BASEFONT>がなければ3が基準となります。
<H>でも文字サイズは相対的に変わりますが、これは見出しにつけるものであって、太字となり前後に改行・スペースが入ります。4を基準に、1が最大、6が最小。

環境に依存されない絶対的なサイズ指定は、CSSを利用しピクセル単位で指定します。（最低でも10px以上が望ましいです。）

特殊記号

タグとして記述する記号を文字そのものとして表示する場合は、文字参照を使います。
　　< ： <　　　　> ： >　　　　" ： "　　　　& ： &
　　空白文字（半角スペース）：  

Webカラー

00, 33, 66, 99, CC, FF の数値のみを使って表す216色の Web（セーフ）カラーは、OS、ディスプレイの色数、ブラウザの種類等の環境に左右されずに正しく表示できる共通色だそうです。

画　像

リンクをクリックしたらいきなりファイルサイズの大きい画像のページとなって全部表示されるまでかなり待たされる、ということのないように、縮小した画像で確認、大きな画像を見たければクリック、というのがいいですね。IMG の属性ですが、読み込みを早くするために WIDTH/HEIGHT を指定したり、画像を表示できないブラウザを使っている方やあえて画像を読み込まないように設定している方のために ALT を指定しましょう。

解像度

モニタの解像度はどれをお使いでしょうか。640x480, 800x600, 1024x768, あるいはそれ以上？。次第に高解像度のものが多くなってきていますが、一般的には（妥協して）800x600 のモニタを想定すればいいようです。テーブルを見るのに横スクロールするのは面倒です。Webページのテーブル幅は、ブラウザのフレーム枠分を考慮して700、大きくても750程度におさえましょう。

ブラウザ

HTMLを書いた後 Webサーバにアップロードする前に、少なくとも2大ブラウザ Netscape Navigator, Internet Explorer でうまく表示できるか、確認しましょう。NNとIEとでは結構異なって表示されることがあります。このページもそうです。私はそれぞれ4.78, 5.5のバージョンで確認していました。スタイルシートを使い始めてからはNetscape6.2での確認をしたこともあります。現在は、メインに Opera を使っています。（スタイルシートを使う限り、NN4.78での表現には少々無理があります。）

Explorerオンリーというページにはガッカリします。作成者の勝手でしょうけど、できるだけ皆さま志向ということで。