• FVM大賞2015 優秀賞 受賞
  • 平成26年度福岡市トライアル発注認定事業者
  • 平成25年度福岡市ステップアップ最優秀賞 受賞
  • 平成25年度九州ニュービジネス優秀賞 受賞
  • 福岡県情報セキュリティ連絡協議会加盟企業
  • 福岡ベンチャーマーケットプレゼン企業
  • 福岡大学共同開発企業
  • 経営革新計画 第1936承認企業
  • 平成23年度九州地域中小企業事業家支援
    お助け隊事業アドバイザー企業
  • 平成23年度福岡市競争入札参加有資格企業

Webデザインメモ

日々学ぶウェブデザインについて、すぐに役立ちそうな情報を綴っていきます。Webデザインメモ

2017年7月11日(火曜日)  (山本 真里奈)

コーディングの手間を防ぐ、チェック項目2点

コーディングはスピードが勝負です。
しかし、思いがけない箇所でスタイルが破綻したために修正が入ったり、作業が余計にかかることがしばしばあるかと思います。


今回は、そのような「余計な作業」がでてしまう原因の一部である以下の2点をチェックしてみてください。

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

1) HTMLに、依存した記述をしていないか

例えば以下のh1を赤い文字色にするために、以下のように記述したとします。

-- HTML --

<div>
<h1>タイトル</h1>
</div>


-- CSS --

div h1 {
color: red;
}


もし、途中でhtmlの構造が変わり、h1がh2になった場合どうなるでしょうか。
htmlだけでなく、cssも修正する必要があり、その分無駄な修正作業が発生してしまいます。

そうならないためには、htmlのh1に、例えば「tl_txt」など、class名を付けると良いです。
そうすれば、たとえh1に変更が入ったとしても、class名の変更が入らない限りcssの修正が不要になります。


2) スタイルを取り消しすような記述をしていないか

一度定義したルールを、あとから0やnoneといった値を記述することで上書きしていませんか?

以下のパターンでは線などを「取り消す」ためのスタイルです。

-- HTML --

<h2 class="title no-border">見出し</h2>


-- CSS --

.title {
margin-bottom: 10px;
border: 1px solid #000;
padding: 10px;
}
.no-border {
margin-bottom: 0;
border: none;
padding: 0;
}


それに対し、次のパターンでは線などを「追加する」ためのスタイルです。
-- HTML --
<h2 class="title main_tl">見出し</h2>

-- CSS --

.title {
padding: 10px;
}
.main_tl {
border: 1px solid #000;
margin-bottom: 10px;
}


上2つのソースを見ると、ソースを記述する量に差があることがわかります。

スタイルを記述するときには、取り消すのではなく、追加していくようにしましょう。


以上です!


私は特に、1)をやってしまうがために、ゴリ押しで2)をしてしまうことが多かったような気がします・・・

上2点に気をつけることで、修正しやすくなり、メンテナンス性のアップにつながります。是非参考にしてみてください。