2002年度情報処理演習B 「マルチメディアウェブページ作成」
すみけんたろうさんは『スタイルシートウェブデザイン』(1998, 技術評論社. 50-51ページ) の中で,よくあるタグ付けの間違いのパターンを4つの指摘しています。
<noframes>
を <noframe> としてしまった。<address>
を <adress> と打った,など。
インライン要素をブロックレベル要素の外に書いた:
× <strong>
<p>
私はこれを強く主張したい!</p>
</strong>
○ <p>
<strong>
私はこれを強く主張したい!</strong>
</p>
その他,title 要素を body 要素の中に書いてしまった,など
子要素を閉じる前に親要素を閉じてしまった:
× <p>
<strong>
私はこれを強く主張したい!</p>
</strong>
head, body 要素を何度も書いてしまった。
まず,これらの初歩的な間違いを徹底的にチェックしましょう。いずれも HTML文法チェッカ [初心者用はこちら] の助けを借りることで,簡単にチェックできます。
テーブルやリストなどを作成する際,タグを見やすくするためにと,行頭のインデントをうっかり全角スペースで入れていませんか?HTMLでは,全角のスペースは,半角スペースと違って無視されません。予期せぬ形でブラウザに現れることがあります (現れ方はブラウザによって違います)。
× 全角スペース (□
で表します) が紛れ込むと,思わぬ場所に表示されてしまうので注意。
<ul>
□□□<li>リスト項目1</li>
□□□<li>リスト項目2</li>
□□□<li>リスト項目3</li>
</ul>
「メモ帳」のように,スペースの全半角が区別されないエディタでは,よく注意しましょう。全角スペースを目で見える形で表示する設定のあるエディタ(例えば TeraPad)を使うと便利です。
Netscape は Internet Explorer よりもタグの処理に厳しく,思わぬ表示結果になることがあります。タグのつづりが正しいか,またタグの付け忘れはないかをチェックしましょう。例えば,<table 要素の終了タグ
</table>
を書き忘れると,テーブルから先がまったく表示されなくなります。他の省略不可能な終了タグ (例えば </noframes>
) の省略もファイル内容が表示されないトラブルの原因になります。例えば,</head>
を間違って<head>と書いたため,「ヘッダが続いている」と判断され,本文が全く表示されないことがあります。さらに,</A>
を付け忘れると,表示はされるものの,レイアウトが「絶妙に」崩れます。トラブルと原因の因果関係がはっきりしないので,この間違いはやっかいです。
いずれにしろ,マークアップのチェックは非常に大切です。また,自分でいちいちチェックするのは,骨が折れ,時間がかかるのも確かです。HTML文法チェッカ [初心者用はこちら] の助けを借りることをおすすめします。
ブラウザの文字コード設定 (Internet Explorerなら [表示]→[エンコード]) を変更することで,解消することがあります。もし,どうしても直らない場合は,FTPの際に間違った文字コードに変換している可能性があります。HTMLファイルに
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
と書いてある場合,テキストの文字コードはShift JISです。FFFTPで「無」 (日本語の文字コードの自動変換をしない) を指定し,もう一度ファイルを FTP してみましょう。
http://www.cs.reitaku-u.ac.jp/~自分のユーザID/課題ディレクトリ名/
でアクセスすると,なぜかファイルのリストが現れるのですが ページ名を省略すると,麗澤大学のサーバでは,
index.html
ないし index.htm
というファイル名の表紙ページ (トップページ) を表示する設定になっています(どのようなファイル名を表紙ページにするかは,サーバによって違います)。これがない場合,サーバは「表紙ページがない」と判断して,そのディレクトリにあるファイルやディレクトリの一覧を表紙ページの代わりに表示するのです。
表紙ページはぜひ作りましょう。表紙ページを index.html
(ないし index.htm
) という名前でそのディレクトリに置くことで,ディレクトリの内容に短いURL (ファイル名なし) でアクセスすることができます。
<p style="font-family: "Times New Roman", serif">
と書いたのですが,フォントが変更されません <style> タグを使う場合や,外部スタイルシート (拡張子 .css) を作る方法では,上のような
font-family: "Times New Roman", serif
という属性表記で全く問題ありません。"Times New Roman" の引用符は,スペースの入っているフォント名をブラウザに正しく認識させるために必要です。
しかし,開始タグの中に直接スタイルを指定する style 属性を用いる場合,フォントがうまく表示されない問題が起こります。属性の値の開始と終わりを表す引用符 " と,フォント名 Times New Roman を囲んでいる引用符 " がどちらも全く同じなので,ブラウザが,Timesの前にある " で属性表記が終わったと解釈してしまうことが原因のようです [つまり,<p style="font-family: "Times New Roman", serif"> という形でまとまりがあると間違って解釈されてしまう]。そこで,style 属性のなかで正しくフォント名を記述するためには,二重引用符ではなく,一重の引用符 ' を使います: style="font-family: 'Times New Roman', serif"
これで,無事に正しいフォントが適用されます。
<p style="font-family: 'Times New Roman', serif">This is printed with the Times New Roman font.</p>
<p style="font-family: 'Comic Sans MS', sans-serif">This is again printed with the Comic Sans MS font.</p>
This is printed with the Times New Roman font.
This is printed with the Comic Sans MS font.