装飾する（main information部分）

main information部分を装飾する

headerとmainvisualの装飾が終わりました。今回はinformation部分の装飾を行います。

まず「information」「menu_link」を左右に並べて表示しましょう。

現状のHTMLは以下のようになっています。

HTML

<div id="information">
    <h2>News &amp;amp; Topics</h2>
    <ul>
        <li>2012/06/15 誠に勝手ながら7月1日～7月3までの間、休業日とさせて頂きます。</li>
        <li>2012/06/14 ドリンクメニューの改定を行いました。ワインの取り扱い銘柄を増やしました。是非ご利用ください。</li>
        <li>2012/06/13 WEBサイトをリニューアルオープンいたしました。Twitter始めました。</li>
    </ul>
</div>

<div id="menu_link">
    <h2>Menu</h2>
    <ul id="s_nav">
        <li><a href="#">Food</a></li>
        <li><a href="#">Drink</a></li>
        <li><a href="#">Sweets</a></li>
    </ul>
</div>

div#information と div#menu_linkをfloatプロパティを使って横並びにします。

CSS

#information {
    float: left;
    width: 480px;
}
#menu_link {
    float: right;
    width: 300px;
}
#footer {
    clear: both;
}

li要素に含まれるspan要素を調整する

informationの中身を整列した形式で表示したいため、ｌi要素内のテキストをspan要素を利用しながらスタイリングを行います。

HTML

<div id="information">
    <h2>News &amp;amp; Topics</h2>
    <ul>
        <li class="clearfix">
            <span class="info_date">2012/06/15</span>
            <span class="info_text">誠に勝手ながら7月1日～7月3までの間、休業日とさせて頂きます。</span>
        </li>
        <li class="clearfix">
            <span class="info_date">2012/06/14</span>
            <span class="info_text">ドリンクメニューの改定を行いました。ワインの取り扱い銘柄を増やしました。是非ご利用ください。</span>
        </li>
        <li class="clearfix">
            <span class="info_date">2012/06/13</span>
            <span class="info_text">WEBサイトをリニューアルオープンいたしました。Twitter始めました。</span>
        </li>
    </ul>
</div>

CSS

#information ul {
    margin: 0;
    padding: 0;
}
#information li {
    list-style: none;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 12px;
    margin-bottom:12px;
}

.info_date {
    display: block;
    float: left;
    width: 120px;
}
.info_text {
    display: block;
    float: left;
    width: 360px;
}

全体のフォントを調整する

左右に並べるレイアウト調整は完了しましたが、ブラウザで確認して見るとフォントサイズが大きく感じます。このHTMLドキュメントにおけるフォント関連の設定を行いましょう。body要素に CSSのfont関連プロパティを設定します。

CSS

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5
}

ちなみに、上記3つのプロパティはショートハンドプロパティ「font」により一行で記述することができます。

CSS

body{
    font: 14px/1.5 Arial, Helvetica, sans-serif;
}

→次のページ：装飾する（main menu_link部分）

←前のページ：メインビジュアルの設定