【HTML＆CSS】ランキングやバナーのリストに使える！コピペするだけ！

リストのhtml、cssのサンプルソースです。
コピペするだけで利用可能です。

スポンサーリンク

こんな感じになります：画像（左）＆テキスト（右）

html & css

サイドバーで「バナー」や「ランキング」などで利用しやすいレイアウトかなと思います。

レスポンシブ対応していて、スマホ時はそのまま縮小されていきます。それでは、下記がhtml、cssのソースです。

html

<div class="list-img-text-cover">
    <ul class="list-img-text">
        <li><a class="rollover" href="./">
            <span class="list-img-text-img"><img src="https://lucklog.info/sample/img/logo-430.png" alt=""></span>
            <span class="list-img-text-info">
                <span class="list-img-text-title">画像とテキストのリスト</span>
                <span class="list-img-text-text">左側が画像になっています。右側はタイトルとテキストとなっています。</span>
            </span>
        </a></li>
        <li><a class="rollover" href="./">
            <span class="list-img-text-img"><img src="https://lucklog.info/sample/img/logo-430.png" alt=""></span>
            <span class="list-img-text-info">
                <span class="list-img-text-title">画像とテキストのリスト</span>
                <span class="list-img-text-text">左側が画像になっています。右側はタイトルとテキストとなっています。</span>
            </span>
        </a></li>
    </ul>
</div>

css

/*----------------------------------------------------
    list-img-text
----------------------------------------------------*/
.list-img-text-cover {
    margin: 0 auto;
    max-width: 500px;
    padding: 20px;
}

.list-img-text {
list-style: none;
}

.list-img-text li a {
    display: table-row;
}

.list-img-text a > span {
    border-bottom: 1px solid #333;
    display: table-cell;
    padding: 10px;
    vertical-align: middle;
}

/* img */
.list-img-text-img {
    padding-right: 20px;
    width: 20%;
}

/* info */
.list-img-text-info {
    width: 80%;
}

.list-img-text-title {
    display: block;
    font-weight: bold;
}

.list-img-text-text {
    display: block;
    line-height: 1.5;
}

 

まとめ

大したリストではありませんが、それなりには使えるかなと思います（笑）。気になった方は是非使ってみてください。

↓こちらもソースをコピーして使えますので、よければ見てみてくださいね。
参考：【コピペ用】htmlのhead内一式（METAタグ等）

それでは、最後までお読みいただきありがとうございました！

スポンサーリンク