HTMLの空白がブラウザによってどのように扱われるかを見る
あなたが初心者のWebデザイナーである場合、早い段階で理解しなければならないことの多くは、サイトのコード内の空白がWebブラウザによって処理される方法です。
残念ながら、ブラウザが空白を処理する方法は、最初は非常に直感的ではありません。特に、HTMLに入り、それをよりよく知っているかもしれないワープロプログラムでの空白の扱いと比較すると、
ワープロソフトウェアでは、ドキュメントに多くのスペースやタブを追加することができ、その間隔はドキュメントのコンテンツの表示に反映されます。 これはHTMLやWebページでは当てはまりません。 そのため、Webブラウザがどのように空白を処理しているかを知ることは非常に重要です。
印刷での間隔
ワープロソフトウェアでは、3つの主要な空白文字はスペース、タブ、およびキャリッジリターンです。 これらはそれぞれ別個の方法で動作しますが、HTMLではブラウザが本質的に同じになります。 HTMLマークアップにスペースまたはスペースを1つ入れたり、スペースをタブやキャリッジリターンに合わせたりしても、ブラウザーでページをレンダリングすると、これらのすべてが1つのスペースに縮小されます。 Webデザインの用語では、これは空白の崩壊と呼ばれています。 これらの典型的なスペースキーを使用してWebページ内の空白を追加することはできません。これは、ブラウザが複数のスペースをブラウザでレンダリングするときに1つのスペースに縮小するためです。
誰かがタブを使うのはなぜですか？
通常、テキスト文書でタブを使用する場合、レイアウト上の理由からテキストを使用したり、テキストを特定の場所に移動させたり、別の要素から特定の距離に移動させたりします。 Webデザインでは、前述のスペース文字を使用して、これらのビジュアルスタイルやレイアウトニーズを達成することはできません。
ウェブデザインでは、余分なスペーシング文字をコードに使用するだけで、そのコードを読みやすくなります。 Webデザイナーや開発者はタブを使用してコードをインデントし、どの要素が他の要素の子であるかを見ることができますが、インデントはページ自体のビジュアルレイアウトには影響しません。 ビジュアルレイアウトの変更が必要な場合は、CSS（カスケーディングスタイルシート）を使用する必要があります。
CSSを使用したHTMLタブとスペースの作成
今日のウェブサイトは、構造とスタイルの分離によって構築されています。 ページの構造はHTMLによって処理され、スタイルはCSSによって指定されます。 これは、スペーシングを作成したり、特定のレイアウトを達成するには、CSSに目を向けるだけで、HTMLコードにスペーシング文字を単純に追加しないでください。
タブを使用してテキストの列を作成しようとしている場合は、その列レイアウトを取得するためにCSSで配置された
レイアウトしているデータが表形式のデータである場合は、テーブルを使用してそのデータを並べ替えることができます。 Webデザインでは、長年に渡って純粋なレイアウトツールとして濫用されていたため、テーブルはしばしば悪い評価を受けますが、コンテンツに前述の表形式のデータが含まれていれば、テーブルは完全に有効です。
余白、パディング、およびテキストインデント
CSSでスペーシングを作成する最も一般的な方法は、次のいずれかのCSSスタイルを使用することです。
- マージン
- パディング
- テキストインデント
たとえば、段落の最初の行を次のCSSでタブのようにインデントすることができます（段落には「first」というクラス属性が付加されていることに注意してください）。
p.first {
テキストインデント：5em;
}
この段落は約5文字分インデントされます。
また、CSSのマージンまたはパディングプロパティを使用して、要素の上下左右、またはそれらの辺の組み合わせに間隔を追加することもできます。 最終的には、CSSを使用して必要な間隔を確保することができます。
CSSを使わずに複数のテキストを移動する
前の項目から1つ以上のスペースを移動するだけの場合は、改行しないスペースを使用できます。
非改行スペースを使用するには、＆nbsp; HTMLマークアップに必要な回数だけ追加してください。
たとえば、単語を5つのスペースに移動したい場合は、単語の前に次の単語を追加できます。
＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;HTMLはこれらを尊重し、単一のスペースにそれらを崩壊させません。 しかし、レイアウトに必要なだけのHTMLマークアップをドキュメントに追加するため、 これは非常に貧弱な方法です。 その構造とスタイルの分離を参照すると、単純に目的のレイアウト効果を得るために非改行スペースを追加することは避け、CSSマージンとパディングを代わりに使用する必要があります。