今回でトップページに必要な要素は，ほぼ全て仕上がります。1冊の情報につき1つのdiv要素で囲まれた「リブリートの新刊」部分をCSSで横並びにし，バナー表示部分を必要に応じて更新しやすいウィジェットにし，検索用タグクラウドを作成します。
div要素をCSSで横並びにする
ほげ山くん：今日は，トップページの「リブリートの新刊」部分を，CSSを使って横並びにするんですよね…？
くれま先輩：うん。図1の赤枠で囲まれた部分ね。
図1 トップページの「リブリートの新刊」部分。1冊の情報につき1つのdiv要素で囲まれ，横並びになっている
ほげ山くん：僕，こういうブロックレベル要素の横並びについて，すごく疑問があったんです。float:leftを使ってdiv要素を横並びにしていくと，高さの違う要素があったときに次の行が引っかかってしまって，レイアウトが崩れることがあるんですよね。
図2 高さの違う要素の部分で引っかかって，レイアウトが崩れる
くれま先輩：そうそう！だからこんな風に一行ごとにdiv要素を追加して，包むようにして対処したりしたよね。
図3 レイアウトを崩さないように，div要素を追加
ほげ山くん：ですよね。今回も，これをやるんですか？
くれま先輩：まぁ，やってもいいんだけど，この間ヨモツネットの小山田さんの講演を伺って，CSSでこの問題を解決する方法を知ったから，そっちを使ってみない？
ほげ山くん：へぇ，そんなのがあるんですか？
くれま先輩：詳しくは以下のリンク先を読んでほしいんだけれど，div要素にfloat:leftを指定するのではなく，display:inline-blockを指定することによって，横並びにする方法なの。
- 【参考URL】
- ヨモツネット：書籍などに紹介されていない display : inline-block について
http://yomotsu.net/works/081016cssnite/
ほげ山くん：display:inline-blockですかぁ！僕，使ったことが無かったですよ！
くれま先輩：私も小山田さんのお話を伺うまで使ったことがなかったんだけれど，この間別の案件で早速使わせていただいたら，いい感じだったよ！というわけで，CSS内での必要な記述については，上記の小山田さんのドキュメントを見ていただくこととして…。実はこの方法を使うには，前回書いた「リブリートの新刊」部分に追加しなければならない要素があるので，そこだけ説明をするね。
ほげ山くん：前回書いたのって，これですよね。
前回，div id="primary"の中に記述した「リブリートの新刊」部分のコード
<div id="newBooks">
<h2>リブリートの新刊</h2>
<mt:Entries category="国内作家の絵本 OR 海外作家の絵本 OR 赤ちゃん向け絵本" lastn="6">
<div class="newBooksDetail">
<h3><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h3>
<dl>
<dt>著者名</dt>
<dd><mt:author_name /></dd>
<dt>発売日</dt>
<dd><mt:release_date /></dd>
<dt>対象年齢</dt>
<dd><mt:readers_age /></dd>
<dt>版型</dt>
<dd><mt:book_size /></dd>
<dt>説明</dt>
<dd><mt:EntryBody words="50" /></dd>
</dl>
<p><mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></a></mt:coverAsset></p>
</div>
</mt:Entries>
</div>
くれま先輩：それだね。で，今回書き直したのは，次の通りだよ。強調した部分を，追加したの。
<div id="newBooks">
<h2>リブリートの新刊</h2>
<!--<mt:Entries category="国内作家の絵本 OR 海外作家の絵本 OR 赤ちゃん向け絵本" lastn="6">
--><div class="newBooksDetail"><div>
<h3><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h3><dl>
<dt>著者名</dt>
<dd><mt:author_name /></dd>
<dt>発売日</dt>
<dd><mt:release_date /></dd>
<dt>対象年齢</dt>
<dd><mt:readers_age /></dd>
<dt>版型</dt>
<dd><mt:book_size /></dd>
<dt>説明</dt>
<dd><mt:EntryBody words="50" /></dd>
</dl>
<p><mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></a></mt:coverAsset></p>
</div></div><!--</mt:Entries>
-->
</div>
ほげ山くん：コメントタグがちらほら入りましたね…。あと，新しいdiv要素が追加されたんですか？これを入れると，横並びになるんですか？
くれま先輩：詳しくは上記でご紹介した小山田さんのドキュメントを読んでほしいんだけど，現状普及している色々なブラウザに対応させるために必要な要素なのよ。
ほげ山くん：ふーん，なるほど。では，これからドキュメントを拝見してみます！
くれま先輩：これを再構築してCSS側に必要な記述を追加すると，一冊一冊のdiv要素が横並びになるよ。最終回でできあがったサイトをサンプルとして公開するので，見た目はそこで確認してみてくださいね！
