変更履歴
- Rev. 0.7 : 2025年12月27日
- 新規作成
1 連続する複数の半角スペースが一つにトリミングされてしまった
下に示すHTMLにおいて、途中にある連続した5個の半角スペースが、
1つにトリミングされて表示された。
5個の半角スペースは、5個の半角スペースのまま表示したいのだが。
ちなみに、全角スペースの時は、記述した個数分だけが表示されている。
2 解決策
1章で示した現象は、HTMLのルールに従ったもの。
記述した連続する複数個の半角スペースをもとのまま表示するには、
次のような方法があります。
① CSSプロパティ”white-space”を使う
② “<pre>”タグを使う
他にもあるようですが、ここでは割愛します。
2.1 CSSプロパティ”white-space”を使う
下に示すように、CSSプロパティ“white-space”の値を、“pre”、
または“pre-wrap”とすると、連続する半角スペースはそのまま残されます。
詳細は、次のページをご覧ください。
white-space | MDN > CSS
|
1 2 3 4 5 6 7 8 9 |
【HTML】 <p class="sp-nontrim"> あい うえお </p> 【CSS】 .sp-nontrim { white-space: pre-wrap; } |
|
1 2 |
【表示】 あい うえお |
2.2 “<pre>”タグを使う
“<pre>”～“</pre>”タグで囲まれた要素内の
連続する複数個の半角スペースの文字列は、
そのまま表示されます。
|
1 2 3 4 |
【HTML】 <pre> あい うえお </pre> |
|
1 2 |
【表示】 あい うえお |
3 HTMLでも、TABコードを機能させたい
タブ文字（U+0009）の表示幅は、CSSの“tab-size”プロパティで設定することができます。
空タブの幅として使用する数値は、スペース文字（U+0020）の前進幅の倍数、
またはピクセル数です。
詳細は、次のページをご覧ください。
tab-size | MDN > CSS
下に示す例では、タブがつぶれないように“white-space”プロパティの値を“pre”に 設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
【HTML】 <p>タブなし</p> <p>	既定の 8 文字幅のタブサイズ</p> <p class="custom-number">	3 文字幅のカスタムタブサイズ</p> <p> カスタムタブサイズと同じ 3 文字の空白</p> <p class="custom-length">	50px 幅のカスタムタブサイズ</p> 【CSS】 p { white-space: pre; } .custom-number { tab-size: 3; } .custom-length { tab-size: 50px; } |
|
1 2 3 4 5 6 |
【表示】 タブなし 既定の 8 文字幅のタブサイズ 3 文字幅のカスタムタブサイズ カスタムタブサイズと同じ 3 文字の空白 50px 幅のカスタムタブサイズ |
以上
本記事の元となっているWordで作成したPDFを
ページ最後に貼り付けました。
少しでも役に立てていただければ、うれしく思います。
このPDFファイルは、自由に配布されてもかまいません。
ただし、再配布の際には、
入手元と著者名は明らかにしてください。
なお、上のPDFファイルの内容、また本文中の記述に、
誤字や脱字、誤った内容の記述など見つかりましたら、
下に示すフォームでご連絡いただければ幸いです。
