うっかり利用したhtml, スタイルシート内の全角スペースを削除する

うっかり利用したhtml, スタイルシート内の全角スペースを削除する

カスタマイズ
2022/08/12
0
vanillaice (Akira)
vanillaice (Akira)
トラブル対処初心者向けValidation

htmlやCSS(スタイルシート)で 全角スペースの利用は絶対ダメですよ、第一言語が日本語の方は気をつけてくださいね、使ってしまったら必ず修正をしましょうね。 ということを常に言っているわけなんですが、web言語に馴染みの無い方にとっては「修正しろと言われてもわからん!どうやれば良いの、どうなれば良いの!」という感じのようなので、修正を図解したいと思います。

テンプレートカスタマイズ初心者向け記事なので、腕に覚えのある方は読まなくても良いかもです ^^;

その前に、html, CSSの全角スペースがなぜいけないのかの理由は以下の記事をご参照ください。

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

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

やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...

インデントに注意

うっかり全角使用は インデントをつける という作業に於ける発生率が高いです。これもうダントツ。初心者さんで「英単語を入力することなんて殆ど無いなぁ」という方はキーボードの切り替え自体の利用頻度が極端に低い、と考えられます。作業の性質上そういう方がミスしやすいです。これは仕方のないことです。

インデント というのは、日本語で言うところの「字下げ」で、ソースコード全体を把握しやすくするために利用するんですが、必須ではない ので、言い換えると つけようとこだわる必要はない ということです。

<div>
  <span style="color: red;">この文字は赤いです。</span>
  <span style="color: green;">この文字は緑です。</span>
  <span style="color: black;">この文字は黒です。</span>
</div>

インデントというのはこういうのですよね。多くのソースコードは 半角スペース2つ によるインデントを採用しています。これまでは「半角スペース4つ」「タブキー」など合ったんですが、現在の推奨は「半角2つ」となっています。そして日本人は半角スペース2つを全角スペース1つと誤認識する というわけです。

さらに図解すると

<div>
<span style="color: red;">この文字は赤いです。</span>
<span style="color: green;">この文字は緑です。</span>
<span style="color: black;">この文字は黒です。</span>
</div>

緑が 半角スペース によるインデントです。2, 3, 4行目の文頭に 半角スペース2つ を用いたインデントが行われています。

全角スペースの誤認識は以下の通り

<div>
<span style="color: red;">この文字は赤いです。</span>
<span style="color: green;">この文字は緑です。</span>
<span style="color: black;">この文字は黒です。</span>
</div>

ほぼ同じ横幅なので誤認するんです。そしてこれはコンピュータには クリティカルエラー (致命的な間違い) として認識されます。

インデントの意義

なぜインデントを行うかというと、htmlでは「入れ子(ネスティング)」という概念があり、それを把握しやすくなるからです。<div></div> は文頭が揃っていますからこれはワンセットです。この 開始タグ <div> から、終了タグ </div> までの全体を div要素 と言います。

そしてdiv要素の中には span要素 が3つ内包されています。全体で見ると「span要素3つを内包したdiv要素」です。div要素は「親」であり、3つのspan要素はdivに対して「子」です。こういった親子関係を見た目に把握しやすくする、というのがインデントの目的です。

ですがインデントはあくまでも ソースコードを見る人間のため であり、視覚的にわかりやすくするために用いるもので、コードの機能としては

<div>
<span style="color: red;">この文字は赤いです。</span>
<span style="color: green;">この文字は緑です。</span>
<span style="color: black;">この文字は黒です。</span>
</div>

① ↑ こうしてインデントなしでも

<div>
<span style="color: red;">この文字は赤いです。</span>
<span style="color: green;">この文字は緑です。</span>
  <span style="color: black;">この文字は黒です。</span>
</div>

② ↑ こんなふうに何故か1箇所だけインデントが付いていても

<div><span style="color: red;">この文字は赤いです。</span><span style="color: green;">この文字は緑です。</span><span style="color: black;">この文字は黒です。</span>
</div>

③ ↑ こうして全て横に繋がっていても全く問題はありません。

ただし ② の「何故か部分的にインデント」は人間にとっては把握がしづらい、混乱を招く見た目ではあります。コンピュータ的には実は ③ の「インデントなし, 改行もなし」が最も効率が良い書き方です。でも管理するのは人間だ、という点を考えれば「規則正しくインデント(及び改行)が行われている」状態が望ましいと言えますね。

で、今回の主旨としては ② でも良いんやで? のススメ。

