リストデザイン – サンプル集

https://www.rural-web.com/coding/2585

2019/10/23

はじめに

本記事について

本記事は、【リストを実装するためのサンプル】をまとめた記事になります。
利用できる方は、お好きに活用してください。

当サイトで公開している「ruralweb.css（準備中）」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

検証ブラウザ・OS

サンプル内容につきましては、最新ブラウザ・OS（IE/Chrome/Safari/FireFox/iOS/Android）で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

注意事項

自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたらTwitterよりご連絡ください。

コードサンプル

ベーシックタイプ

基本型【ul,ol】

[ul class=”rw-list-basic”]

リストテキスト1
リストテキスト2
リストテキスト3
リストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキスト

[ol class=”rw-list-basic”]

リストテキスト1
リストテキスト2
リストテキスト3
リストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキスト

クラス名

rw-list-basic

説明

ulなら「・」が付与。olなら「番号」が付与される
レスポンシブ対応してる（つもり）

コードを表示

[ul class=”rw-list-basic”]

<ul class="rw-list-basic">
	<li>リストテキスト1</li>
	<li>リストテキスト2</li>
	<li>リストテキスト3</li>
	<li>リストテキストリストテキストリストテキスト（省略）</li>
</ul>

ul.rw-list-basic {
	list-style-type: none;
    margin: 30px 0 0;
}
ul.rw-list-basic > li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 17px;
}
ul.rw-list-basic > li::before {
	content: "\30FB";
    position: absolute;
    left: 0;
}
ul.rw-list-basic > li:last-child {
	margin-bottom:0;
}

[ol class=”rw-list-basic”]

<ol class="rw-list-basic">
	<li>リストテキスト1</li>
	<li>リストテキスト2</li>
	<li>リストテキスト3</li>
	<li>リストテキストリストテキストリストテキスト（省略）</li>
</ol>

ol.rw-list-basic {
	counter-reset: list;
	list-style-type: none;
    margin: 30px 0 0;
}
ol.rw-list-basic > li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 27px;
}
ol.rw-list-basic > li::before {
    counter-increment: list;
    content: counter(list)".";
    position: absolute;
    left: 0;
    text-align: center;
    width: 27px;
}
ol.rw-list-basic > li:last-child {
	margin-bottom:0;
}

最終更新：2019.10.23

注釈型【ul,ol】

[ul class=”rw-anno”]

注釈テキスト1
注釈テキスト2
注釈テキスト3
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト

[ol class=”rw-anno”]

注釈テキスト1
注釈テキスト2
注釈テキスト3
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト

クラス名

rw-anno

説明

ulなら「※」が付与。olなら「※＋番号」が付与される
レスポンシブ対応してる（つもり）

コードを表示

[ul class=”rw-anno”]

<ul class="rw-anno">
	<li>注釈テキスト1</li>
	<li>注釈テキスト2</li>
	<li>注釈テキスト3</li>
	<li>リストテキストリストテキストリストテキスト（省略）</li>
</ul>

ul.rw-anno {
	list-style-type: none;
    margin: 30px 0 0;
}
ul.rw-anno > li {
    position: relative;
    font-size:13px;
    margin-bottom: 10px;
    padding-left: 17px;
}
ul.rw-anno > li::before {
	content: "\203b";
    position: absolute;
    left: 0;
}
ul.rw-anno > li:last-child {
	margin-bottom:0;
}

[ol class=”rw-anno”]

<ol class="rw-anno">
	<li>注釈テキスト1</li>
	<li>注釈テキスト2</li>
	<li>注釈テキスト3</li>
	<li>リストテキストリストテキストリストテキスト（省略）</li>
</ol>

ol.rw-anno {
	counter-reset: list;
	list-style-type: none;
    margin: 30px 0 0;
}
ol.rw-anno > li {
	position: relative;
    margin-bottom: 10px;
    padding-left: 26px;
    font-size: 13px;
}
ol.rw-anno > li::before {
	counter-increment: list;
    content: "\203b"counter(list);
    position: absolute;
    left: 0;
    text-align: left;
    width: 26px;
}
ol.rw-anno > li:last-child {
	margin-bottom:0;
}

最終更新：2019.10.23

リストボックス

全幅

注釈テキスト
注釈テキスト
注釈テキスト

クラス名

rw-list-box

説明

全幅ボックス、枠線付き、ボックスごとに隙間あり
レスポンシブ対応

コードを表示

