Dreamweaverを使って、ソースクリーニングをしよう！

【こちらの記事は、約5分程でお読みいただけます。】

皆さん、こんにちは！
いつもWebブログを見ていただきありがとうございます！

Draemweaverなどのホームページ作成ソフト（HTMLオーサリングソフト）を
使用すると、HTMLやCSSの記述速度や正確性が上がり、大変便利ですよね。

HTMLのソースも、初めて制作をする場合は、
比較的きれいに成形（インデント）をかけてくれます。

ただし、ホームページ作成ソフトの欠点として、
更新を繰り返すとソースがだんだんと汚くなってしまいます。
簡単に表現すれば、「消して入れて」を繰り返すとインデントが崩れたり、
消すはずのタグが残ってしまったり・・・ということが起こるのです。

以前にも、Web制作において一般ユーザーの目には見えにくい
ソースの部分が、実は非常に重要であることを書きました。

ゴミタグ（残骸）に関しては自分で削除しなければなりませんが、
ソースのインデントに関しては、Dreamweaverの機能で修正することができます。

たとえば、下記のようにインデントが
ぐちゃぐちゃになってしまったソースがあるとします。

<div>
  <h1>ソースフォーマットの適用</h1>
    <ul>
  <li>共同作業向き（誰でもわかりやすくなる）</li>
<li>余分なタグ・余分なスペースが見つけやすくなる</li>
    <li>SEO（ソースクリーニングの基本）</li>
</ul>
  </div>

Dreamweaverの「環境設定」⇒「カテゴリ」の中に、
「コードフォーマット」という項目があります。

Dreamweaverが自動的にソースにインデントをかけるかどうか？
かけるとしたら、それが（半角）スペースなのか？タブなのか？
また、１インデントでスペース何個分挿入とするのか？

の設定ができます。

あくまで環境設定なので、このチェックをはずしてしまうと、
次回に新規作成したファイルからは、まったくインデントがかからなくなります。
なので、作成済みのファイルを変更するわけではありません。
（環境設定＝初期設定のため）

では、作成済みのファイルをどのように修復すればよいのでしょう？

1.　環境設定でインデントがかからない設定にします（チェックをはずす）

2.　コマンドメニュー→ソースフォーマットの適用

この時点で、すでにかかっているインデントは「全部なし」になります。
（下記のように左に揃います）

<div>
<h1>ソースフォーマットの適用</h1>
<ul>
<li>共同作業向き（誰でもわかりやすくなる）</li>
<li>余分なタグ・余分なスペースが見つけやすくなる</li>
<li>SEO（ソースクリーニングの基本）</li>
</ul>
</div>

3.　環境設定でインデントがかかる設定に戻す（チェックを入れる）

4.　コマンドメニュー→ソースフォーマットの適用

そうすると、改めてゼロの状態からDWの機能でインデントをかけられるので、
一瞬で整形が終わります。（下記のソースのようになります）

<div>
  <h1>ソースフォーマットの適用</h1>
    <ul>
      <li>共同作業向き（誰でもわかりやすくなる）</li>
      <li>余分なタグ・余分なスペースが見つけやすくなる</li>
      <li>SEO（ソースクリーニングの基本）</li>
    </ul>
</div>

基本的に、制作者がサイト立ち上げを行う際も、
更新をする際も常に意識をしていれば不要な機能ですが、
前任者が必ずしも意識している（できる）方とは限らないため、
仕事で新しいサイトの担当になった際に利用するとよいでしょう！＾＾

--------------------------------------------------------------------------------

Web制作現場での必須ソフト「Dreamweaver」を学習しませんか？

⇒【Dreamweaver講座】
KENスクールでは、マンツーマン形式で授業を行っていますので、
パソコン初心者の方にも安心して受講していただくことができる環境です。
Webサイト作ってみたい方は、是非KENスクールまでお越しください！

本日の更新者：
パソコンスクール KENスクールWebコース
インストラクター 磯貝