夜の歌

プログラミング、音楽、本について緩く書いていきます。

CSSを少し 2014/06/15

CSS

Webサイトのメニューで、ホーム、お知らせ、問い合わせがよく使われる項目としてある。その各項目 の上に英語訳を小さい文字で表示したい場合、以下のように書く。

<!DOCUTYPE html>
<html>
<head>
   <style>
        #all {
            background: red;
            width: 900px;
            margin-left: auto;
            margin-right: auto;
        }
        #header li {
            float: left;
            background: #ffff00;
            width: 100px;
        }
        .test1 {
            font-size: 10px;
            display: block;
        }
        .test2 {
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="all">
    <div id="header">
        <h1>Top</h1>
        <ul>
            <li>
                <span class="test1">home</span>
                <span class="test2">ホーム</span>
            </li>
            <li>
                <span class="test1">notice</span>
                <span class="test2">お知らせ</span>
            </li>
            <li>
                <span class="test1">access</span>
                <span class="test2">アクセス</span>
            </li>
        </ul>
    </div>
    <!-- #header-->
</div>
<!-- #all-->
</body>
</html>

てな感じ。

もっと綺麗に買いいこう。