inline要素とblock要素

CSSとは、同名のHTML開始タグと終了タグで囲われた部分を要素とみなし、その要素に対するレンダリング（表示方法）を指示するものです。

<div>タイトル<span>作成講座</span></div>

この例では、<div> の要素は「タイトル<span>作成講座</span>」であり、<span>の要素は「作成講座」です。このような構造が無数に入れ子状になったものがHTML、このHTMLの表示方法を指示するものがCSSとなります。*1

このような要素には大きく分けて２つの種類があります。

*1 : 昔はCSSはなく、直接HTMLを使ってデザインすることが多かったのですが、文章の意味とデザインを分離するという立場からCSSが広く使われるようになると、HTMLから徐々にデザインの要素が排除されていきました。（新しいHTMLの仕様ではデザインに関するタグや属性は非推奨や使用禁止になっています。）

inline要素とblock要素

インライン要素とは文章の一部を太字に修飾するといった、ある文章中での装飾などに使われる要素です。代表選手は<span>タグになります。

ブロック要素とは<p>タグで囲まれた段落や記事のかたまり、adiaryで言えば１つの記事、１つのサイドバー要素などはすべてブロック要素です。代表選手は<div>タグになります。この２つを区別することはCSSでデザインを行う上で大変重要です。

例を示します。次のようなHTMLを書いてみます。*2

<div class="box1">タイトルはブロック要素にします</div>
<span class="box1">インライン要素は</span>
<span class="box1">このように横に連結されます。</span>
<span class="box1">しかし</span>
<div class="box1">ブロック要素は横に連結せず行を独占します</div>
何もタグがついていない部分もインライン要素です。

外枠線を付けるため、今box1というクラスを指定しました*3。

タイトルはブロック要素にします
インライン要素は このように横に連結されます。 しかし
ブロック要素は横に連結せず行を独占します
何もタグがついていない部分もインライン要素です。

*2 : adiaryの編集画面で単純に入力する場合は、パーサーが働くので改行されてしまいます。

*3 : このクラスは、ユーザースタイルシートで指定したものですので、他の記事にコピーしても枠線はでません。

CSSによる指定

CSSによって特定のクラスのインライン/ブロックを変更することができます。例えば通常のリスト

<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>

を表示すると

  • リスト１
  • リスト２
  • リスト３

となりますが、CSSでliをインライン要素にしてしまうと表示ががらりと変わります。

<ul class="inline">
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>
（CSS）
ul.inline li { display: inline; }

表示例

  • リスト１
  • リスト２
  • リスト３

このようにCSSを使うことで、リストをインラインに変えるなんてこともできてしまいます。