全角スペース混入を疑うべき場面

  • サーチコンソールから何かしらの指摘を受ける, またはサーチコンソールにどうしてもページ認識されないページがある(除外されている)
  • 追加あるいは変更したスタイルがどうやっても反映されない(スタイルシート)
  • ナビゲーションなどに隙間ができたり高さ(縦幅)が異常に大きくなるなど、見た目がおかしくなる(html)

こういった症状を確認できる場合は疑っても良いと思います。これらの場合 修正しなければ一生改善は無い と思ってください。

全角スペース混入を見つけるてがかり

  • テキストエディターを利用する
  • バリデーターで察知する
  • テンプレート作者にヘルプを求める

テキストエディターを利用する

テンプレートを「よくカスタマイズする」という自覚のある方は テキストエディター の利用をおすすめします。滅多にやらない方は準備する必要はありませんが、これらのツールを利用することでカスタマイズ上のミスを減らせるので自身で判断をしてください。

テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします

テンプレートカスタマイズをよく行うFC2ブロガーにSublime Text3をおすすめします

テンプレートのカスタマイズをよくしている、という方に 「HTMLエディター」 をおすすめしたいと思います。「テキストエディター」という呼び方もされます。 なんとなく上級者向けなイメージがあるかもしれませんが、寧ろ初心者の方ほど積極的に使って欲しい と思います。...

エディターを利用した全角スペースの見つけ方は上記記事に記してありますので今回は割愛します。
で、「エディター準備するのめんどくさい (∵`)」という方は事前に ブラウザ上で全角スペースを見つけるのは無理筋 とお伝えしておきます。

ブラウザ上、FC2ブログのテンプレートカスタマイズについては管理画面の「テンプレート設定」ページで行います。そしてブラウザには文字列検索機能があり、概ね Ctrl + F でできます(MacはCtrlをCommandに置き換え)

ところが半角と全角の区別をしてくれないので、テンプレート設定ページ内で検索をかけると1万箇所とか2万とか大量にヒットしてしまいます。これでは探すどころではない (´・ω・`)

もうこの代替案を思いつきませんので、エディター使わないという方は次の項目「バリデータ」か「作者に相談」を実行しましょう。

バリデータで察知する

以下の記事を参照のこと。

表示がおかしい時はバリデートを行いましょう

表示がおかしい時はバリデートを行いましょう

例えば カラムが崩れている、例えば フリーズが起こる など。 原因はいろいろありますが、最も多いのは htmlシンタックスエラー(構文エラー) です。...

ただバリデータは意味がわからなければ対処のしようが無いですし、別のエラーに関する表記でさらなる混乱を招くこともあります。どうにもお手上げな場合は「作者に相談」

テンプレート作者にヘルプを求める

これなんだけども、相談の一切を受け付けません、という方針の方もいらっしゃいます。その場合はもうどうしようもないのでそれ以外の方法で対処。別の作者に尋ねる、というのはしないでくださいね。私自身もそれは困るので恐らく他の作者さんも同じように感じられるのではないでしょうか。

余談だけども以前「作者が別のテンプレートだからと断られた。助け合い精神というのは無いのか」といった主旨のコメントだかなにかを拝見したことがありますが、ソースコードの把握ってものすごく大変なんです。自分の書いたコードでさえ大変。まして他者のものなら… といったところです。FC2のテンプレート作者はほとんどが無償・公益心のみでやっていますので、過ぎた批判はお控えください ^^;

全角スペース混入具体例

まずhtmlから。経験上みなさんのカスタマイズを拝見し、全角スペースが利用されてしまうケースは ナビゲーションへのリンク追加 です。もう8割がたこれです。

テンプレートのデフォルトが以下の内容だとします。

<nav>
  <ul>
    <li><a href="">リンク</a></li>
    <li><a href="">リンク</a></li>
    <li><a href="">リンク</a></li>
  </ul>
</nav>

全体は nav要素、その中に ul要素、さらにその中には li要素、その中に a要素 … と複雑ですが、どこで(どの要素で)改行するかはコーダー(コードを書く人)次第です。もしかするとa要素で改行してあることもあるかもしれませんが、まぁ大体こんな感じの見た目だろうと思います。

ここにリンクを追加しようと思った場合のミスは以下のようなもの。

<nav>
<ul>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">追加リンク</a></li>
</ul>
</nav>

li要素 の文頭は 半角スペース4つ が正しいですが、誤認で 全角スペース2つ になっている様子です。でも見た目にはなんとなく文頭が揃うので気が付かない。スペースの幅というのはフォント種依存なので、フォントによっては全く気が付かない、と。

