■ブロックレベル要素とインラインレベル要素■
displayプロパティにてブロックレベル要素をインラインレベル要素に変更できる。逆も可能。
▲ブロックレベル要素▲
●種類<address>,<blockquote>,<center>,<dir>,<div>,<dl>,<fieldset>,<form>,<h1>~<h6>,<hr>,<isindex>,<menu>,<noscript>,<noframes>,<ol>,<p>,<pre>,<table>,<ul>見出し、段落、リスト、テーブルなどが該当します。Webデザインのレイアウトを作るときは、大体このブロックレベル要素でレイアウトしていきますよね。ブロックレベル要素はインライン要素と違って、横幅や高さ、margin や padding の余白も自在に操れるので、レイアウトするのにはもってこいなんですね！
・自動で改行される＝縦に積まれる＝内包ブロックを作りそこに子要素が入る形となる。・ブロックレベル要素の中にはブロックレベル要素・インライン要素を入れてもOK。・「独立したかたまり」と考える。
margin ? 上下左右指定できます！padding ? 上下左右指定できます！width ? 指定できます！height ? 指定できます！border ? 指定できます！background ? もちろん指定できます！
————————————————————————————————————————————————
▲インラインレベル要素▲
●種類<a>,<abbr>,<acronym>,<applet>,<b>,<basefont>,<big>,<br>,<button>,<cite>,<code>,<dfn>,<em>,<font>,<i>, <iframe>,<img>,<input>,<kbd>,<label>,<object>,<q>,<s>,<samp>,<select>,<small>,<span>,<strike>,<strong>,<sub>,<sup>,<textarea>,<tt>,<u>,<var>ブロックレベル要素内の文章の一部となる要素で、リンク、強調、略語などで使うタグが該当します。
・自動で改行されない＝横にならぶ。・インライン要素の中にブロックレベル要素を入れる事はできない。・インライン要素ではインライン要素では、指定しても反映されない。・「行内の一部」と考える。 margin ? 左右は効くけど、上下は効きません。 padding ? 一応上下左右効くけど、上下は見た目的には効いてない風に見えます …。 width ? 効きません。 height ? 効きません。 border ? 指定できます！ background ? 指定できます！
例外・・・同じインライン要素でもimgタグ、inputタグ、textareaタグの3つはブロックレベル要素と同じ指定をすることができます。 margin ? 上下左右ちゃんと効きます！ padding ? 上下左右ちゃんと効きます！ width ? もちろん効きます！ height ? こっちも効きます！
————————————————————————————————————————————————-
▲インライン要素をブロックレベル化▲
インライン要素やブロックレベル要素の代表的な特徴を見てきましたけど、display プロパティを使うと、その特徴がちょっと変化します。 display: block とか、display: inline とかいうやつです。
ブロックレベル化っていう言葉は適切じゃないかもしれないけど、便宜上 display: block の事を、ブロックレベル化って表現させてくださいね。 下の例は、もともとインライン要素の <a> タグを、ブロックレベル化して、いろんなスタイルを指定してみました。ただのリンクがボタンになっちゃいます。
●css.button{
display: block; font-size: 24px; font-family: “Tenderness”; text-transform: uppercase; border:1px solid #777; padding: .5em 2em .55em; color: #fff; cursor: pointer; text-shadow: 0 -1px 1px rgba(0, 0, 0, .4); background: #428ec9; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 1px 1px #fff; -webkit-box-shadow: 0 1px 1px #fff; box-shadow: 0 1px 1px #fff; background: -webkit-gradient( linear, left top, left bottom, from(#ffd1e8), to(#ff69b4)); background: -moz-linear-gradient( top, #ffd1e8, #ff69b4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffd1e8′, endColorstr=’#ff69b4′);
}
ブロックレベル化したリンク。インライン要素をブロックレベル化すると、margin や padding も思った通りに効くし、width や height も指定できるようになります。 まるでブロックレベル要素のように、インライン要素を扱えるようになるんです！
●これでブロックレベル要素のように扱えるようになる
display:block を指定したインライン要素は、以下のような特徴があります。ブロックレベル要素と同じみたいにレイアウトできるようになりますね！
margin ? 上下左右指定できます！padding ? 上下左右指定できます！width ? 指定できます！height ? 指定できます！
これらは、インライン要素で指定しても無効になってしまうものばかり。でも display:block でブロックレベル要素化すると、ちゃんと有効になります。
また、ブロックレベル要素のようになるということは、改行タグを使わなくても、勝手に改行（改行という表現が適切かどうかはちょっと疑問 …）というか、下にレイアウトされていくようになります。<br /> タグ書くのが面倒なところとかにはいいですよ w form の label とかでよくやってます！
●ブロックレベル化した<a>タグ
上記の例で、<a>タグをブロックレベル化したので、もうちょっと <a> タグについて補足的に。 <a> タグには、リンクという機能がついているので、デザインするときに、クリックしやすいリンクがいい！とよくいわれています。 クリックしやすいリンク … クリッカブルエリア（クリックできる領域）が広いほうがクリックしやすいですよね。
<a> タグのクリッカブルエリアを広げるのに、padding なども使われるんですけど、ブロックレベル化すると、クリッカブルエリアも広がります。 下の例では見出し（<h3> タグ）の中に、<a> タグが入っているパターンです。
クリッカブルエリアを広げて、さらにテキストに border を指定したいなら、インライン要素<span>を内包してスタイルを指定すればOKです！display: block によって、テキスト以外の部分、余白の部分（テキスト以外）もクリックできるようになります。
——————————————————————————————————————————————————–
▲ブロックレベル要素をインライン化▲
今度はさっきと逆のパターン、ブロックレベル要素をインライン化したときに、どういう風になるかを確認です。 下の例では、ブロックレベル要素 <li> タグを、display: inline でインライン化してみました。
ブロックレベル化をインライン化すると、横に並びます。これはインライン要素の特徴ですね！でも逆にブロックレベル要素の特徴である、margin、padding、width、height を自由に指定できるというメリットは、失う事になります。
margin ? 左右は効くけど、上下は効きません。padding ? 一応上下左右効くけど、上下は見た目的には効いてない風に見えます …。width ? 効きません。height ? 効きません。width、height は指定しても無効になってしまいます。そして margin や padding は横には効くけど、上下にはききません …。これはインライン要素の特徴ですね。
●display: inline で並べると隙間ができる
ブロックレベル要素をインライン化して横に並べた場合、XHTMLの書き方によって、隙間が生まれます。下は普通に XHTML を書いて、display: inline とした例です。リストの間に、小さな隙間ができちゃってますよね。
これは XHTML を書くとき、改行して書いてるからです。
●インライン化したブロックレベル要素の誤解
上記のように、ブロックレベル要素をインライン化すると、簡単に横に並んでくれます。 でも、私も昔誤解していたんですけど、display: inline は、ブロックレベル要素そのものをインライン化する訳ではありません。
Attentionコメントでご指摘していただきました！display: inline は、ブロックレベル要素そのものをインライン化するが正しいです。ちょっと言葉だと難しいのですが、akude さんがコメント欄で詳しく解説してくださってます！display: inline は、ブロックレベル要素をひとつ以上のインラインボックスにするんです。分かりにくいですね …。例えば、さっきの<li> タグの中に、改行である <br /> タグを入れるとどうなるかというと（Ho<br />me みたいに）…。