<ul class="rw-list-box">
	<li>注釈テキスト</li>
	<li>注釈テキスト</li>
	<li>注釈テキスト</li>
</ul>

ul.rw-list-box {
    margin-top:30px;
	list-style-type:none;
}
ul.rw-list-box > li {
	position:relative;
	width:100%;
	border:1px solid #ddd;
	margin-bottom:15px;
	padding:10px 15px;
}
ul.rw-list-box > li:last-child {
	margin-bottom:0;
}

最終更新：2019.10.23

2カラム

注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト

クラス名

rw-list-box-col6

説明

2カラム、枠線付き、ボックスごとに隙間あり
レスポンシブ対応
SP～767pxから1カラム

コードを表示

<ul class="rw-list-box-col6">
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
</ul>

ul.rw-list-box-col6 > li {
	position:relative;
	width:calc(98% / 2);
	border:1px solid #ddd;
	margin-right:2%;
	margin-bottom:15px;
	padding:10px 15px;
}
ul.rw-list-box-col6 > li:nth-child(2n) {
	margin-right:0;
}
ul.rw-list-box-col6 > li > a {
    position: relative;
    width:100%;
    height:100%;
    display: block;
    padding: 10px 15px;
    overflow: hidden;
}
ul.link-box > li {
    padding: 0;
}
/* media query */
@media screen and (max-width: 767px){
ul.rw-list-box-col6 {
	display:block;
}
ul.rw-list-box-col6 > li {
	width:100%;
	margin-right:0;
}
}/* query end */

最終更新：2019.10.23

3カラム

注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト

クラス名

rw-list-box-col4

説明

3カラム、枠線付き、ボックスごとに隙間あり
レスポンシブ対応
SP～767pxから1カラム

コードを表示

<ul class="rw-list-box-col4">
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
</ul>

ul.rw-list-box-col4 > li {
	position:relative;
	width:calc(96% / 3);
	border:1px solid #ddd;
	margin-right:2%;
	margin-bottom:15px;
	padding:10px 15px;
}
ul.rw-list-box-col4 > li:nth-child(3n) {
	margin-right:0;
}
ul.rw-list-box-col4 > li > a {
    position: relative;
    width:100%;
    height:100%;
    display: block;
    padding: 10px 15px;
    overflow: hidden;
}
ul.link-box > li {
    padding: 0;
}
/* media query */
@media screen and (max-width: 767px){
ul.rw-list-box-col4 {
	display:block;
}
ul.rw-list-box-col4 > li {
	width:100%;
	margin-right:0;
}
}/* query end */

最終更新：2019.10.23

4カラム

注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
注釈テキスト
注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト

クラス名

rw-list-box-col3

説明

4カラム、枠線付き、ボックスごとに隙間あり
レスポンシブ対応
SP～767pxから1カラム

コードを表示

<ul class="rw-list-box-col3">
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
	<li>注釈テキスト</li>
	<li>注釈テキスト注釈テキスト注釈テキスト注釈テキスト（省略）</li>
</ul>

ul.rw-list-box-col3 > li {
	position:relative;
	width:calc(94% / 4);
	border:1px solid #ddd;
	margin-right:2%;
	margin-bottom:15px;
	padding:10px 15px;
}
ul.rw-list-box-col3 > li:nth-child(4n) {
	margin-right:0;
}
ul.rw-list-box-col3 > li > a {
    position: relative;
    width:100%;
    height:100%;
    display: block;
    padding: 10px 15px;
    overflow: hidden;
}
ul.link-box > li {
    padding: 0;
}
/* media query */
@media screen and (max-width: 767px){
ul.rw-list-box-col3 {
	display:block;
}
ul.rw-list-box-col3 > li {
	width:100%;
	margin-right:0;
}
}/* query end */

最終更新：2019.10.23

画像＋リスト

左画像＋回り込み

部分リンク版

サンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

全体リンク版

クラス名

rw-img-left

説明

左に画像をfloat、テキスト回り込型
レスポンシブ対応
初期設定は、画像サイズ80px
SP～767pxから1カラム
カラム全体をリンクにする場合は、rw-img-leftにlink-boxも合わせて付与すること
親要素ulに対して、rw-list-boxrw-list-box-col3rw-list-box-col4rw-list-box-col6何れかを付与すること

コードを表示

部分リンク版

<ul class="rw-list-box-col6">
	<li class="rw-img-left">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキスト</p>
	</li>
	<li class="rw-img-left">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキストサンプルテキスト（省略）</p>
	</li>
</ul>

