やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。
母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。
アルファベットを常日頃から全角状態で打っている方は要注意
こういうことです ↓
今私は「ｈｔｍｌ」の勉強をしています。
ｈｔｍｌって難しいですよね！
これは日本人だけですよね。正しくは
今私は「html」の勉強をしています。
htmlって難しいですよね！
こうやんな (´・ω・｀)
これは Windowsユーザーに多い んですね。
Shift + A
でしたっけ？Macユーザーなのでうろ覚えでごめんなさい。確か全角アルファベットってこんな感じの切り替えじゃなかったかしら。
MacはWinともともとキーボードの構成が全く違いますし、基本的にこういったことはできないというかしないというか。知ってる人が少ないというか。
Ctrl + L
ですね。Macの場合。覚えなくても良いと思います。つか、覚えない方が良いと思うけど。
なんでMacユーザーはアルファベットをちゃんと半角英数字で打つかというと、Winと比べ切り替えが超簡単だから(だと勝手に思っている)
アルファベットや数字は半角英数字で打つのが当たり前 と考えるようにするだけでもずいぶん違うというかミスする場面が減らせるような気がします。だって「ＨＥＬＬＯ」とかやっぱ変ですよ。「HELLO」ですよ (´・ｪ・｀)
全角スペースは気づきにくい
スペースだから目に見えない。だから気づきにくいですよね。以下の2つのimg要素を試しにご自身の投稿画面に貼り付けてみてください。
テストコード①
<img src="https://file.blog.fc2.com/vanillaice000/miscellaneous/98u9e.jpg" alt="">
テストコード②
<img src="https://file.blog.fc2.com/vanillaice000/miscellaneous/98u9e.jpg" alt="">
①の方はちゃんと出てくるはずです。もう一方の②の方は表示が行われないはずです。②の方はimg と src の間のスペースが全角だから です。半角が全角になっただけで html要素でなくなってしまう わけですね。
属性間スペース または 要素間スペース は要注意。特に要素間スペースは、スペースをうっかり打った後に 改行 してしまうことがありますよね。改行してしまうとさらに発見しづらくなります。そして全角スペースは「文字」として扱われますので、書いてはいけない部位にあれば当然エラーです。head内はコメントアウト・属性値(attribute value)・内容(content, enclosed tag content)以外の文字(プレーンテキスト)を書いてはいけない部位にあたります。
head情報をカスタマイズする時は細心の注意を払う
head情報とはhtml全体ソースの最上部 <head> と </head> に挟まれた内容であり、SEOの根幹を担う部分で大変重要です。ただしここに記されている内容というのは可視化されません。なので大抵の場合 html内容にエラーがあっても一見しただけではわからない んですね。
head情報の文字の羅列をよくよく見ても間違いを発見できない場合、例えば正しいと思われる書式で正しい位置に記しており、アルファベットや数字なども全て半角で書いてある。なのにエラー…。こんな時には 全角スペースの利用を疑ってみる と良いと思います。目に見える文字は半角で正しくとも目に見えないものが全角かもしれませんよ。
head内容というのは割とシビアな決めごとがありますので、どこか1箇所に全角が引き起こすエラー、前述の例でわかるとおりhtmlタグ内に全角文字やスペースが含まれるとhtml要素でなくなってしまうわけですから、仮にそれが必須項目であった場合には「必須項目が無い」というエラーにまずなりますよね。続く内容についても「必須項目が無いのにこの項目を書いちゃだめ」ですとか「この位置にこれはおかしいだろ」とか、たった一つのミスだけで二次災害エラーが爆発的に発生します。でもみなさん気づかない んです。可視化されないので全然気づかない。気づかなくともそれはエラー。しかもページの構成で最も重要な部位のエラーです。
htmlソースの見た目にはこだわらなくて良い
これはいつも言っていることです。大事なことなので何度でも。
カスタマイズをブラウザ上で行う人はソースの文頭揃えを気にしない方が良い
htmlのソースコードというのはこんな感じですよね。
<div>
<div>
<ul>
<li>リスト
<li>リスト
<li>リスト
</ul>
</div>
</div>
テンプレートでもこうして入れ子の状態をわかりやすく「インデント」あるいは「半角スペース」による文頭の調整が行われていることが多いかと思います。この状態から仮にリストをひとつ追加したいと思った場合、html専用エディターを利用しない人、つまりFC2ブログの管理画面上(ブラウザ上)で作業する人は
<div>
<div>
<ul>
<li>リスト
<li>リスト
<li>リスト
<li>リスト
</ul>
</div>
</div>
これで良いです。以下のような形にしなくても大丈夫。
<div>
<div>
<ul>
<li>リスト
<li>リスト
<li>リスト
<li>リスト
</ul>
</div>
</div>
こういうことをやるとうっかり全角でスペース打っちゃう (´・ω・｀)
htmlソースコードのネスティングを美しく保ちたいならばhtml専用エディターに移してから作業してくださいね。
まとめ
私が共有しているテンプレートは全てIndentation(インデント)を行っています。初心者の方も多いことを考えるとやらないほうが良いような気もしてきました(笑)
インデントがあると上級者にとってはわかりやすいのですが、初心者さんにとってはミスを引き起こす分不親切なのかなぁ (´・ω・｀)
今後どうするかは未定です。とりあえず「失くならないミス」ということで全角利用のお話でした。
There are no comments yet.