かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

横スクロールするリストみたいなもの

ほしかった。こんなスタイルシートを用意して

/* 横スクロールリストの要素 */
div.item {
    /* 程よい余白のため */
    margin: 0px 5px 0px 0px;
    padding: 5px;
    /* 程よいサイズ */
    width: 100px;
    height: 100px;
    /* 枠線 */
    border: 1px solid black;
    /* インラインブロックにして改行しないブロックに */
    display: inline-block;
}

/* 横スクロールリストのコンテナ */
div.container {
    white-space: nowrap;
    overflow-x: scroll;
}

こんなHTMLでOK

<div class="container">
    <div class="item">
        <span>テスト用データ</span>
    </div>
    <div class="item">
        <span>テスト用データ</span>
    </div>
    <div class="item">
        <span>テスト用データ</span>
    </div>
    <div class="item">
        <span>テスト用データ</span>
    </div>
    ...好きなだけ繰り返す...
</div>

とりあえずIE9Chromeで動いた。inline-blockは、古いブラウザだと動きが怪しいらしいので、使わないで済む方法があればいいけど・・・よくわからないorz