Travelogue(トラベローグ)

Travelogue

HTMLソースも分かりやすく

2009.04.24

他の人が作ったHTMLページに変更を加えるような仕事をするとき、最初に制作を担当した人が、HTMLやCSSをきちんと整ったルールで綺麗に作ってくれていると、とても作業がはかどります。
逆に、メチャクチャで意味不明なHTMLやCSSの場合、予定より大幅に作業が遅くなってしまうこともあります。

仕事で作るWebサイトは、納品した後は他の人の手に渡ることも考えられるわけなので、ブラウザでの表示だけではなく、中身のHTMLソースも整理整頓されていて分かりやすいほうが、メンテナンス性の向上やミス防止に役立つという点で、クオリティアップと言えるでしょう。

目次

効率よくHTMLやCSSを整理する方法についていくつか例を挙げます。

HTMLにソースフォーマットの適用

Dreamweaverには「ソースフォーマットの適用」という便利な機能があります。
これは、後からでもHTMLソースを整形することができる機能で、クリックひとつでビシ!っと整います。知らない人が作った超メチャクチャなソースを、これでビシ!っとするのはかなり気持ちがいいです。
環境設定の「コードフォーマット」から、インデントする・しないもあらかじめ設定しておくことが可能です。
(下の画像はDreamweaverCS3)

ソースフォーマットの適用

ただ、このフォーマットはあまり細かいところまで自分好みに設定しておけるわけではないので、時間さえ許すなら人間の手で整形したほうが分かりやすいとは思います。
例えば僕は、インデントはしないで、大きめのエリアを分けるdivのボックスとボックスの間にいくつか改行を入れ、ぱっと見た感じで分かりやすくしてコーディングしているのですが、この機能を使ってしまうと、その改行が全部詰まってしまいます。

CSSにもソースフォーマットの適用

この「ソースフォーマットの適用」という機能ですが、CSSにも使うことができます。
環境設定の「コードフォーマット」の画面で、「高度なフォーマット:CSS」のボタンを押すと下の画面が出てきます。
ルール間に空白行を入れたりと、結構細かく設定できるので、自分が分かりやすいと思う形にしておきましょう。
ここでフォーマットを設定したら、あとはHTMLのときと同様に、メニューのコマンドから「ソースフォーマットの適用」を選択します。
(下の画像はDreamweaverCS3)

高度なフォーマット:CSS

CSSのショートハンド

ショートハンドというのは、CSSにおいて指定する値を一括して記述する方法のことです。
つまり、

h1 {
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;
}
h1 {
padding: 1px 2px 3px 4px;
}

上のふたつは同じ意味ですが、2番目のようにまとめて指定する記述方法のことをショートハンドと言います。
ショートハンドについての詳しい説明はここでは省きますが、CSSを書くとき、このショートハンドをうまく使うととても分かりやすくなるのでお勧めです。
そもそも上のふたつの書き方を見比べてみても、4行に渡って英語でごちゃごちゃ書かれていることを1行にまとめることができている時点で、スッキリしていて見やすくないですか?

Webサイトを作るときはこういうものがずらーっと続くCSSを扱うので、チリも積もれば山となり、ちょっとした整理整頓の積み重ねが、分かりやすさを段違いに向上させてくれます。
最初のところにも書きましたが、整理しておくということは、ミス防止やメンテナンスの効率性アップにはとても有用なのです。

このショートハンドですが、Dreamweaverでは環境設定の「CSSスタイルシート」という画面で、使うか使わないかを設定することができます。
(下の画像はDreamweaverCS3)

環境設定の「CSSスタイルシート」

ショートハンド使用時の注意点

僕は基本的にはショートハンドは使う方向で統一するようにしています。
ただし、classに使うときなどは、値の上書きには注意してください。
具体的には、

h1 {
padding: 1px 2px 3px 4px;
}
h1.title01 {
padding-top: 10px;
}

上記のように指定したい場合、つまりtitle01というクラスではpadding-topだけ10pxで上書きしたい場合、次のようにしてしまうと、h1に指定していた値が全部上書きされてしまいます。

h1.title01 {
padding: 10px 0px 0px 0px;
}

こういうときはショートハンドは使わないほうがいいかもしれませんが、どうしてもショートハンドで統一したいなら、次のように書きます。

h1.title01 {
padding: 10px 2px 3px 4px;
}

Copyright © 2004-2017 Travelogue.

Pagetop