【HTML＆CSS】コピペするだけでOK。リスト

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

実際に確認できるページはこちらから

サンプルページ
※各項目にもサンプルページへのリンクを書いています

No.01 画像（左）＆テキスト（右）

> 画像（左）＆テキスト（右）のサンプルページ
※サンプルページからもソースをコピペできます

サイドメニューのバナーやランキングなどで利用しやすいレイアウトです。

スマホ時はそのまま縮小されていくのみでレイアウトは変わりません。
このレイアウトであれば、問題ないかと思います。

html
※サンプルページはリストを5つ分用意していますが、こちらは1つに減らしています

<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>
    </ul>
</div>

css
※実際にはリセットCSS、基準cssも適応しています（サンプルページからはそちらもコピペできます）

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

.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;
}