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

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

    はじめに

    本記事について

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

    当サイトで公開している「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. リストテキスト1
    2. リストテキスト2
    3. リストテキスト3
    4. リストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキストリストテキスト
    クラス名
    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. 注釈テキスト1
    2. 注釈テキスト2
    3. 注釈テキスト3
    4. 注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト注釈テキスト
    クラス名
    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-leftlink-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-leftlink-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カラム
    • カラム全体をリンクにする場合は、親要素ullink-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カラム
    • カラム全体をリンクにする場合は、親要素ullink-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カラム
    • カラム全体をリンクにする場合は、親要素ullink-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カラム
    • カラム全体をリンクにする場合は、親要素ullink-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 記事を作成