[ 最終更新日: 2026-07-24 16:49 閲覧回数: 9回 ]
エスケープシーケンス〜＜\t\t＞タグは機能しない
皆さんはすでにご存知のエスケープシーケンス。でもなぜか？機能しないのです。そこでエスケープシーケンスを見直してみました。
エスケープシーケンスとは？
特殊な機能を持たせるために使う文字がある。改行やタブなどの文字のことをエスケープシーケンスという。
php でも python でも これらをそのまま使用するとただの文字列の一部になって、その特殊な機能を有しないのを、あえてその特殊な機能を維持させるための方法だ。
ex. 'Hello World'を出力させるには
＜?php
echo 'Hello World'; \\とコードを書くことになるが、文節を２行で表現したいときには
echo 'Hello';
echo 'World'; \\と２行に分ける手もあるが、通常は
echo "Hello\nWorld/"; \\と書くのではなかろうか
?＞
この場合文字列の一部にある \n が改行という機能を有しているのである。
エスケープシーケンスーの種類
上記の \n の他にも色々あるので、良く使いそうなものをまとめてみた。
| エスケープシーケンス | その機能 |
|---|---|
| \t | 水平タブ |
| \v | 垂直タブ |
| \$ | ドル記号 |
| \ | バックスラッシュ・円記号 |
| \" | ダブルクオート |
いずれも html 上は単なる文字になって表示されない、あるいは予約記号となっていたりするので、いやいやそうではない。\ がついているので、本来の機能を発揮してくださいということになる。
\t は機能しているのか？
私には、どうも機能を果たしているのか疑問に思うことがある。
私は行頭揃えに \t\t という具合にタブを複数使うことが結構あるのだが、どうもそうはならないという場面に何度か出くわしている。原因は不明だ。
タブが半角何文字となるか？それは、通常４文字分か、８文字分となっているはずだ。でも任意の数にもできる。
だからそうなのか？タブの効果が感じられないのだ。
現在、やむなく 空白を意味する ＆nbsp （表示上の問題から全角で記載している） の数でしのいでいるのだが。
ふと解決策が見つかる
別の問題で、\t\t\t の記載を google AI アシスタント に指摘され、「頭出しの揃えに利用しているが、機能していないようだ」と答えたら、以下のような回答を得た。
なぜ \t（タブ）で位置がズレるのか？HTML（ブラウザ）の性質上、連続するタブや半角スペースは「1つの半角スペース」に凝縮されてしまうため、文字数をどれだけ数えても絶対に位置が揃いません。また、スマホのような画面幅が狭い環境では、文字が溢れて改行され、大きく表示が崩れてしまいます。
それでは解決策は？cssにwidthを明示的に指定すること、等幅フォントを使用することだそうだ。
タブ（\t）問題の解決: width（横幅）を明示的に指定したため、文字の長さに関わらず、日付・カテゴリ・タイトルの開始位置が綺麗に縦に揃います。 実は、現在のCSSのままで綺麗に揃っているのは、フォントに「等幅フォント（
monospace）」が適用されているためです。等幅フォントは「全角1文字＝半角2文字」とすべての文字幅が完全に同じなので、文字数さえ固定できれば、HTMLの文字を並べるだけでもパズルのように綺麗に縦のラインが揃います。
具体的には、以下のように、html本文で span classとして、css では、その span class に適用される width を定義すると行った具体です。
<span class="\xxx\">$xxxx</span>
.xxx{
display: inline-block; /* 幅（width）を指定できるようにする */
width: 90px; /* 画面の見た目に応じて 80px〜100px 等に調整してください *
}
参考
コメント
コメントはありませんコメント入力フォーム（気軽にコメントしてください）
- 誹謗中傷や名誉毀損、他人に不快感を与える表現を含む投稿はご遠慮ください。
- 改行は入力できません。一行で入力してください。
- 空白だけの入力など、いたずら目的の投稿はご遠慮ください。