【実践編】HTMLとCSSで空白を制御する方法：サンプルコード付き
HTML、CSSにおける空白の扱いと無視方法
HTMLにおける空白の扱い
HTMLでは、一般的に以下の通り、空白はほとんど無視されます。
- 単語間の空白: 複数の空白は1つの空白として扱われます。例えば、「これは サンプルです。」は「これは サンプルです。」と表示されます。
- 要素間の空白: 要素間の空白（改行を含む）は無視されます。例えば、
<p>これは</p>
<p>サンプルです。</p>
は、
<p>これはサンプルです。</p>
として表示されます。
- 要素外の空白: 要素の外側の空白は無視されます。例えば、
<p> サンプルテキスト </p>
<p>サンプルテキスト</p>
CSSで空白を制御する方法
HTMLで空白を完全に無視することはできませんが、CSSを使って意図した空白のみを残すように制御することは可能です。その方法として、主に以下のプロパティが利用されます。
white-spaceプロパティ
white-spaceプロパティは、要素内の空白の処理方法を指定します。主な値とその効果は以下の通りです。
pre：すべての空白を保持し、行の折り返しを許可します。inherit：親要素のwhite-spaceプロパティを継承します。
例:
p {
white-space: pre-wrap;
}
このCSSは、p要素内のすべての空白を保持し、改行も改行として表示します。
word-breakプロパティ
word-breakプロパティは、長い単語がどのように折り返されるかを制御します。主な値とその効果は以下の通りです。
normal(初期値): ブラウザの既定の設定に従います。長い単語は次の行に折り返されます。break-all：長い単語を文字単位で折り返します。break-word：長い単語を区切り文字で折り返します。
p {
word-break: break-all;
}
このCSSは、p要素内の長い単語を文字単位で折り返します。
上記以外にも、以下のような方法で空白を制御することができます。
エンティティを使用する: HTMLエンティティである を使用すると、非表示のスペースを挿入することができます。<br>タグを使用する:<br>タグを使用すると、強制的に改行することができます。displayプロパティをinline-blockに設定する: 要素のdisplayプロパティをinline-blockに設定すると、要素内の空白を保持することができます。
具体的な例
例1：コードの表示
コードブロックを表示する場合、空白を含むインデントや改行を保持したいことがあります。その場合は、以下のCSSを使用することができます。
pre {
white-space: pre;
}
例2：長い文章の折り返し
長い文章をブラウザのウィンドウ幅に合わせて折り返したい場合は、以下のCSSを使用することができます。
p {
white-space: pre-wrap;
word-break: break-word;
}
例3：見出しの余白調整
見出しの左右に余白を調整したい場合は、以下のCSSを使用することができます。
h1 {
padding: 10px 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>空白の影響</title>
</head>
<body>
<p>これは サンプル です。</p>
<p>
改行を含む
サンプルです。
</p>
</body>
</html>
このコードを実行すると、以下のようになります。
これは サンプル です。
改行を含む
サンプルです。
p {
white-space: pre;
}
これは サンプル です。
改行を含む
サンプルです。
white-space: pre; を指定することで、すべての空白が保持され、改行も改行として表示されます。
p {
word-break: break-all;
}
これはサ
ンプ
ル
で
す
。
改
行
を
含
む
サ
ンプ
ル
で
す
。
word-break: break-all; を指定することで、長い単語が文字単位で折り返されます。
例3： エンティティ
<p>これは サンプル です。</p>
これは サンプル です。
エンティティを使用すると、非表示のスペースを挿入することができます。
例4：<br>タグ
<p>これは<br>サンプルです。</p>
これは
サンプルです。
<br>タグを使用すると、強制的に改行することができます。
例5：displayプロパティ
p {
display: inline-block;
}
これは サンプル です。 改行を含む サンプルです。
文字列トリミング
p {
text-trim: none; /* デフォルト値 */
}
p {
text-trim: characters; /* 先頭と末尾の空白を削除 */
}
p {
text-trim: spaces; /* 単語間の余白を1つのスペースにまとめる */
}
text-trimプロパティは、要素内のテキストのトリミング方法を指定します。上記のように、様々な値を設定することで、空白の処理を制御できます。
注: text-trimプロパティは、すべてのブラウザでサポートされているわけではありません。
正規表現
const text = "これは サンプル です。";
const trimmedText = text.replace(/\s+/g, " ");
console.log(trimmedText); // 出力: これは サンプル です。
テンプレートエンジン
PugやEJSなどのテンプレートエンジンを使用すると、HTMLコードをより簡単に記述することができます。これらのテンプレートエンジンは、空白の処理を自動的に行う機能が備わっている場合もあります。
ライブラリ
HTMLとCSSの空白処理を容易にするライブラリもいくつか存在します。例えば、html-minifierライブラリは、HTMLコードを圧縮し、不要な空白を削除することができます。
- CSSの
letter-spacingプロパティを使用して、文字間のスペースを調整する - CSSの
text-alignプロパティを使用して、テキストの配置を調整する - CSSの
paddingプロパティとmarginプロパティを使用して、要素の周りの余白を調整する
適切な方法の選択
html css whitespace
