あんどえぬびーえすぴー は半角スペースではない

本記事の主旨なんですが、「バリデーション(html正確性検証)で意味不明なエラーが出る」特殊ケースがあります。意味不明といっても実際はちゃんと意味があるんですが、記事作成者からすれば意味不明(笑)
それが全て本記事内容に合致しているわけではありませんが、意外なケースとしての紹介です。該当は以下の通り。

• FC2ブログ記事「本文」で   を記述している
• 要約表示 かつ 記事概要が表記される タイプのテンプレートを利用している

特殊なパターンなので滅多に目にすることはないんですけどね。それでも今回はせっかくなので、  の特徴とFC2ブログの特徴とを押さえつつ説明したいと思います。

no break space は半角スペースではない

no break space または non-breaking space など、ハイフンが入ったりnoだったりnonだったりbreakだったりbreakingだったりで称されますが、要するに 改行・折返ししない空白 のことです。

「改行しない」「折返ししない」ってどういうことやねん？

半角スペースというのはみなさんよくご存知ですよね。英数字入力状態で キーボードの一番下、中央付近にあるでっかいキーを押すとそれが「半角スペース」です。ひらがな入力で同じキーを押せば「全角スペース」になります。みなさんがテンプレートカスタマイズでよく間違えてしまうのが、英数字に切り替えずにスペースキーを押して「ソースコードのインデントに全角スペース入れちゃった」というアレです。クリティカルエラー(致命的エラー)ですから気をつけましょう。

スペースキー押下による「半角スペース」と、文字列で記す「 」の違いについて、見た目は以下のような感じです。

半角スペースによる空白

no break space による空白

どちらも見た目は同じに見えます。では空白を連続させてみます。スペースキー押下を4回、 記述を4回やってみましょう。

半角スペースによる空白4連 (スペースキー 4押下)

no break space による空白4連 (  4記述)

半角スペースの方、連続してなくないですか。空白が単体だったときと比べて全然変化していません。

連続半角スペースは何度キーを連打しようと「1つ」となる

これはもうこういう決まりです。全角は違います よ。全角スペースは 記号ではなく文字 ですから、連打したらしただけ空白が広がります。
* wordなど、半角スペース連打で空白を広げる機能を持つアプリケーションもあります。

多くの方は半角スペース連打で空白を大きくできないので、  という特殊記号を表記します。または半角ではなく全角でスペースキーを連打する。ですがそれらはwebページに於いては悪手(後述)

もう少しわかりやすく | と | の間に空白のみ入力して比較してみます。

半角スペース(1押下, 10押下, 20押下)

no break space (1記述, 10記述, 20記述)

FC2ブログの新投稿画面ではこんな感じです ↓

投稿画面上では半角スペース入力の方もちゃんと空白に変化がありますが、実際に投稿を済ませると1つ分の空白となってレンダリング(ブラウザ描画)されます。

というわけで、「半角スペース」と「 」はイコールではない、ということ。

どんなときに no break space が使われるか

えっとですね、英語 のお話になるのですけども、web言語のベースは英語なので、英語・英文の成り立ちを知っておく必要があります。

日本語は単語と単語の間に空白を設けるというルールは無いですよね。日本語は区切りを句読点でもって表現します。

日本語(横書き)

一方、英語は単語の間にスペースを設けるルールになっています。

英語(便宜上ここではラテン語を使用)

日本語というのはどこでも 折返し ます。改行というのは意図的に Shift + Enter キーを押下することを指します。折返しというのは、web上では文章が掲載される領域によって自動で文章が下に繰り越しますね。それが「折返し」です。

日本語 折返し

英語 折返し

日本語は単語の途中でも折返しが行われます。それゆえFC2に限らずブログ初心者さんはやたら「改行」を行う方が多いのかな？とも思っています。

よりも

の方が綺麗に見えますものね。それはさておき、日本語は単語途中だろうとどこでも折り返す、と。それに対し英語は 単語の途中で折り返すとわけがわからなくなる言語 と言えます。なので、英語は 半角スペースを折り返しの機会(line break opportunity) とみなします。

右側にまだ余裕あるなぁ、と思っても単語が入り切らない場合はその単語の前にある半角スペースで下へ繰り越す、という仕組み。それゆえ場合によってはこういったことも起こります ↓

例) supercalifragilisticexpialidocious

折返しの機会となる半角スペースが存在しないのではみ出てしまう。ただ、必ずしもそうなるとは限りません。それはみなさんが利用しているテンプレートによります。英語の特性を踏まえるとこれが正しい… という表現はおかしいけれども、まぁそんな感じ(うやむや)
半角スペースがあれば折り返します。

例) super califragilistic expiali docious