ちなみに本サンプルは先の章でお伝えした「ナビゲーションなどに〜」を発症するケースです。ナビカスタマイズでミスするのが一番多いかな、という印象。デフォルトテンプレートに何か一文字でも変更あるいは修正を加えたらそれは「カスタマイズした」ことになる という意識を持ってくださいね。たまに「カスタマイズはしていないのに〜」といったお問い合わせがありますが、実際拝見すると何かしら手を加えてあったりします。

さて、半角スペースというのはコンピュータにとって「文字ではない」のですが、全角スペースはコンピュータにとって「文字」です。html内で「文字」は何らかのタグ (<> に挟まれたもの)で囲われている必要がありますが、このサンプルの全角スペースはタグの「外」に置かれているためエラーです。カンの良い方は「ulの中に居るじゃないか」とお考えになるかもしれません。しかし「ul要素の直下(直系の子供)はli要素のみ」という厳格なルールがありますので結局はエラーです。つまり3行目のli要素と4行目のli要素の間に不正な 文字列 あり、という判断。

誤解の無いようもう少し突き詰めておくと、「リンク」「追加リンク」という明らかな「文字」あるいは「文章」がありますね。ここで全角スペースを使ってはいけない、という意味ではないですよ。これらの一連の「文字」の前には <a>(詳細は省略)と、後ろには </a> がありこれは a要素 として存在しています。「リンク」などの文字はそのa要素に於ける「内容」です。開始タグと終了タグに挟まれたものが「内容」(content)で、「文字」は「内容」として以外では利用できません。

そして重要なことなのでしつこく大きく書いておくと

全角スペースは記号ではなく文字

でございます。ここまでが理屈説明で、実際の作業説明に移ります。

html, スタイルシートの修正

htmlサンプルを使うともう答えはこれです ↓

<nav>
<ul>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">追加リンク</a></li>
</ul>
</nav>

追加コードにはインデントをつけない。 これが一番安全。インデントしようとするからミスをする。ならばしなければ良い。

ただしこういうケースもあります。

<nav>
<ul>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">リンク</a></li>
<li><a href="">追加リンク</a></li>
</ul>
</nav>

なんかゴチャゴチャやってる間に対象要素の文頭でなく前後要素の文末に全角スペース入れちゃった、みたいな。これも結構見ます。「絶対に文頭に全角スペースを入れてない!なのにおかしい!」というわけで調べてみると前の要素の文末に全角スペースがあった、とか普通にあります。ブラウザで作業する方はカーソルを上手く利用して察知してください。

スタイルシートもやることは同じです。エラーサンプルは以下の通り。

.navbar {
position: fixed;
top: 0;
left: 0;
z-index: 900;
width: 100%;
background: red;
}

htmlとはソース見た目が違いますね。セレクタ名(.xxx や #xxx など)から始まり、{} までを ルールセット と言います。このルールセットがテンプレートのスタイルシート内にはたくさん記されています。多くの場合半角スペースを2つ用いたインデントが行われています。修正は以下の通り。

.navbar {
position: fixed;
top: 0;
left: 0;
z-index: 900;
width: 100%;
background: red;
}

インデントはつけない。

まとめとおまけ

部分的にインデントをつけない、という方法を取ると、全体で見たときに「なんかここだけ目立つなぁ」といった見た目になります。それで良いじゃない。むしろそれが良いじゃない。「自分で何か書いたのだ」という目印になる、というのはこじつけですが、ホントにね、初心者さんはそれで良いんですよ。

最後におまけ。これよくスタイルシートで見かけます。めっちゃ見かけますがこれはダメ。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  background: url(ここに画像のurl);
}

backgroundプロパティ の値に url(ここに画像のurl) 。みなさん心当たりありませんか?大丈夫ですか?今後のための記載だと思います。url() のカッコの中に日本語を用いればエラーです。英文だとしてもエラー。ここはちゃんと URL として認められるものでなければダメですよ。以下もエラーです。

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  background: url(ここに画像のurl);/*画像設置する場合*/
}

以下はOKです。カッコの中がURL以外の文字列だとしてもOK

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  /*background: url(ここに画像のurl);画像設置する場合*/
}

なぜダメなのかは、最初のものは コメントアウトしていないから、2つ目は コメントアウトの仕方を間違えているから です。コメントアウトについては以下のページをご参照ください。

コメントアウトを活用しよう

コメントアウトを活用しよう

コメントアウト とは何か、から始まり、FC2ブログでの活用方法などを記しています。以前にも記事にしたことのある内容ですが改めて新規でUPします。...

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)