TeraPadでTABスペースを見えるように設定し、htmlやcssのコード記述位置をそろえる字下げ(=インデント)に活用しよう

Pocket

TeraPadでTABスペースを見えるように設定し、htmlやcssのコード記述位置をそろえる字下げ(=インデント)に活用しよう・・・といわれても、あまりピンとこないひとも多いですよね。そもそも『TABスペースってナニモノ?』という人も多いハズ。TABスペースには色々な使い方があるのですが、このページでは「htmlやcssのコード記述位置をそろえる字下げ(=インデント)として使うTABスペース」に絞って説明します。

とにもかくにも、文章よりイメージで見た方がわかりやすいのでまずは、TABスペースが見えない状態の図をみてください。

10行目~22行目までをみると、先頭8桁まで空白になって、9桁目からはhtmlタグが記述されています。『インデントされて整って見やすいけど、これってなんだろう?』と思いませんか?実はここに入っているのが、TABスペースなのです。

『えっ!なんでTABスペースが入っているってわかるのよ!!!』と思われたあなた。はい、おっしゃる通りです。それでは、TABスペースが見える設定をします。 [表示]メニュー→[オプション]をクリックし、オプションダイアログボックスを表示します。

[表示]タブをクリックします。

[TAB]にチェックをいれます。

これでTABスペースが見える設定は完了です。 画面をみてみると10行目~22行目までの先頭にTABスペース「>」が表示されているのがわかります(ちょっと小さくてわかりずらいかな)。

特にhtmlでは「開始タグと終了タグの対応」を字下げ(=インデント)で判断することが多いので、TABスペースを使うとすごく便利です。『エッ?半角空白で字下げ(=インデント)すれば、いいじゃない!』と思ったあなた。TABスペースにしかできないことがあるのです。

TABスペースにしかできないこと

たとえば、『TABで字下げ(=インデント)している間隔が広すぎてみずらい!もっと狭くていいんだけど』といった場合、TABスペースの間隔を狭くすることができます。たとえばこんな感じです。

先の画面が「TABスペースの文字数8(でインデントする)」、後の画面が「TABスペースの文字数2(でインデントする)」の幅で設定した時の画面です。見やすい見ずらいは個人差があるので、どちらがよいかはあなた次第です。 重要なのは「半角空白でインデントを設定してしまうと、インデントのスペース幅を広げたり、狭めたりすることができない」ことです。

それでは、設定方法です。
[表示]メニュー→[オプション]をクリックし、オプションダイアログボックスを表示します。

基本タブをクリックします。

タブの文字数を(1~8の間で)設定し、[OK]ボタンをクリックします。

これで設定完了です。今回は字下げ(=インデント)を2文字に設定していますが、あなたが見やすい字数に設定してくださいね。

TeraPadでTABスペースを見えるように設定し、htmlやcssのコード記述位置をそろえる字下げ(=インデント)に活用しようのまとめ

htmlでは特に「開始タグと終了タグの対応」を「字下げ(=インデント)」で判断しなければならない」ことが多くなってきます。そのため字下げ(=インデント)をうまく使って、記述していくことが重要になってきます。TABスペースを見えるように設定し、htmlやcssのコード記述位置をそろえる字下げ(=インデント)の幅を調整して、記述していくと効率がよくなりますので、ぜひ設定しておいてくださいね。

Pocket