では、「super califragilistic expiali docious」の「califragilistic」と「expiali」のところで絶対に折り返してほしくない、という事情があるとします。この場合は

super califragilistic expiali docious

こんな風に記述しますよね。  は「改行しない、折り返さない空白」なのですから、ここで使うべきでしょう。これが実際にどう描画されるかというと…
* わかりやすさのためにスペース前後の単語を赤くしています。

例) califragilistic と expiali の間に  
横幅に余裕がある場合

例) califragilistic と expiali の間に  
横幅に余裕が無い場合

幅的に califragilistic は一行目に入り切るのですが、続く expiali と分離させないために、1つ前の半角スペース(super と califragilistic の間の半角スペース) を折り返しポイントとしている のが見て取れます。これが   の使い所です。

この記事を読まれているFC2ブロガーさんのほとんどが日本の方だと思いますので、  を使う場面というのはそんなに巡っては来ないんじゃないかな、と思います。日本語はどこでも折り返すわけだから   と記したって正直あんま意味ないのよ (∵`)
ただ、テンプレートはまた事情が違います。例えば以下のような場合

アイコンが一つだけ下に位置しています。だったらいっそのことこの方が良い ↓

このテンプレートでは実際にはこういったことは起こらないので、サンプル作成のために無理やりhtml内容を変更してキャプチャしました。テンプレートのhtml内容によっては   の使いみちがありますよ、というのをお伝えしています。けれども一般ユーザーさんが記事内で   を記す、というのはよっぽど巡ってこないような。というか最初に書いたように「悪手」なので使うべきではないというか。使ってはいけないというのではなく、「何故」「何のため」に使うか、その目的が重要。

htmlのソースコードで利用されるのは、例えば span要素 同士が隣接していて、spanは横に並ぶし折返しもするのでその調整とか。でも display と margin で操作した方がコードとしては美しいですわね。

Jingle - FC2ブログテンプレート

Jingleテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

vanillaice000.blog.fc2.com

スペース(半角, 全角)で位置を調整するべきではない

残念ながら今回の主旨「 」が記事内で使われる場合、そのほとんどが 余白の調整, 位置の調整 です。ですが簡単なようで実はものすごくめんどくさいことをしているのだよ、というのを説明します。まぁでもこの点については 記事作成を「見たままモード」のみで行う というユーザーさんに対して言うのはちょっと酷かなぁ、という気もしますので、できる範囲でやれば良いこと、と割り切ってくださいね。

スペースの利用は目的による、ということで、絶対におすすめしない目的はズバリ 水平位置合わせ です。例えばよく見かけるのは以下のケース。水平位置合わせについては半角スペースは連続しても大きさが変わらないという性質があるので、これから紹介するケースでは主に全角スペースが用いられています。

複数行の位置調整

「りんご」と記述し、全角スペースを5回押下、「みかん」と記述して改行、下の行でも「ばなな」「れもん」に同じ処理。
「りんご」「ばなな」の文頭と「みかん」「れもん」の文頭が揃っている様子です。ですがこれは同じ文字数だから簡単に上手く行っただけです。

一行目の全角スペース数は 7
二行目の全角スペース数は 8
三行目の全角スペース数は 5
という感じで行ごとにスペース押下数を変えなきゃいけない。実に面倒 （￣∀￣；）
さらによく見ると「すいか」の文頭は上の行と揃っていませんね。これは「パイナップル」がカタカナであり、さらに「っ」という促音(そくおん)を持っているためです。日本語には他にも「ゃ」「ゅ」「ょ」の拗音(ようおん)もあります。

webの主に「文章」は一般的に プロポーショナル と呼ばれる 等幅ではないフォント がよく利用されます。等幅フォントはソースコードやプラグラミング言語などに用いますが、いわゆる「小説」「漫画」など読み物では等幅フォントは好まれませんので、よほどのことが無い限りプロポーショナルが採用されます。等幅ではないわけですから、促音や拗音やカタカナやアルファベットが混在してれば全角スペースで位置を調整するのは至難の業。それこそ全角スペースだけでなくところどころ半角スペースを含ませるなど、めちゃくちゃ根気のいる作業になってしまいます。

一言で言ってしまえば スペースで位置調整するなんて土台無理な話 でございます。

どうしてもやりたいんだ、という場合はやはり htmlを使う という一択です。難しいことをしようとしてるのだから、それなりに難しいことに挑戦することになりますね。このサンプルの場合は table要素 や div要素 などで形成するのが良いんじゃないでしょうか。やり方は色々あります。

上記は table要素 を用いた例です。アルファベットが入っても綺麗に整列します。全体を中央に配置するのも容易です。
* スマホ閲覧の方はわかりづらいと思います。すみません。

htmlでの全体中央寄せは最適解だとして、悪例として上げた「全角や半角スペースで整形」したものを中央にしようと思うと、やはり各行の文章(単語)文頭に全角スペースを入れる、ということをやってしまいがちです。それをやるとスマホでの見た目がめちゃくちゃになりますので絶対にやめましょう ^^;

たまにこういうのも見かけますね。訪問履歴を見てみると、ブログ名がおかしい ↓
* 実際のブログ名を変更して表示しています。

訪問履歴のリンクは左寄せなので本来ならばこうなるはず ↓

左に寄せられていないように見えているのは、ブログ名の文頭に全角スペースを複数入力しているためです。何を目的としたかは明白。これは 利用テンプレートでの水平位置合わせ のためとみてまず間違いない。

ビンゴ。この公式テンプレートは本来ならこう ↓

位置を揃えたいばかりにブログ名を犠牲にしてしまったパターンです。このブロガーさんのブログ名は「ブログはじめました」ではなく「全角スペース全角スペース全角スペース全角スペース全角スペース全角スペース全角スペースブログはじめました」です。なぜなら全角スペースは「文字」だから。うぇーん (;_;)

テンプレートに於けるブログ名の水平位置合わせは大抵の場合 text-align もしくは margin ですぐに解決できますので、スペースでの調整はやめましょうね (∵`)
全角スペースでなく   連続表記ももちろんダメです。

