かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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

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

/* 横スクロールリストの要素 */
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