よくある間違い
一般に
必ず半角小文字
気をつけるのは、タグやスタイルは半角で書くこと。特に英数字は全角と区別がつきにくいことがある。
スペースも半角と全角がある。style の中に全角スペースがあると style の指定はうまくいかない。
形式を正確に
style の始まりと終わりを正確に書く。{ や }の書き忘れ、コロン・セミコロンの書き間違いや書き忘れ、body中においても、終了タグの書き忘れや / が抜けるなど、細かな違いが大きな乱れになる。
綴りを確認
綴りは正確に。ブラウザは知らない単語は無視する。publik_html(public_html), .htlm(.html), biue(blue), stayle(style) などの実例があった。( )内が正しい。
字下げ
エディタで編集中に、字下げをしたい場合は、半角スペースを使用すること。ただし、h1タグやpタグの内部では字下げをするのは無意味。複数の半角スペースの繰り返しや改行はひとつの半角スペースにすることになっている。
全角スペースは挿入分の空白となるが、多くの場合普通の漢字より幅が狭くなるので思ったようにはいかない。そもそも改行位置はブラウザのウインドウの幅によってまちまちだから、全角スペースで文字の位置をコントロールしようとするのはうまくいかない。下記のようにすると所々に空白がある文章になる。
<p>たとえば、このように2行目の頭を1行めに
あわせたつもりでも、実際にはうまくいかない。
これをする方法は後で学ぶ。
具体的事例
スタイルシート以前の問題
- ページ全体が表示されない
- head、title、style などのタグをチェック。特に</head>がないと、head部分がずっと続いていることになるので、文字のないページになる。
- <p>のタグの部分も大きな文字になっている
- </h2>のタグがない。あるいは<h2>になってしまっている。
- 一部色が違う
- タグの間違いであることが多い。小見出しは h2 を使用する。
- 見出しがだんだん小さくなる
- hの後ろの数字は見出しのレベルを表す。たとえば、学校ごとに見出しを付けるのを h1 にすれば、その中の学年ごとに付ける見出しは h2 、hrごとの見出しは h3 と言う具合。
これを誤解して最初にでてきた見出しを h1 、次にでてきたものを h2 、その次を h3 とやっていくとどんどん小さくなる。
- <p>のタグ内に所々に空白がある。
- 字下げをしている部分がある。これは上に書いた。タグで挟んだ部分内で字下げはしない。開始タグ(/がない方のタグ)の前は字下げをしてもよい。ただし、半角を使う。
- エディタで編集中に色がつかない。
- 拡張子が .html になっていない。綴りの間違いか、まだ一度も保存していない場合。
スタイルシートの問題
- h2の色指定が無視される(その1)
- h2 の色指定に間違いがなくても、その前の行の h1 の指定で、終了の } が忘れられていると、h2 の指定も h1 の指定の続きだと見なされて、その結果 h2 の指定がなくなってしまうということもよくある間違い。
- h2の色指定が無視される(その2)
- h2 の色指定に間違いがなくても、ずっと後の行でもう一度 h2 の指定があって、そこでも色指定をしていたということもよくある。後の指定が有効なので前の h2 をいくら変えても無駄になる。
聖愛中学高等学校
http://www.seiai.ed.jp/
Last Modified