![CSS、HTML、SEO、Web広告の話題ならStopn' Listen[ストップンリッスン]](http://kennsu.jp/common/logo.jpg){kind=logo}
2008年1月29日
最低限これだけ守っていればコーディングがうまくなるポイント
前回のエントリー（HTML及びCSSは習得が難しい言語か！）が適当に書いた割りにはレスポンスをたくさんしていただけてうれしい限りでございます。
こういう風に話題の種を蒔くと広がりがあるのがblogの面白いところですよね、たまに怖いけど。
ところで、僕は人を怒る、注意するといった事がとっても苦手です。
何もいつも僕が正しいわけではないので、もしかして言っていることが間違っていたらどうしようと思うからです。
できればほめちぎってあげたいのですが、長い人生そういうシチュエーションばかりではありませんよね。
HTML＋CSSコーディング作業も然りなので、
それに関する、多分これはやっておいて間違いないだろうという項目、
そして僕の好み（ここに該当する項目は適当にスルーしてください）をまとめてみます。
習得度にもいろいろありますし、事情もいろいろあると思いますので基本的に何も禁止はしません、
やったほうがいいよってことですね。
それでは以下詳細です。
1.中身が空の要素を挿入しない
単体で意味を持たない要素、divタグやspanタグを中身空で使用することは意味合い的にあまり好ましくないです。
角丸のためとか、div style="clear:both"とか、まぁわからなくもないんですけど、
なるべく使わない方法を考えたいものです。
brタグにクラスを設定してclearするのもこれと似た意味で避けたいものです。
2.id及びclass名に見た目に関わる名前をつけない
個人的にはそんなに腹が立つわけじゃなくて、
class="left"とかclass="red"とかそういうclass名は素人くさい感じでほほえましいですが、
原則として、その要素の意味を表す名前をつけてあげるのが基本なので上記のようなものはだめということです。
僕もたまに怠けてclass="clearfix"とか付けますけど、これは悪い見本です。
3.インデントは行わない方が無難
インデントをすると入れ子構造を把握できる代わりに、
ちゃんと入れ子構造通りにインデントをする義務が発生します。
Dreamweaverの機能で簡単に出来たりもしますが、
静的なページならまだしも、動的なページでは
PHPなどを利用してテンプレートを切るので構造がずれてしまったりという事があるのでだいたい左揃えの方が無難です。
まぁ、これは色々なケースがありますので無難とだけ。
4.CSSは作業終了後に見直して整理する
CSSに適切にコメントを入れると見やすくて良いのですが、
作業中はスピード重視でコメントをいちいち入れなかったり、
色々なセクションの記述がばらばらに書いてしまったりします。
こういうのはある程度仕方がないので、
作業終了の後、見直して適切なコンポーネントに分けたり、
コメントを挿入してあげるとメンテナンス性が向上します。
5.CSSはコンポーネント毎に複数に分けて記述する
いまや当たり前になったいわゆるコンポーネント化です。
CSSをある一定の役割毎に複数に分割して読み込む手法です。
運用体制など色々な事情から工夫して、切り分け方を考えると良いと思います。
こちらなど参考にしていただければと思います。
一枚で書くのが悪いって言う事ではないですが、
小分けにしておく方が管理はしやすいですよ。
6.CSSハックを使いすぎない
基本はクロスブラウザで書くことが無難です。
OperaやSafari用のハックはありますが、それらのモダンブラウザは殆どの場合ハックしなくても別の方法を採用すれば表示の体裁は保てると思います。
ハックはIE用のものだけにとどめておく事が良いでしょう。
7.HTMLタグで表示を調整しない
具体的にはスペースでインデントを調整したり、brタグの連続入力で余白を調整したりといった事。
タグにはひとつひとつに意味がありますので、それを考慮すればCSSで制御するのが良いという事です。
ですが、brの連続入力等は後でページ毎に修正しないといけないとかおおむね不便な事の方が多いので、
管理上の理由でもやめた方がよいです。
っと、思いつくままに７項目リストアップしました。
他にもあると思いますので気が向いた人は良かったらフォローお願いします。
インプレスジャパン (2007/07/03)
売り上げランキング: 8534
CSSレイアウト初心者の教科書！
基本に忠実な一冊
コメントする