inline要素とblock要素
CSSとは、同名のHTML開始タグと終了タグで囲われた部分を要素とみなし、その要素に対するレンダリング（表示方法）を指示するものです。
<div>タイトル<span>作成講座</span></div>
この例では、<div> の要素は「タイトル<span>作成講座</span>」であり、<span>の要素は「作成講座」です。このような構造が無数に入れ子状になったものがHTML、このHTMLの表示方法を指示するものがCSSとなります。*1
このような要素には大きく分けて２つの種類があります。
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。
タイトルはブロック要素にしますインライン要素は このように横に連結されます。 しかしブロック要素は横に連結せず行を独占します何もタグがついていない部分もインライン要素です。
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を使うことで、リストをインラインに変えるなんてこともできてしまいます。