今、上の書籍「HTML&CSS標準デザイン講座」を使ってイチからHTMLを学んでいますがたいていの場合、エディターは「秀丸エディター」「emEditer」「さくらエディター」などとなっています。
本書「HTML&CSS標準デザイン講座」でも同様にエディターの紹介があります。レッスンを続けていて、HTMLを書いているとHTMLコードのインデントが面倒になるのです。
頭からコードを書いて行く時は良いのですが、途中で追加したタグが他の部分全体をインデントする必要が出た時に全部の行をインデントし直すのは大変なので、ここで登場するのがホームページビルダー17です。もしホームページビルダー17を持っているのでしたら、割と手入力のエディターとしても使えたのでお薦めします。
- 出版社/メーカー: ジャストシステム
- 発売日: 2012/10/05
- メディア: DVD-ROM
- クリック: 13回
- この商品を含むブログ (3件) を見る
ホームページビルダー17にある「ソース整形」を使う事で、クリック一つでインデントされた綺麗に並んだコードが瞬時に出来上がるのです。さらにタグの親子関係の解析も出来ていますから、どれがどの閉じタグかすぐに判明します。
※行番号の表示、インデントの文字数やエンコードの指定など一通りエディターとしての基本機能は揃っています。
Adobe Dreamweaver CS6 Windows版 [ダウンロード]を使えば良いのですが高い(｡･ω･｡)ので持っていません。安いホームページビルダー17でもちょっとやってみると、HTMLのコードをクリックひとつで整形する機能を見つけたのでここにメモしておきます。
ホームページビルダー17の設定
まず、上図の様に設定して、書籍「HTML&CSS標準デザイン講座」のひな形「XHTML1.0」の仕様にDOCTYPEを合わせましょう。上の設定画面は、「ツール」⇒「オプション」⇒「ファイル」タブです。GENERATORを組み込むのチェックを外せば「HomepageBuilder」の文字がメタタグに入らなくなります。
同様に、「オプション」の「一般」タブです。自動修正など気づかないうちに修正されてしまいますので外して置くと吉。
同じく、「ソース編集」タブで、行番号の表示にチェック、フォントの種類やサイズも変更可能です。インデントの字下げ文字数も変更出来ますので見やすいインデントにしましょう。あと面白いのは、「コードアシスト」閉じタグを自動的に補完してくれる機能です。この機能の便利な所は例えば「div=」まで入力すると「div=""」が自動補完され、同時にカーソル位置も自動的に「”」と「”」の間に移動してくれます。
あと、テーブルのタグを作っていると、ビルダーが勝手に「tbody」という要素を矯正追加するので、図のオプションを「省略可能なTBODYを表示する」のチェックを消しておきます。これで「tbody」は出てこなくなりますので一安心です。さらに、「ソース整形」をした時に半角スペースが空く問題は「空白セルに空白コードを自動挿入する」のチェックを外すことで回避出来ます。
