HTML

よくありがちなHTMLの間違えポイント

かなり初心者向けになりますが、今日はHTMLで陥りがちなミスになります。

画像が表示されない

これが1番多いですね。
例えば、
<img src=”img/image01.jpg”>
と書いたのに画像が表示されない、とします。
大抵は「指定した場所に画像が無い」というのが最も多く、開いているHTMLファイルから「img」フォルダが見えるところにあり、フォルダの中に画像ファイルがあると指定していますが、これが食い違うと画像がどこにあるのかわからなくなるため、表示されません。
このようなファイルからファイルへの経路をパスと呼んでいます。
大抵は「imgタグの経路が画像が無い場所を指定している」稀にあるのが「画像がCMYKモードなのでブラウザが表示できない」です。
ドリームウィーバー固有で「画像が自分のPCの中の場所を指定している」もWebサイトとして使えないので間違いです。
パスの意味

ちなみにWebフォントがちゃんと表示されない場合も同じ種類のミスである事が多いです。

クラス名、ファンクション名が数字から始まっている

特にjsの方ですが、名前を付けるのに数字から始まってはいけないルールがあるので、cssや画像のファイル名でも最初のうちは
名前は全てアルファベット小文字・数字は後」と覚えておくのが無難なんじゃないかと思います。
正しく言えば、HTMLなら大文字でもOK、cssなら大文字小文字は区別されるもののどちらでもOK、ファイル名は数字でもOKとなりますが、ややこしくなると面倒なのでこちらが推奨。

親タグと小タグの間に違うタグが挟まっている

これは見た目でエラーが見えないのでわかりづらいですが、<ol>と<li>は親子のような関係になります。
この場合、必ず<ol><li>リストアイテム内容1</li><li>リストアイテム内容2</li></ol>と入れ子構造になります。
<ol>の次は必ず<li>です。
<ol><div><li>リストアイテム内容1</li></div><div><li>リストアイテム内容2</li></div></ol>
などのように、
親子関係に他所の子が勝手に入ってきてはいけません。
<dl>
<dt></dt>
<p></p>
<dd></dd>
</dl>
などのように途中に違うタグが入ってしまうのも多いと思います。

flortしたら親ボックスから子ボックスがはみ出した

フロートというのは「曖昧」の意味だそうで、フワフワ浮いているようなイメージです。
はみ出している事に気付かない人もいるみたいなのですが、内側のボックスが外のボックスから突き出てしまう事があります。
その場を凌ぐには親ボックスに高さを指定すれば見た目的には解決するのですが、
フロートが終わった時点でクリアするのが正しいです。

positionの「absolute」「fixed」使いすぎ

marginで良いのに、位置を決めるのにabsoluteを使いすぎて目的の位置にならなくなるのがありがちと思います。
だいたい1ページに2.3回くらいにとどめた方が良いでしょう。
何から何までabsoluteで指定するとややこしくなります。

これらは意図して使いこなせるなら非常に便利ですが、わからないまま適当に使うとメンテナンス性を損なうので、ほどほどにしましょう。

梅木千世でした。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です