編集 - 環境設定 - コードフォーマットの画面

ちまたではインデントはタブか?スペースか?といった難しい話(インデント スペース タブ – Google 検索)があるみたいですけど、うちはそういったこだわりは全くなくTABを使っていました、現在はスペースを使うようにしてます(大したことない理由なので後述)。

で、Dreamweaverで使うインデントをスペースに変更したのに何か違和感があった。
いくらソースフォーマットしてもTABでインデントされる事があるのた。あるぇ?
全部TABなのかな?と非表示文字を表示してみたところ下の画像の様になった。

HTMLとCSSそれぞれのインデント記号が違う。

違和感がある時の非表示文字を表示した結果(再現)
HTML側の記号がスペースで、CSS側の記号がTABだった、なにこれ。

原因と解決法

環境設定をよくみてみると[高度なフォーマット:CSS]というボタンがあった。
コードフォーマットの画面に高度なフォーマット発見CSSのインデント設定はこっちだった

CSS側のインデント設定もスペースに変更したらおkだったああああ、よかったあああ

全部スペースに変換された

まとめ

[コマンド] – [ソースフォーマットの適用] で html(やcss)をインデントしたり出来る。
htmlとcssのフォーマット設定は分かれている。
htmlのインデント設定は[編集] – [環境設定] – [コードフォーマット]から
cssのインデント設定は[編集] – [環境設定] – [コードフォーマット]窓 – [高度なフォーマット:CSS]ボタンから変更する。

たかだかこれだけの事を説明するのに無駄に画像を使ってなにしてるんだろう。

TABを使っていた理由

  • Dreamweaverのインデント初期設定がTABだった
  • 他人のhtmlを修正する時はほぼすべてTABだった
  • スペースだったとしてもソースフォーマットするとTABになってしまう
  • インデント幅を後から簡単に変更出来る

で特に疑問を持たずTABでインデントしていた。

スペースに変えた理由

ある日の事、Dreamweaverで書いたソースをWordPressにコピペしてSyntaxHighlighterで吐き出させたページをAnother HTML-lint gatewayでチェックしたらTABを特殊文字で吐き出していてエラーになっていたから、スペースに変換するのなら最初からスペースでインデントした方が楽だという理由。


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.