「インライン要素とブロックレベル要素(ブロック要素)」の編集履歴(バックアップ)一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
ここでは、インライン要素とブロックレベル要素についてまとめていきます。
#contents
*ブロックレベル要素
*インライン要素
*imgタグ(インライン要素に含まれる)
ここでは、インライン要素とブロックレベル要素についてまとめていきます。
#contents
*HTML5で廃止?
いきなりですが、HTML5からインライン要素、ブロックレベル要素という概念はなくなりました。(ややこしいですが、概念はなくなりましたが、一応存在としては残っています。)「コンテンツ・モデル」という考え方になり、各要素の内包できるものや内包されるものが決められており、それ以外の要素は入れてはいけない。という概念に移りつつあります。
よくCSSで
display: inline;
display: block;
などと記述されますが、それとは&color(red){別のものである}と考えてください。
色々な記事を拝見しますと、これまでは見た目重視(ブロックレベル要素、インライン要素の使用)のところから文章構造(クローラに正しく解釈させられるか)という方向に移りつつあるようです。
http://creator.aainc.co.jp/archives/4045
~
例:ブロックレベル要素の中にインライン要素~
正しいのは以下
<p><strong>この表現はいい</strong></p>
正しくないのは以下
<strong><p>これはダメ</p></strong>
http://www.mdn.co.jp/di/articles/2605/?page=8
*ブロックレベル要素とインライン要素
とある記事に
>divは代表的なブロックレベル要素だ。ブロックレベル要素は新しい行に配置される。そして、ブラウザサイズに応じて、可能な限り左右に引き延ばされる。pやformもブロックレベル要素だ。HTML5で新しく追加されたheader、footer、sectionなどもブロックレベル要素である。
*ブロックレベル要素とインライン要素一覧
**ブロックレベル要素
<address>
<blockquote>
<center>
<dir>
<div>
<dl>
<fieldset>
<form>
<h1>-<h6>
<hr>
<isindex>
<menu>
<noframes>
<noscript>
<ol>
<p>
<pre>
<table>
<ul>
<header>
<footer>
<article>
<section>
<aside>
**インライン要素
<a>
<abbr>
<acronym>
<applet>
<b>
<basefont>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<font>
<i>
<iframe>
<img>
<input>
<kbd>
<label>
<map>
<object>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<sub>
<sup>
<textarea>
<tt>
<u>
<var>
**ブロックレベル要素の特徴
縦に改行(積まれていくイメージ)されていく
幅と高さを指定する事ができる
上下左右にmarginとpaddingを指定できる
text-alignは要素の中身に適応される
vertical-alignは指定できない
**インライン要素の特徴
横に並んでいくイメージ
幅や高さは内容物の大きさについて
左右だけにmarginやpaddingを指定する事ができる
text-alignを親ブロックにつけることで指定できる
vertical-alignを指定できる
参照元:http://ja.learnlayout.com/display.html