全体リンク版

<ul class="rw-list-box-col6 link-box">
	<li class="rw-img-left">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキスト</p>
		</a>
	</li>
	<li class="rw-img-left">
		<a href="">
			<div class="rw-img-trim"><img src="img/image2.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキストサンプルテキストサンプルテキスト（省略）</p>
		</a>
	</li>
</ul>

共通CSS

.rw-img-left .rw-img-trim {
    float: left;
    width: 80px;
    margin-right: 15px;
}
.rw-img-left .rw-img-trim::before,
.rw-img-left .rw-img-trim::after {
	display:table;
	content:" ";
	clear:both;
}
.rw-img-left {
	overflow:hidden;
}
.rw-img-left a img {
	transition: opacity .2s;
}
.rw-img-left a img:hover {
	opacity:.75;
}

最終更新：2019.10.23

右画像＋回り込み

部分リンク版

サンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

全体リンク版

クラス名

rw-img-right

説明

右に画像をfloat、テキスト回り込型
レスポンシブ対応
初期設定は、画像サイズ80px
SP～767pxから1カラム
カラム全体をリンクにする場合は、rw-img-leftにlink-boxも合わせて付与すること
親要素ulに対して、rw-list-boxrw-list-box-col3rw-list-box-col4rw-list-box-col6何れかを付与すること

コードを表示

部分リンク版

<ul class="rw-list-box-col6">
	<li class="rw-img-right">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキスト</p>
	</li>
	<li class="rw-img-right">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキストサンプルテキスト（省略）</p>
	</li>
</ul>

全体リンク版

<ul class="rw-list-box-col6 link-box">
	<li class="rw-img-right">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキスト</p>
		</a>
	</li>
	<li class="rw-img-right">
		<a href="">
			<div class="rw-img-trim"><img src="img/image2.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキストサンプルテキストサンプルテキスト（省略）</p>
		</a>
	</li>
</ul>

共通CSS

.rw-img-right {
	overflow:hidden;
}
.rw-img-right .rw-img-trim {
    float: right;
    width: 80px;
    margin-left: 15px;
}
.rw-img-right .rw-img-trim::before,
.rw-img-right .rw-img-trim::after {
	display:table;
	content:" ";
	clear:both;
}
.rw-img-right a img {
	transition: opacity .2s;
}
.rw-img-right a img:hover {
	opacity:.75;
}

最終更新：2019.10.23

画像：上全体

部分リンク版

サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

全体リンク版

クラス名

rw-img-over-top

説明

上に大画像、下にテキスト
レスポンシブ対応
初期設定は、画像の高さ200px
SP～767pxから1カラム
カラム全体をリンクにする場合は、親要素ulにlink-boxも合わせて付与すること
親要素ulに対して、rw-list-boxrw-list-box-col3rw-list-box-col4rw-list-box-col6何れかを付与すること

コードを表示

部分リンク版

<ul class="rw-list-box-col4">
	<li class="rw-img-over-top">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキスト</p>
	</li>
	<li class="rw-img-over-top">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキスト（省略）</p>
	</li>
	<li class="rw-img-over-top">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキスト（省略）</p>
	</li>
</ul>

全体リンク版

<ul class="rw-list-box-col4 link-box">
	<li class="rw-img-over-top">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキスト</p>
		</a>
	</li>
	<li class="rw-img-over-top">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキストサンプルテキスト（省略）</p>
		</a>
	</li>
	<li class="rw-img-over-top">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキストサンプルテキスト（省略）</p>
		</a>
	</li>
</ul>

共通CSS

