もくじ
要素
<タグ>〜</タグ>のカタマリ全体のこと。たとえば<p>かたまり</p>は一つの要素となる。
親要素と子要素
要素Aの中に要素Bが入っているとき、要素Aが親要素、要素Bが子要素である。
<div> <p>sample</p> </div>
上記の場合、<div>の子要素は<p>、<p>の親要素は<div>となる。
要素の種類
ブロック要素
見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識されます。
ブロック要素の中には他のブロック要素やインライン要素を配置することができます。なので、親要素になることもあれば子要素になることもあります。
<div> <p> <table>など。
インライン要素
主にブロック要素の内容として用いられる要素で、文章の一部として扱われます。
インライン要素の中にブロック要素を配置することができません。インライン要素を配置することは可能です。すなわち、ブロック要素の親要素になることはありません。
<a> <span> <input> など。
インラインブロック要素
ブロック要素とインライン要素の特徴を併せ持つもの。
インライン要素と同様に横に並びますが、ブロック要素のように幅や高さも持ちます。
概念の廃止
html5からはブロック要素とインライン要素という概念が廃止され、完全に無視しても問題はないようです。しかし、これらの違いを意識して作ることでキレイなコードになることは間違い無いと思います。
表で見る違い
| ブロック要素 | インラインブロック要素 | インライン要素 | |
|---|---|---|---|
|
width height |
◯指定できる | ◯指定できる | ×指定できない |
|
margin padding |
◯指定できる | ◯指定できる | △左右のみ指定できる |
| 配置 |
縦並び （改行される） |
横並び （改行されない） |
横並び （改行されない） |
display プロパティ
表で見るように、要素の違いによって指定の可否が異なります。
本来指定できないものを意図的に指定するには、要素のレベルを変更します。displayプロパティを使用することで簡単に変更ができます。
例
p { display: inline-block; }
本来<p> タグはブロック要素ですが、displayプロパティで変更することでインラインブロック要素へと変更できます。
また、displayプロパティを使ってブロック要素（block）やインライン要素（inline）を指定することもできます。
