開発チームブログ
ブロックレベル要素 インライン要素の違い
- 投稿日
- 2008年01月24日
- カテゴリ
- 開発チームブログ
■ブロックレベル要素とは。。。
文書の骨組みとなる要素で、「独立したまとまり」である。ブロックレベル要素はCSSで何も指定しない場合は、ブラウザの横幅いっぱいの領域を持つ。そして、要素の前後には自動的に改行が入る。
例）見出し(h1～h6),パラグラフ(p),作成者情報(address)など
■インライン要素とは。。。
文章中の一部として扱われる要素。インライン要素は行の一部として扱われるので、要素の前後に改行は入らない。必ずブロックレベル要素に含まれる形式で記述されなければならない。よって、bodyタグに直にインライン要素を記述してはいけない！
例）リンク(a),画像(img),強調(em,strong)など
・正しいインライン要素の使用例
<body>
<p><strong>インライン要素</strong>は、 必ず<em>ブロックレベル要素</em>に含まれなければならない！</p>
</body>
・誤ったインライン要素の使用例）
<body>
<strong>インライン要素</strong>は、必ず<em>ブロックレベル要素</em>に含まれなければならない！
</body>
■置換インライン要素とは。。。
特殊なインライン要素。通常、インライン要素は横幅(width)と高さ(height)は持たないが、置換インライン要素は横幅(width)と高さ(height)を持つ。
例）画像(img),テキストエリア(textarea),ボタン(button)など
■要素の基本ルール
- ブロックレベル要素の中には、別のブロックレベル要素やインライン要素を含めることができる。
- インライン要素の中には、別のインライン要素を含めることができる。
- インライン要素の中には、ブロックレベル要素を含めることはできない。
ブロックレベル要素の中には、他のブロックレベル要素を含むことができいもの(h1～h6,p,address,pre)や特定のタグ要素しか含めない物(ol,li,dl,tr)などがあるので注意すること！
業種別インタビュー
業種別ブログ
開発チームプロフィール
開発チーム
team Developers
LULER WEB CREATIONS 所属
(SE / WEBデザイナー / コーダ-)
Comment
開発チーム@ブログでは、SE/プログラマーの山口とコーダー/イラストレーターの齋藤が主に記事を更新しております。WEBコンテンツ開発にまつわる情報やネットワーク/サーバ管理に関する情報など業界ポッドでもかなりマニアックなスタッフブログです。同業者の方や本業界に興味のある方はどうぞ。
