2013/01/25
HTMLソースを簡単に綺麗にする方法
今回は「簡単ですぐにできる、綺麗なHTMLソースの書く方法」をお伝えしていきます。
使用環境は「Adobe Dreamweaver CS4」です。
僕はサイトを閲覧する時にhtmlソースまでチェックしてしまう癖があります。
所謂、職業病というやつです。
チェックしてしまうのはソースだけではなく、
cssの中身や、そのIDのつけ方、ディレクトリの名前のつけ方もなんとなく見てしまいます。
綺麗なデザインの割りにソースが汚いと、
なんというか「残念な気持ち」になってしまいます。
勿体無いなあと。
デザインの出来によって、コーダーのモチベーションが上がることは、分かる人にはわかると思います。
“綺麗に掃除した部屋は綺麗に使いたい”
と思うのと同じようなものです。
結局進めていくうちに色々と予定が崩れてしまい
想定より管理しにくくなってしまうことがありますが、
それでもなんとか綺麗にしていきたいという気持ちがあるためよく使う方法があります。
「HTMLのインデントを整理すること」です。
簡単でお手軽に“かっこよく”できるので、
是非試してみてください。
（1）汚いソースを用意します。
インデントもない、改行位置もおかしい、囲い方がおかしいソースを用意します。
「綺麗にしたい！」と思えれば、一人前のコーダーです。
（2）タグライブラリを開きます。
[編集]→[環境設定]→[タグライブラリ]を開きます。
ここはタグが挿入された時やフォーマットがかけられた時など、
何か変化が加わった時にどのような形に補正するかを設定できます。
特におすすめというわけではありませんが、
僕が設定している項目は下記のようにしています。
<br>
【改行】改行なし
<head>
【改行】前、中間、後
【コンテンツ】フォーマットおよびインデントあり
タグライブラリは以上です。
（3）環境設定を開きます。
[編集]→[環境設定]を開きます。
左側のカテゴリの「コードフォーマット」を選択します。
下記のように設定します。
以上で設定完了です。
[コマンド]から[ソースフォーマットの適用]を選択すると、
プロっぽくなります。
簡単なので興味をもった方は是非お試しください。
コーディング業務のご依頼、ご相談の詳細についてはこちらから
最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。
| 次の記事へ | 前の記事へ |
関連記事
よろしければこちらの記事もお読みください。
WEB業界ならqam！qam（カム）はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ（コーディング）、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。
