プロも迷うDIVとSPANの正しい使い分け方

feature-1

長くウェブプログミングを行っている人でも、DIVとSPANの違いは?と聞くと, “DIVはブロックエレメントでSPANはインラインエレメント”と返ってくるが、実際にどう使い分ける?と聞くとボロックエレメントが必要な場合はDIVで、インラインエレメントが必要なときはSPAN” と返ってくる。
実際、その答えは間違ってはいない。ただ、状況によってはSPANを使ってわざわざスタイルシートで display:block; を指定すことがある。CSSをメインで行ってないプログラマーにとっては、”なぜ?わざわざ一行増やすの?”となる。
正しいDIVとSPANの使い分け方の答えは、CSSの元々のフィロソフィーにある。
いつも忘れては行けないのが、CSSの本来の役割は、ウェブサイトのコンテンツであるテキストとデザイン用のコードを分けながら、正しいマークアップを行うことにある。
例えば、本文の題名をdivで囲むことは、正しいマークアップではないことはみなさんわかりますね?!

<!-- 正しくないマークアップ例 -->
<div>本文の題名は、DIVで囲む?</div>
<!-- 正しいマークアップ例 -->
<h1>本文の題名用のタグを使う</h1>

では、DIVはある区分を囲む為にあるのもわかりますね?!
例えば下のように筆者の紹介用のブロックがあるとしたら、必然的にすべてをDIVで囲み一つの意味のあるセクションとにします。

<!-- 正しいマークアップ例 -->
<div>
    筆者名
    <p>紹介文</p>
</div>

じゃ、最終的に”筆者名”にスタイリングする必要があり、スタイリングにブロックエレメントが必要だとして、
divかspanタグしか使えない状況だとしたら、あなたらSPANかDIVどっちらを使いますか?
…. わかりますね? 正しいマークアップを使うことがHTML/CSSでは、一番重要だということです。 

<!-- css style でボロックエレメントが必要な為にDIVを使用した例 -->
<div>
  <div id="author">筆者名</div>
  <p>紹介文</p>
</div>
<!-- 正しいマークアップ例 -->
<div>
    <span id="author">筆者名</span>
 <p>紹介文</p>
</div>
Facebook
Google+
Twitter
LinkedIn
Pinterest

ご相談ください

弊社では、案件のサイズに関係なくコストパフォーマンスの高いウェブ制作サービスを提供しております。

気軽にご相談ください。

Email: info@unilance.co.jp
Tel: 03 5830 7277

Wordpress、Laravel、React Natvieを得意としたウェブシステム開発会を行っております。社多言語対応も可!
気軽にお問合せください。

About

  • Stories
  • Community
  • Blog
  • Careers
  • Brand Assets

Downloads

  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...
  • Coming Soon...

© All rights reserved

Made with ❤ in Sugito, Saitama, Japan