スペルミス
タグのスペルを1文字でも間違えると正しく表示されません。例えば、「h1」を「h」と記述すると「h」と判断し、それに合わせた処理をします。
HTMLに限らずコードは、正確に確実にタイプしなければなりません。コンピュータは、1文字でも違えば別のものとして判断します。よく言えば常に正確で、悪く言えば融通が利かないといったところでしょうか。
スペルミスを防ぐには、コピペ(コピー&ペースト)するのが無難です。始めのうちは、タイピングして作っていくと思います。しかし、タイプミスする可能性があるので、慣れてきたらコピペに切り替えても良いと考えます。その方が時短になり、スペルミスの防止にもなります。
画像が表示されない
画像ファイルを表示するには、imgタグを使って以下のように記述します。
<!-- imgタグの書き方 --> <img src="画像ファイルのある場所を指定する" alt="画像の説明文">
src属性の「画像ファイルのある場所を指定する」を専門用語を用いて言い換えると「画像ファイルのパスを指定する」になります。画像が表示されない理由の多くは、パスを間違えていることにあります。
パス(path)について
パス(path)とは、通り道のことです。フォルダの階層の区切りを「/」で表して、画像までの通り道(パス)を表現します。そのためにはまず、フォルダの階層を把握することが必要です。
例えば、HTMLファイル、CSSファイル、画像ファイルがあるとします。フォルダの階層関係が下図のような場合を考えます。
絶対パスと相対パス
パスの指定方法は「絶対パス」と「相対パス」の2つの方法があります。それぞれ基準が異なります。
絶対パス
絶対パスの基準は、一番上の階層です。一番上の階層から辿って目的のファイルを指します。例えば、以下は絶対パスでの記述例です。
外部サイトのリンクを貼るときは、絶対パスで指定します。
相対パス
相対パスの基準は、現在のフォルダ階層です。現在のフォルダから辿って目的のファイルを指します。
相対パスの例を図とともにご紹介します。例えば、「index.html」から「style.css」と「logo.gif」を相対パスで指定するには、以下のように記述します。
<!-- HTMLで記述すると下記のようになります --> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="./css/style.css"><!-- 上記の書き換え --> <img src="img/logo.gif" alt="サイトのロゴ画像">
次に「about.html」から「style.css」と「logo.gif」を相対パスで指定するには、以下のように記述します。
<!-- HTMLで記述すると下記のようになります --> <link rel="stylesheet" href="../css/style.css"> <img src="../img/logo.gif" alt="サイトのロゴ画像">
自サイト内のパスは、相対パスで指定することをおすすめします。ドメインが変わっても(サイトを引っ越しても)HTMLファイルを修正しなくて済みます。
画像が表示されないときに考えられるミス
- スペルミス
- パスが間違っている
- そもそも画像が用意されていない
構文エラーがあってもブラウザが解釈して表示してしまう
開始タグと終了タグの数が違っても問題なく表示されてしまうことがあります。これはブラウザが勝手に解釈して対処してしまうためです。私の経験では、spanの閉じタグを忘れたためそれ以降の文字の色が赤くなったことがあります。そのタグにcolor:red;を指定していたため、文字が赤くなったようです。
まとめ
HTMLで上手くいかなかったら、以下のような原因が考えられます。
- まずスペルミスを疑う
- パスを間違えていないか確認する
- 構文エラーを疑う
ミスの原因を考えて対処することは、訓練になるので自力で解決できるようになるのが理想です。パソコンの方が間違っているのではなく、自分の方が間違っていると考え直した方が良いです。
HTML入門のまとめ記事なら... » HTML入門まとめ
