htmlの絶対的NGそれは「全角の利用」

投稿 2018年09月18日
8
カスタマイズ
InstructionHTMLトラブル対処初心者向け

やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。

母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。
htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。

アルファベットを常日頃から全角状態で打っている方は要注意

こういうことです ↓

今私は「html」の勉強をしています。
htmlって難しいですよね!

これは日本人だけですよね。正しくは

今私は「html」の勉強をしています。
htmlって難しいですよね!

こうやんな (´・ω・`)
これは Windowsユーザーに多い んですね。
Shift + A
でしたっけ?Macユーザーなのでうろ覚えでごめんなさい。確か全角アルファベットってこんな感じの切り替えじゃなかったかしら。
MacはWinともともとキーボードの構成が全く違いますし、基本的にこういったことはできないというかしないというか。知ってる人が少ないというか。
Ctrl + L
ですね。Macの場合。覚えなくても良いと思います。つか、覚えない方が良いと思うけど。

なんでMacユーザーはアルファベットをちゃんと半角英数字で打つかというと、Winと比べ切り替えが超簡単だから(だと勝手に思っている)

アルファベットや数字は半角英数字で打つのが当たり前 と考えるようにするだけでもずいぶん違うというかミスする場面が減らせるような気がします。
だって「HELLO」とかやっぱ変ですよ。「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(インデント)を行っています。
初心者の方も多いことを考えるとやらないほうが良いような気もしてきました(笑)
インデントがあると上級者にとってはわかりやすいのですが、初心者さんにとってはミスを引き起こす分不親切なのかなぁ (´・ω・`)

今後どうするかは未定です。とりあえず「失くならないミス」ということで全角利用のお話でした。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

8 COMMENTS

There are no comments yet.

hige  

いやいや字下げは必要でしょう

とりあえず承前の話です。
タイプライターがあった時代。
元々タブキーは字下げや特定位置までキーを移動させる機能を持ってました。
エディタでは既定の文字数だけの字下げをします。
タブキーはもともと制御文字だったはずで半角xx文字ではないはずです。
表示は
<body>・・・・・
ですが
(制御コード)<body>・・・・・・
と書かれてました。
それが半角スペースに置換えられてるようです。
ややこしいことに、MSがタブキーに次項目へ移動する機能に割り当てたりして。

で、Akira氏においては日常の流れにおもねることなく、まっとうな技術者の態度を貫いてください。

>初心者の方も多いことを考えるとやらないほうが良いような気もしてきました(笑)

は、皮肉ね。
ダメです。

で、素人の基本は読みやすく、後から見ても判りやすい。
PCの能力は上がったので、少々冗長でもあとからメンテナンスがし易いソースを書く。
と言うのが常道と思います。
で、正攻法な記述の仕方を勧めていただきたい。

と批判しましたが、実はAkira氏は書いてみただけで本心はそんなことは思ってないに一票。

以前Akira氏に記述環境を聞いたら色々エディターを教えていただきました。
それからネットで探し回ったり、使用してみたり、なかなか日本語変換がスムースにいくエディタが見つかりませんでしたが、今はVisual Studio Codeを愛用しています。
ブログでエディターを使ってると日本語変換部分が肝です。
VSCodeは全角や半角のスペースが可視化出来るので重宝しています。
FC2ブログのHTMLを結構触って興味を覚えた人たちにはエディターは必須と思います。

2018/09/18 (Tue) 18:45
vanillaice (Akira)

Akira  

To higeさん

higeさん、こんばんは (o'ω')ノ

そうですね。インデントを取り除くかどうか今すぐ決めろと言われば「取りません」と答えます(笑)

htmlやCSSにおいてのインデントというのは義務やルールではないんですね。
寧ろコンピュータにとってはタブインデントもスペースも不要です。
読み取るのはコンピュータですが書くのは人間なので、人間の視認性だけのことなんです。

Googleがガイドラインを出しています。こういう書き方を推奨しますよ、というやつですね。
コーダーの多くがGoogleのガイドに従うのは何も大企業だからとか権力があるからということではなく、web文書の効率やそれに関するアルゴリズムを最も理解しているのがGoogleだからです。
Googleの推奨内容 ↓
https://google.github.io/styleguide/htmlcssguide.html

重要部位を抜粋すると
・プロゥトコルは原則httpsを利用し、省略は しない (以前は省略を推奨していましたが変更されています)
・インデントはタブキーではなく半角スペース2つを推奨。タブとスペースの混合は避ける。
・htmlのバージョンは5を推奨、valid(正確)であることを推奨。

などなど。
Googleのおすすめは半角スペース2つ分でのインデントです。大体4つか2つのいずれかを慣例的に利用するコーダーが多いはずです。
あと
・省略できるタグは極力省略する
というのも推奨されています。
例えば一定条件下における<html>, </html>, <body>, </body>なんかも実は省略できるんです。
ただそれをやっちゃうと多くのユーザーさんは文書構造が崩壊してしまうと思うのでやりません。
「一定条件」を理解している一般ブロガーさんはまずいないと思うのでできないです。なにせコメントひとつ入れただけでエラーになってしまいます。
だから結局は既に便宜を図ってるっちゃー図ってるんですよ (´・ω・`)

-----
で、一番の推奨は「一切の無駄なスペースを入れない。コメントアウトもしない。全て圧縮する」ですよね (´・ω・`)
それが文書のパースやレンダリングという作業に於いて一番効率が良いからです。
でもコード組んだり編集したりは人間ですからね。より多数に求められるのはどちらなのか、というところです。
もちろん「FC2ブログユーザーにとって」というさらに縛りを設けた上で。
これもまた「便宜」上の問題でしかないというか。

とりあえず今の所ネストの様子を平たく書くつもりはないです。
日本の方へ向けてはこうして定期的に全角利用の注意を促そうとは思っています。

2018/09/18 (Tue) 21:20

hige  

ありがとうございました。

素人な私のコメントにお返事いただきありがとうございました。
今回も色々勉強になりました。
Google HTML/CSS Style Guide
つたない英語力で少し読んでみました。
グーグルの翻訳という手もあるので、目を通しておきます。

いつも真摯な回答をいただき感謝しております。

2018/09/19 (Wed) 15:33
vanillaice (Akira)

Akira  

To higeさん

higeさん、こんにちは (o'ω')ノ

いえいえ。こちらこそ勉強になります。
いつもありがとうございます

2018/09/19 (Wed) 16:00

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/09/21 (Fri) 23:37
vanillaice (Akira)

Akira  

To 全角感嘆符について 内緒さん

こんばんは (o'ω')ノ

私は「こんにちは!」と全角でわざと打ってます。
「こんにちは!」だとわかりにくいですよね (´・ω・`)
そもそも本来日本語に!や?は無いはずなので日本語に感嘆符が付いていること自体どのみち間違いというか。
そういえばうちの相方は昔から(ガラケー時代から)半角で「!」「?」を打ってました。何故かはしらないが(笑)

カッコについては私は半角で打ってます。
こんにちは(夜だけど)
ではなく
こんにちは(夜だけど)
という感じですね。参考になりますでしょうか ^^;

2018/09/23 (Sun) 00:12

-  

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/09/23 (Sun) 00:56
vanillaice (Akira)

Akira  

To 全角感嘆符について 内緒さん(終了のご報告)

The Handmaid’s Taleは次回視聴予定です(笑)
The Walking Deadの視聴再開しました。今長男が日本に居るので一緒にいくつか観ました。
おもしろいですね。フツーに(笑)
なんで観なかったのかしら ( ̄∀ ̄;)

2018/09/23 (Sun) 01:02

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)