はじめてのCSS：やさしさいっぱいのCSSが肌にしみこむ！カモ。
基礎知識：インライン要素とブロック要素
2008/09/01
トモ・リーン
画像置換やfile8の所でも出てきたインライン要素とブロック要素だけど、この機会にもうちょっと細かく説明するわよ！
ケンジ
おう〜〜〜！
トモ・リーン
まずはインライン要素。
インライン要素

文章の一部分の要素。ノートに書いたマーカーの様な感じです。

表示例
.marker {background-color: yellow;} 背景に色指定をしているだけの「marker」を代表的インライン要素のspanに適用させてみます。 バックが黄色くなっているので、ウィンドウの幅を広げたり縮めたりして表示を確認してください。（※IE6の方はFirefoxなど他のブラウザで見ると、ウィンドウ幅を変えることができますよ）
妖精とは、主にヨーロッパの民間伝承における超自然現象や不思議現象などの、非日常的存在のことで、日本における妖怪に当たる。英語 fairy の訳語として最も一般的である。出典: フリー百科事典『ウィキペディア（Wikipedia）』
出来る事
連続して横に並べる事ができます。
paddingやmarginも設定できます。
出来ない事
高さや幅は設定出来ません。
インライン要素のタグ

他にもありますが、XHTMLで使用するものを取り上げておきます。

  • span
  • a
  • strong
  • em
  • code
インライン要素のタグでもブロック要素の表示に変更
スタイルシートで制御出来ます。
display:block; これでOKです。
リンクテキストをボタンにしたい場合、aタグに適用したりします。
ケンジ
ふむふむ！
ケンジ
インライン要素は理解したぜ！
span { dysplay:block; }とか見かけたら爆笑したらいいんだね・・・。
トモ・リーン
はじめから"ブロックで意味の無いタグ"の「div」を使えよ！ってことよね。
ケンジ
そうそう。
トモ・リーン
じつはこれねぇ、HTMLの仕様上、仕方なくすることがあるわ。
ケンジ
ええ？？
トモ・リーン
HTMLには仕様上、ある要素の中にdivタグやpタグが入れなれない、とかあるのよ・・・。
よくあるのがh*タグの中にデフォルトでブロック要素のタグは入れられないのよ。
だから<h1>見出し<div></div></h1>とかダメなのよね。
ケンジ
ってことはh*タグの中でデザイン上仕方なくブロック要素を入れたい場合とかは、
<h1>見出し<span></span></h1>として、
CSSではspan { dysplay:block; 背景画像指定など; }
とやることもあるんだね・・・。
トモ・リーン
そうなのよ・・・。
うっかりh*タグの中には色々入れてはいけないタグがあるから、コーディングが終わった時点でDWの「バリデータ」でチェックするといいわよ。
他の仕様に合っていない記述もチェック出来るのでオススメね！
DWのバリデータはこんな感じで使えます。
  1. F7を押す
  2. 出てきたウィンドウの「バリデータ」タブをクリック
  3. 左上の再生ボタンっぽいものを押す
  4. チェックが開始される
トモ・リーン
次はブロック要素。
ブロック要素

エリア表示的なもの。レイアウト的には積み木を扱っているような感じです。

表示例
.marker {background-color: yellow;} 背景に色指定をしているだけの「marker」を代表的ブロック要素のdivに適用させてみます。 バックが黄色くなっているので、ウィンドウの幅を広げたり縮めたりして表示を確認してください。（※IE6の方はFirefoxなど他のブラウザで見ると、ウィンドウ幅を変えることができますよ）
妖精
とは、主にヨーロッパの民間伝承における
超自然現象や不思議現象などの、非日常的存在のこと
で、日本における妖怪に当たる。
英語 fairy の訳語として最も一般的である。
出典: フリー百科事典『ウィキペディア（Wikipedia）』
divの位置はインラインの項目のspanと同じ箇所に付けているのですが、全く表示が違いますね。
ブロック要素は他にも特徴的な挙動があります。
自動的に改行される
横に並べたいときは、floatを使用してください。
詳しくはfile10. レイアウトを組んでみる！　～floatについて～をご覧ください。
通常は横いっぱいに広がるが、フロートを付けると内容に合わせたサイズに縮む
floatは付いていません。
内容の幅が少ない場合+float無のサンプルです。
float:left;を付けています。
内容の幅が少ない場合+float有のサンプルです。

float:left;を付けています。
内容の幅が大きい場合+float有のサンプルです。
【幅広げ用テキスト】妖精とは、主にヨーロッパの民間伝承における超自然現象や不思議現象などの、非日常的存在のことで、日本における妖怪に当たる。英語 fairy の訳語として最も一般的である。出典: フリー百科事典『ウィキペディア（Wikipedia）』

幅を設定すると、フロートの有無、内容の幅に影響されず、指定した幅になる
floatは付いていません。
width:50%;を設定。
内容の幅が少ない場合+float無+幅指定有のサンプルです。
float:left;を付けています。
width:50%;を設定。
内容の幅が少ない場合+float有+幅指定有のサンプルです。