意外なところでバリデートエラー

FC2ブログには ブログバトン という機能がありましたよね。すでに管理画面からリンクは外されていますので、ここでは終了サービスとして扱います。

以下はブログバトンの一例です。

「Q1」「A1」などQ&A番号と質問及び答えとの間に空白がありますね。この空白は半角スペースではなく   が記されています。半角スペースで十分だと思うんだけど何故か   です(笑)

で、みなさんが仮に 要約表示タイプテンプレート を利用しているとしたら、トップページやカテゴリページなどは以下のような感じで表示されます。

赤く囲った部位が記事の 要約 (概要分) で、これはFC2の規定で「本文に記載された文章の200文字まで」を取得します。200文字以上の文字数があってもテンプレートで200文字以内表示になっているとしたら、そのテンプレートでは表記文字数あるいは表記行数に制限をつけてあるためです。その調整は主にCSSかJSでもって行われます。でもそれは見た目上の操作をしているだけで、概要文はきっちり200文字まで取得されています。

記事本文内200文字以内に半角スペースが含まれている場合はそのまま半角スペースとして取得されます。そして   が書かれている場合、文字列としては   として取得されるが、ブラウザでの描画は空白となる という特徴があります。

そして偶発性が高いのはここからなんだけれども、たまたま制限の200文字付近に   があって、その「一部」を取得してしまうことがあります。例えば「…………あいうえお&nbsp」とか。  の p で文字数制限を迎えたため一部が欠けて &nbsp
これバリデートエラーです。

Named character reference was not terminated by a semicolon. (Or & should have been escaped as &.)

ちゃんとセミコロンを付けてエスケープ処理をしなさい、というエラー。概要文はプレーンテキストとして取得されますが、ブラウザに表示された場合はhtmlとして処理されます。バリデートはhtmlをチェックするのですから、html「ぽいもの」が記されており、それが正しくないと判断できる場合にはエラーを返します。

ホントに「たまたま末尾に   が…」という偶発性の高いものなんですが、ブログバトンをたくさん掲載しているブロガーさんを発見したので検証したら、結構なエラーページ数ありましたよ。ブログバトンは   の使用頻度が高いので仕方がない。

まとめ

「なんでここでわざわざ   使うんやろ？半角スペースでええやん」と思うことが結構あります。たぶんだけど「半角スペースをhtmlで書いてる」という感覚なのかもです。私からしたら半角スペースが一番安全。  なんてまず使うことないですけどね (´・ω・｀)

• 英文を扱う場合
• htmlソースコードの要素間を調整

使うにしてもこのぐらいではないかと思います。別の言い方をすれば「これ以外は素直に半角スペースを使えば良い」ということでもあります。

おまけ

「FC2ブログの記事作成画面(新しい記事を書く)で半角スペースを連打すると、何故かドットが勝手に表記される」というご相談がありました。これはたぶん、Macを使用されており、OSをMontereyにアップグレードされたからではないかと思います。

Macの「システム環境」を開き、キーボード > ユーザー辞書 に進むと「スペースバーを2回押してピリオドを入力」のチェックを外せばOKです。

これが記事を書くきっかけになったんだけども(笑)
何故半角スペースを連打したのかな？というところから ^^;