HTML入門トレーニング

空白を制御する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
HTMLの中で空白を制御する方法について学びます。
講師:
04:54

字幕

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

HTML入門トレーニング

HTMLはWebページを作るうえでもっとも重要な言語です。これがきちんと定義されなければ、Webページは正しく表示されません。このコースではHTMLの成り立ちから基本的な構文の書き方、さまざまなタグの意味やその使い方まで幅広い内容を学ぶことができます。またHTMLと並んで重要な言語であるCSSやJavaScriptについても、それぞれその概要を説明します。

5時間43分 (48 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年05月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。