float:left;を付けています。
width:50%;を設定。
内容の幅が大きい場合+float有+幅指定有のサンプルです。
【幅広げ用テキスト】妖精とは、主にヨーロッパの民間伝承における超自然現象や不思議現象などの、非日常的存在のことで、日本における妖怪に当たる。英語 fairy の訳語として最も一般的である。出典: フリー百科事典『ウィキペディア（Wikipedia）』

ブロック要素のタグ

他にもありますが、XHTMLでよく使用するものを取り上げておきます。

  • div
  • h1〜h6
  • table
  • th
  • td
  • p
  • hr
  • dl
  • dt
  • ul
  • ol
  • li
  • from
  • address
ブロック要素のタグでもインライン要素の表示に変更
スタイルシートで制御出来ます。
display:inline; これでOKです。
リストの内容を横並びにしたいときにliタグに適用したりします。
ケンジ
おっけー、おっけー！
トモ・リーン
実はインライン要素だけどブロック要素ぽいのもあります。
ケンジ
何それ。
気持ち悪いなぁ・・・・・・。
置換インライン要素

文章の一部分の要素。ですが、箱っぽいです。

出来る事
連続して横に並べる事ができます。paddingやmarginも設定できます。
高さや幅も設定出来ます。（非置換インライン要素は高さ・幅の設定は出来ません）
置換インライン要素のタグ

他にもありますが、XHTMLでよく使用するものを取り上げておきます。

  • img
  • input
  • textarea
  • select
  • button
ケンジ
置換インライン要素って一瞬キモイ感じがしたけど、結構メジャーどころのタグだね。
ケンジ
置換インラインとブロック要素も理解したぜ！
div { dysplay:inline; }とか見かけたら爆笑したらいいんだね・・・。
トモ・リーン
はじめから"インラインで意味の無いタグ"の「span」を使えよ！ってことよね。
ケンジ
そうそう。
トモ・リーン
じつはこれねぇ、IE6のバグ対策でやる事があるのよ。
ケンジ
ええ？？
トモ・リーン
IE6にはフロートをかけたらマージンが時々２倍になるって言うバグがあるのよ・・・。
で、それを直すためには何故かdysplay:inline;とすると正しいマージンになるのよね。
他のブラウザに効いてしまったら嫌だからCSSハック（アンダースコアハック）を使ってIE6にしか効かないように「_dysplay:inline;」って書くわね。
ケンジ
気持ち悪いな〜〜。
時々っていうのがさらにファジー感満載で気持ち悪いね・・・。
トモ・リーン
最終的に怪談みたいになっちゃったけど、インライン要素とブロック要素はこんな感じです。
今回のポイント！
インライン要素とブロック要素の特徴を理解してスタイルシートに生かしましょう！
トラックバック(0)
このブログ記事を参照しているブログ一覧：基礎知識：インライン要素とブロック要素
このブログ記事に対するトラックバックURL
http://www.rasen-d.net/z/mt/mt-tb.cgi/98
コメント(2)
45shiki.net Author Profile Page

記事タイトルのインデント要素というのはインライン要素の間違いだと思うのですが？

2009/07/16
佐藤とも子 Author Profile Page

その通りですよ！
長年このまま置いていたのかと思うとかなり恥ずかしいです。
直しておきますね。
お知らせしていただいて、ありがとうございます。

2009/07/17
コメントする
名前
e-mail
URL
コメント(スタイル用のHTMLタグを使うことができます)
オススメ本
HTMLタグ+スタイルシート辞典ちび

基礎はもちろんCSSの記述に必要なことも載っているのでオススメ！

現場のプロから学ぶXHTML+CSS

実際のXHTML+CSSの作業について学びたい方にオススメ！

オススメCSSのサイト
TAG index

ものすごく使いやすいHTML & CSSのリファレンスサイト

CSSフリーライブラリー

色々なテーマごとにCSSの情報が集まっています！

オススメ勉強会
CSS Nite

お気軽な無料の会（主にアップルストアで）から、本格的な有料セミナーまで楽しい勉強会を開催してくれます。

Re:Creator’s Kansai（リクリ）

関西のクリエイターの交流、勉強会・セミナーの開催を目的としたコミュニティです。

螺旋デザインメンバーも執筆に参加！
アイコン：大藤幹のHYML/XHTML辞典
XHTML+CSS プロが教える“本当の使い方”

現場で培われたXHTML+CSSのテクニックを徹底解説!!

話題のiPhoneアプリ
アイコン：大藤幹のHYML/XHTML辞典icon
大藤幹のHYML/XHTML辞典icon

HTML5に対してもアップデート対応するらしいですよ！これで重い辞書とはおさらば♪

アイコン：myPANTONE
myPANTONE

色辞典です。サイトの色のイメージをクライアントと打ち合わせするときに、これを使ったらカッコ良すぎて話しがまとまりやすくなるかも！

POWERED BY MOVABLE TYPE® ver4