こんにちは、解説ゾロです！
Webサイトやブログを見ていると、文字が途中で改行されてしまって読みづらかった経験はありませんか？
例えば、
月30日（水）です。
38分になりました。
だったり
Smithといいます。
などなど、意図しない場所で自動的に改行されてしまうと、とっても読みづらくなりデザイン的にも不自然になってしまいます。
ご自分のWebサイトがそんなことにならないように「ここで勝手に改行させないぞ！」ができるんです。それも、ちょっと難しそうなCSSとかいうのもいじらずに、「HTML」だけで簡単に改行させない方法があります。
HTMLだけでOK！文節の途中で勝手に改行させない簡単な方法
冒頭のように、変なところで改行されないようにするには、いくつかの方法がありますが、一番簡単？だと思われる方法の解説をいたします。
使う指令文は「 」です。
この「 」は「Non-breaking Space」の略で、「文字実体参照 (Character Entity Reference)」と呼ばれる2つある通称「HTMLエンティティ」のひとつです。
HTMLでの働きは、行末で自動改行されないように指令し、Webサイトやブログでは半角スペース（空白）として表示されて、そのスペースが維持されます。
スペースを入れる方法は、キーボードのスペースキーで入れる方法がありますが、キーボードのスペースキーを押して入れたスペースと「 」で入れたスペースの見た目は変わりませんが、内容には大きな違いがあります。
例えば、キーボードのスペースキーを3回押して入れたスペースは、表示される時はスペースは1つ分だけになってしまいますが「 」を使ってスペースを3つ入れると、表示された時も3つ分のスペースが維持され、さらに改行を禁止にできる、というところが大きな違いです。
簡単にいいますと「改行しない、維持されるスペース」です！
HTMLで改行させない「 」の使い方
では、本題の「 」の使い方ですが、とても簡単です。
冒頭のように「Mr. Smith」の「Mr.」と「Smith」の間で改行されてしまうと、とっても読みづらくなりますので、改行させないようにするには、「Mr.」と「Smith」の間に「 」を書きます。
「Mr. Smith」と、こんなふうにです。
「ワードプレス」の場合、画面右上の方にある「ビジュアル」の隣の「コード」をクリックして画面を切り替えて、「Mr. Smith」と書くことで、「Mr. Smith」が文末になっても、必ず「Mr.」と「Smith」はいつも一緒の行に仲良く表示されます。
まとめ
HTMLだけの手軽さで、文節を意図しない場所での改行を防ぐことができました。
「 」で両サイドの文字をくっ付けて、離れ離れにならないようにしてやればいいのですね！笑
他の方法で、「HTMLエンティティ」のもう1つの「数値文字参照」エンティティを使う方法や<span>や<pre>などをつかっても改行を防ぐことができるようですが、CSSをいじったりしますので、簡単な今回の方法を選んでみました。
ちょっとしたことですが、読みやすくバランスが良い方がいいのかな、と思います。
「 」については、「HTMLで特殊文字の「 」をそのままブログに表示させる方法」の記事でも触れていますので、よろしければご覧くださいませ。
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：HTMLで特殊文字の「 」をそのままブログに表示させる方法
関連記事：HTMLソースコードをそのままブログサイトに表示させる方法
関連記事：すぐわかる！「padding」と「margin」の違いと使い分けが図解で納得
関連記事：ワードプレスでおしゃれな囲み枠の作り方はソースコードのコピペだけ
関連記事：WordPressで上付き文字と下付き文字を簡単に入力する方法
