空白を制御する

このレッスンではHTMLの中で 空白を制御する方法について学びます 現在コードエディタでサンプルファイルの HTMLを開いているところです このHTMLの中の文章にあるように HTMLのデフォルトでは ブラウザは最初の空白 半角スペース以外の空白を無視するでしょう つまり連続した 半角スペースの入力があっても それは無視されるということです 実際に試してみましょう この「ここで試してみよう」という文章と 「好きなだけ空白を追加する」 という文章の間に 半角スペースを複数入力してみます このように見た目上は 多くの半角スペースが入力された状態です この状態で保存し ブラウザで表示してみると 何も変わっていません 文章と文章の間には １つの半角スペースが存在するだけです このように先ほど申し上げた通り ブラウザでは最初の空白 半角スペース以外の連続した半角スペースを 無視して表示します そのため ここで表示されているのは 最初の半角スペースのみが 表示されているのです コードエディタに戻りましょう このような箇所に 空白を追加するためには 「 」という 文字実体参照を使うことができます 実際に入力してみましょう 入力した半角スペースを削除し ひとつだけ半角スペースを入力します その後に 「 」 この「nbsp」は non-breaking space つまり「改行をしないスペース」 という意味です この文字実体参照を１つだけではなく 複数繰り返して ここでは４回繰り返して スペースを入力してみます 頭の通常の半角スペースと合わせると ５つの半角スペースが入力されている ということになります 保存して ブラウザに行って リロードすると このようにスペースが 複数追加されていることが分かります ここではこのようなデモを実行するために 複数のスペースを設けましたが 実際にこのように文章と文章の間に 隙間を設けたり インデントをしたいという場合は このようにHTMLで 空白を追加するのではなく CSSでマージンやパディングを調整して スペースを空けることが適切です ではこの 「 」を 使った空白の追加は 具体的にどのようなシーンで 活用できるのでしょうか 例えばこの下の文章の中には 「Formula One」という単語があります…