.rw-img-over-top {
    position: relative;
    overflow: hidden;
}
.rw-img-over-top .rw-img-trim {
    max-width: none;
    margin: -10px -15px 10px;
    height: 200px;
}
.rw-img-over-top .rw-img-trim::before {
	padding-top:0;
}
.rw-img-over-top a img {
    width: 130%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.rw-img-over-top a img {
	transition: opacity .2s;
}
.rw-img-over-top a img:hover {
	opacity:.75;
}

最終更新：2019.10.23

画像：下全体

部分リンク版

サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

全体リンク版

クラス名

rw-img-over-bottom

説明

下に大画像、上にテキスト
レスポンシブ対応
初期設定は、画像の高さ150px。左右の高さを揃えるためにpadding-bottomで制御
SP～767pxから1カラム
カラム全体をリンクにする場合は、親要素ulにlink-boxも合わせて付与すること
親要素ulに対して、rw-list-boxrw-list-box-col3rw-list-box-col4rw-list-box-col6何れかを付与すること

コードを表示

部分リンク版

<ul class="rw-list-box-col4">
	<li class="rw-img-over-bottom">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキスト</p>
	</li>
	<li class="rw-img-over-bottom">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキスト（省略）</p>
	</li>
	<li class="rw-img-over-bottom">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキスト（省略）</p>
	</li>
</ul>

全体リンク版

<ul class="rw-list-box-col4 link-box">
	<li class="rw-img-over-bottom">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキスト</p>
		</a>
	</li>
	<li class="rw-img-over-bottom">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキストサンプルテキスト（省略）</p>
		</a>
	</li>
	<li class="rw-img-over-bottom">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキストサンプルテキスト（省略）</p>
		</a>
	</li>
</ul>

共通CSS

ul.link-box > li.rw-img-over-bottom > a{
	padding-bottom: 150px;
}
ul.rw-list-box-col3 > li.rw-img-over-bottom,
ul.rw-list-box-col4 > li.rw-img-over-bottom,
ul.rw-list-box-col6 > li.rw-img-over-bottom {
	padding-bottom:150px;
}
ul.link-box > li.rw-img-over-bottom {
	padding-bottom:0;
}

.rw-img-over-bottom {
    position: relative;
    overflow: hidden;
}
.rw-img-over-bottom .rw-img-trim {
    max-width: none;
    margin: 0;
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.link-box .rw-img-over-bottom > a > *:first-child,
.rw-img-over-bottom > *:first-child {
	width: 100%;
    padding-bottom: 10px;
}
.rw-img-over-bottom .rw-img-trim::before {
	padding-top:0;
}
.rw-img-over-bottom a img {
    width: 130%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.rw-img-over-bottom a img {
	transition: opacity .2s;
}
.rw-img-over-bottom a img:hover {
	opacity:.75;
}

最終更新：2019.10.23

画像：左全体

部分リンク版

サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

全体リンク版

クラス名

rw-img-over-left

説明

左に大画像、右にテキスト
レスポンシブ対応
初期設定は、画像の幅70px
SP～767pxから1カラム
カラム全体をリンクにする場合は、親要素ulにlink-boxも合わせて付与すること
親要素ulに対して、rw-list-boxrw-list-box-col3rw-list-box-col4rw-list-box-col6何れかを付与すること

コードを表示

部分リンク版

<ul class="rw-list-box-col6">
	<li class="rw-img-over-left">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキスト</p>
	</li>
	<li class="rw-img-over-left">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキスト（省略）</p>
	</li>
</ul>

全体リンク版

<ul class="rw-list-box-col6 link-box">
	<li class="rw-img-over-left">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキスト</p>
		</a>
	</li>
	<li class="rw-img-over-left">
		<a href="">
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
			<p>サンプルテキストサンプルテキスト（省略）</p>
		</a>
	</li>
</ul>

共通CSS

ul.rw-list-box-col3 > li.rw-img-over-left,
ul.rw-list-box-col4 > li.rw-img-over-left,
ul.rw-list-box-col6 > li.rw-img-over-left,
ul.rw-list-box-col3.link-box > li.rw-img-over-left > a,
ul.rw-list-box-col4.link-box > li.rw-img-over-left > a,
ul.rw-list-box-col6.link-box > li.rw-img-over-left > a{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.rw-img-over-left > *:first-child,
.link-box .rw-img-over-left > a > *:first-child {
	flex-basis:70px;
}
.rw-img-over-left > *:last-child,
.link-box .rw-img-over-left > a > *:last-child {
	flex-basis:auto;
	flex:1;
}
.rw-img-over-left .rw-img-trim{
    position: relative;
    margin: -10px 15px -10px -15px;
    overflow: hidden;
}
.rw-img-over-left .rw-img-trim::before {
	padding-top:0;
}
.rw-img-over-left img {
    display: block;
    position: absolute;
	width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.rw-img-over-left a img {
	transition: opacity .2s;
}
.rw-img-over-left a img:hover {
	opacity:.75;
}

最終更新：2019.10.23

画像：右全体

部分リンク版

サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

全体リンク版

クラス名

rw-img-over-right

説明

右に大画像、左にテキスト
レスポンシブ対応
初期設定は、画像の幅70px
SP～767pxから1カラム
カラム全体をリンクにする場合は、親要素ulにlink-boxも合わせて付与すること
親要素ulに対して、rw-list-boxrw-list-box-col3rw-list-box-col4rw-list-box-col6何れかを付与すること

コードを表示

部分リンク版

<ul class="rw-list-box-col6">
	<li class="rw-img-over-right">
		<p>サンプルテキスト</p>
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
	</li>
	<li class="rw-img-over-right">
		<p>サンプルテキストサンプルテキスト（省略）</p>
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
	</li>
</ul>

全体リンク版

<ul class="rw-list-box-col6 link-box">
	<li class="rw-img-over-right">
		<a href="">
			<p>サンプルテキスト</p>
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		</a>
	</li>
	<li class="rw-img-over-right">
		<a href="">
			<p>サンプルテキストサンプルテキスト（省略）</p>
			<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		</a>
	</li>
</ul>

共通CSS

ul.rw-list-box-col3 > li.rw-img-over-right,
ul.rw-list-box-col4 > li.rw-img-over-right,
ul.rw-list-box-col6 > li.rw-img-over-right,
ul.rw-list-box-col3.link-box > li.rw-img-over-right > a,
ul.rw-list-box-col4.link-box > li.rw-img-over-right > a,
ul.rw-list-box-col6.link-box > li.rw-img-over-right > a {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.rw-img-over-right > *:last-child,
.link-box .rw-img-over-right > a > *:last-child {
	flex-basis:70px;
}
.rw-img-over-right > *:first-child,
.link-box .rw-img-over-right > a > *:first-child {
	flex-basis:auto;
	flex:1;
}
.rw-img-over-right .rw-img-trim {
    position: relative;
    margin:-10px -15px -10px 15px;
    overflow: hidden;
}
.rw-img-over-right .rw-img-trim::before {
	padding-top:0;
}
.rw-img-over-right img {
    display: block;
    position: absolute;
	width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.rw-img-over-right a img {
	transition: opacity .2s;
}
.rw-img-over-right a img:hover {
	opacity:.75;
}

最終更新：2019.10.23

オプション

枠を丸くする

サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

クラス名

rw-radius

説明

カラムをつくる親要素（サンプルだとul）に対して、rw-radiusを付与すると角丸に変更される

コードを表示

<ul class="rw-list-box-col6 rw-radius">
	<li class="rw-img-left">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキスト</p>
	</li>
	<li class="rw-img-left">
		<div class="rw-img-trim"><img src="img/image.jpg" alt="サンプル画像" /></div>
		<p>サンプルテキストサンプルテキスト（省略）</p>
	</li>
</ul>

.rw-radius > li{
	border-radius:10px;
	overflow:hidden;
}
.rw-set.rw-radius {
	border-radius:10px;
}
.rw-set.rw-radius > li{
	border-radius:0;
}

最終更新：2019.10.23

カラムの上下隙間をなくす

全幅【rw-list-box】はPC/SP対応

サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキスト

カラム【rw-list-box-col*】はSPのみ対応

サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト
サンプルテキスト
サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト

クラス名

rw-set

説明

親要素rw-list-boxrw-list-box-col*に合わせてrw-setを付与することで上下の隙間をなくす
分割タイプのカラムを選択している場合は、SP～767pxのみ上下隙間をなくす（1カラム時にしか反応しない）

コードを表示

<ul class="rw-list-box rw-set">
	<li>サンプルテキスト</li>
	<li>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</li>
	<li>サンプルテキスト</li>
</ul>

ul.rw-list-box.rw-set {
	border:1px solid #ddd;
}
ul.rw-list-box.rw-set > li {
	margin-bottom:0;
	border:0;
	border-bottom:1px solid #ddd;
}
ul.rw-list-box.rw-set > li:last-child {
	border-bottom:0;
}

/* media query */
@media screen and (max-width: 767px){
ul.rw-list-box-col6.rw-set,
ul.rw-list-box-col3.rw-set,
ul.rw-list-box-col4.rw-set {
	border:1px solid #ddd;
}

ul.rw-list-box-col6.rw-set > li,
ul.rw-list-box-col3.rw-set > li,
ul.rw-list-box-col4.rw-set > li {
	margin-bottom:0;
	border:0;
	border-bottom:1px solid #ddd;
}
ul.rw-list-box-col6.rw-set > li:last-child,
ul.rw-list-box-col3.rw-set > li:last-child,
ul.rw-list-box-col4.rw-set > li:last-child {
	border-bottom:0;
}
}/* query end */

最終更新：2019.10.23

更新履歴

更新日時	更新内容
2019.10.23	記事を作成