
リストのhtml、cssのサンプルソースです。
コピペするだけで利用可能です。
実際に確認できるページはこちらから
サンプルページ
※各項目にもサンプルページへのリンクを書いています
No.01 画像(左)&テキスト(右)
> 画像(左)&テキスト(右)のサンプルページ
※サンプルページからもソースをコピペできます
サイドメニューのバナーやランキングなどで利用しやすいレイアウトです。
スマホ時はそのまま縮小されていくのみでレイアウトは変わりません。
このレイアウトであれば、問題ないかと思います。
html
※サンプルページはリストを5つ分用意していますが、こちらは1つに減らしています
コピーする
※最新のChrome/Firefoxでは動作確認済
※IE11はクリップボードを許可した場合動作確認済
※うまくコピーできない場合は手動でコピーしてください
※最新のChrome/Firefoxでは動作確認済
※IE11はクリップボードを許可した場合動作確認済
※うまくコピーできない場合は手動でコピーしてください
<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も適応しています(サンプルページからはそちらもコピペできます)
コピーする
※最新のChrome/Firefoxでは動作確認済
※IE11はクリップボードを許可した場合動作確認済
※うまくコピーできない場合は手動でコピーしてください
※最新のChrome/Firefoxでは動作確認済
※IE11はクリップボードを許可した場合動作確認済
※うまくコピーできない場合は手動でコピーしてください
/*---------------------------------------------------- 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; }