Day: July 3, 2011

CSS
winmonaye

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

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

詳細を読む »