【初心者向け】HTMLで半角スペースを入れる方法



【初心者向け】HTMLで半角スペースを入れる方法

HTMLでスペースを入れようとしても、ワードやテキストファイルのようにうまくいかずに困っていませんか?HTMLで思った通りにスペースを入れるためには、特殊文字を使いましょう!

今回は、初心者にもわかりやすく、HTMLで特殊文字を使って半角スペースを表示する方法を解説します!

目次
  1. こんなときに使う、半角スペース
  2. 長い文章を書くときの字下げなどの文章の調整に
  3. テキストのデザインの微調整に
  4. 折り返したくない単語の間のスペースに
  5. 特殊文字を使って半角スペースを入れる方法
  6. 特殊文字とは?
  7. 半角スペースの特殊文字のコード
  8. 特殊文字で半角スペースを連続で入力する方法
  9. まとめ

こんなときに使う、半角スペース

半角スペースはこんなときに使えます。

長い文章を書くときの字下げなどの文章の調整に

話題が変わるとき、段落を変えるときにスペースで余白を作る方法があります。

こういった文章を長く書くときにはいつも何を書いていいものか迷うものですが、段落を変える場合は話題が変わるということなのでなにか一つ違った話でもしようかなと思います。
ここ最近急に寒くなってきており季節の変わり目というものは皆さん体調を崩しやすい季節でありますが、わたくしもご多分に漏れず喉などを痛めておりましてまことに困った状態で過ごしているわけでございます。

わかりやすいように、半角スペースをで表しています

テキストのデザインの微調整に

文章中、強調したい部分にスペースを開けて表現する方法もあります。

この文章中には強調したい部分があります。

わかりやすいように、半角スペースをで表しています

折り返したくない単語の間のスペースに

次項で紹介する特殊文字、 はNon breaking spaceの略で、日本語でいうと改行なしスペース。英単語では複数単語で一つの言葉を表す場合に、文章中で改行してほしくない場合が出てきます。このときに、 を使っておくとそれ以外の部分でHTMLの文章が改行されるというわけです。実はこれが本来の使い方なんです。もちろん、日本語でもこの用途で使用できます。

半角スペースに を使用していない場合

長い文章中の特定の単語の途中で改行してもい いいです よ

半角スペースに を使用した場合

長い文章中の特定の単語の途中で改行したらだ めです よ

特殊文字を使って半角スペースを入れる方法

特殊文字とは?

こちらが、半角スペースをHTMLに表示させる特殊文字(エスケープシーケンスとも言います)のコードです。

 

&から;まで6文字すべて必要です。特に;はよく書き忘れてしまいますので注意してくださいね。

半角スペースの特殊文字のコード

実は他にも同様に、スペースを入力するための特殊文字があります。少しずつ用途が違いますので、必要な場合は使い分けてくださいね。

特殊文字 表示サンプル 説明
  普通の 半角スペース 半角スペース(改行しない)
  広めの スペース 広め
  全角幅 スペース もっと広い
  せまい スペース 狭い

特殊文字で半角スペースを連続で入力する方法

通常、連続して半角スペースを入力すると、HTMLで表示した際は複数の半角スペースは消えてしまいます。

サンプルコード

半角スペースの❚❚❚❚❚サンプル

わかりやすいように、半角スペースをで表しています

表示結果

半角スペースのサンプル

複数の半角スペースを連続で入力したい場合も、特殊文字を使用していれば反映されます。

サンプルコード

半角スペースの     サンプル

表示結果

半角スペースの❚❚❚❚❚サンプル

わかりやすいように、半角スペースをで表しています

まとめ

HTMLには特殊文字というものがある、というのだけでも覚えておけば、&のついた謎コードがHTMLに出てきても、もう怖がらなくて大丈夫ですね!半角スペースを使って、思ったとおりのデザインを実現してください!

のりぴよ
この記事を書いた人
のりぴよ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp