HTMLを書く時は各要素に役割を決めておくと、後々楽できるし幸せになれる! | Garney.Web

HTMLを書く時は各要素に役割を決めておくと、後々楽できるし幸せになれる!

スポンサーリンク

02151208_1

マークアップしている時に最近意識していることがある。それは個々の要素に意味を持たせること。

タグ要素には意味を持たせましょう。闇雲にHTMLを書いたらいい訳じゃない。HTMLってプログラム言語じゃないし、ちょっと覚えたら適当に書いてても割りと問題なく動くから、ババババーって書いちゃう。でも適当に書いていると、CSSやJSを記述する時にガタが来るんよなー。

要素に意味を持たせるとは

例えば、昨日書いた「クリックすると凹む角丸ボタンをCSSだけで作った!JS抜き!」の記事。このボタンのHTMLを抜粋してみる。

<div class="btn-box">
<div class="btn circle small yellow"><a>btn</a></div>
</div>

これね。aがあれば.btnクラス要らないやん?って思うけど違う。aはボタン本体としての意味があり、角丸ボタンとしてのスタイルしか記述しない。つまりaにmargin-topとかpadding-topなどは付けない(ボタンの形状としてpaddingが必要ならば使うが、他の要素間を開けたい場合には使わない)。aのボタン本体にmarginだとpaddingを付けてしまうと、コピーした時に使いにくいでしょ。

別の場所にペーストした時、ペースト先ではマージンが必要なかったら?その度にマージンを消すスタイルシートを書く?いやいや面倒でしょう。そうならない為に意味を持たせる。ボタンはボタン、マージンやセンタリングしたいだけなら別の要素にという具合に。
btn-boxクラスはこのクラスの中にはボタンを複数入れるのを想定したクラスであり。複数のボタンと外部の要素の間のマージンを開けたい場合などの為に使用する。

一番深い孫要素に直接スタイルを指定しない

この例では、.btn-boxクラス、.btnクラス、aのうち一番深い孫要素というのはa要素になるが、ここに直接スタイルは指定しない方が良い。この例では分かりやすいのだけど、aなんて幾らでもマークアップしていると使いたい場面が出てくるんですよ、だからaに直接スタイルを指定するのはダメ。.btnクラスを必ず挟む。おまけに.btnクラスも幾らでも出てきそうな、抽象的な名前のクラスなので、信用できない。だから.btn-boxからスタイルから辿ってスタイル指定する。

.btn-box .btn a{
/*btnのスタイルシート*/
}

つまり、角丸ボタンは.btn-boxクラス .btnクラス aが揃っていないとボタンとしてのスタイルとならない。.btn-boxクラスはボタンとそれ以外の要素のマージンやセンタリングの為に、.btnクラスはボタンの属性を決定する為に(例えばaはボタンで、角丸でサイズは色は・・等)そしてaがボタンの本体である。

これなら、まずクラス名のコンフリクトはしないし、コピペしても上手く行かないと言うこともほぼ無くなる。要らないマージンも要らないセンタリングもない。使いやすい!やった!

別の例も見てみる

<div class="box">
<section>
<div class="section-inner">
  <article>
      <p>test</p>
      <p>test</p>
  </article>
  <article>
     <p>test</p>
     <p>test</p>
     <img src="test.jpg" alt="test" />
  </article>
</div>
</section>
</box>             

とあり四角い枠の中にテキストを並べたいのなら、sectionが箱の本体であり、section-innerクラスは箱の中に作るpaddingの為の要素。pはテキストの為。articleはテキストの外の要素とのマージンの為に使う。
こうしておけば、sectionからコピーすれば四角い枠のスタイルそのまま使えるし、section内でarticleからコピーすればテキストのスタイルをそのままsection内で好きに使える。どこにでも挿入できる。

ポイントはarticleにpaddingを指定しないことだ。例えば上記の例では二番目のarticleにimgが入っている。articleにpaddingを指定していると、このimgがsectionの四角枠一杯に表示させたい場合困りませんか?
articleにpaddingのスタイルを指定していた場合、四角枠一杯に画像を表示させようと思えば、専用のスタイルシートを作らないといけなくなる。article class=”no-padding”とか。クラス名適当やけど。まあこんな感じで。
こんなことしなくても良いんですよ。.section-innerクラスがpaddingの為のクラスであれば必要無い。

<div class="box">
<section>
<div class="section-inner">
  <article>
      <p>test</p>
      <p>test</p>
  </article>
</div>
<article>
   <p>test</p>
   <p>test</p>
   <img src="test.jpg" alt="test" />
</article>
</section>
</box>             

こうしちゃえば良いでしょう。ね、楽ちんやろ。articleにpaddingを入れていると、こうは出来きない。CSSをわざわざ触らないとダメですね。これ面倒臭いね。楽しましょう。面倒くさいこと止めましょう。
まあこう設計するまでが面倒くさいと言えば面倒くさいが、後のこと考えたらこっちの方が良いでしょ。特に更新の多いサイトだったらさ。

JSでも一緒でDOMを変数に代入する時もイベントをバインドする時も、どの要素をJSの時に使用するか決めておくと良いですよ。pにクリックイベントをバインドしたり、aにバインドしたり、あっちこっちやってたら収集付きませんよ。
例えばjs-click-eventなんかクラスを作って分かりやすくするとか。必ずa要素にクリックイベントをバインドするとか。決めましょう。後になって困らない為に。

こんな感じで要素には必ず意味を持たせる。持たせておくと後々更新が楽になる。面倒くさい更新もコピペで終わり。皆幸せ。残業しなくて済む的な!

まあ想定外のことは幾らでもあるわけで、これで全て網羅できるわけじゃないんだがな・・くっ。

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法