画像(img) – 基本設定

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

    はじめに

    本記事について

    本記事は、【画像<img>】に関する表示方法についてまとめたものです。
    利用できる方は、お好きに活用してください。

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

    検証ブラウザ・OS

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

    注意事項

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

    コードサンプル

    基本設定

    .rw-img

    サンプル画像
    クラス名
    rw-img
    説明
    • 画像をレスポンシブ化
    • max-width:800pxに設定。幅に制限かけないならnoneに切り替える
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    </div>
    
    .rw-img {
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	max-width:800px;
    }
    .rw-img > img{
    	display:block;
    	width:100%;
    }
    
    最終更新:2019.10.17

    キャプション

    .rw-caption

    サンプル画像

    サンプルキャプション

    クラス名
    rw-caption
    説明
    • rw-imgの子要素にrw-captionを付与することで、キャプション(注釈)を設定
    • <figure>を利用するのであれば、<figcaption>にクラス付与
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    	<p class="rw-caption">サンプルキャプション</p>
    </div>
    
    .rw-caption {
    	margin:0;
    	padding:0;
    }
    
    最終更新:2019.10.17

    .rw-caption-in-top

    サンプル画像

    サンプルキャプション

    クラス名
    rw-caption-in-top
    説明
    • rw-imgの子要素にrw-caption-in-topを付与することで、キャプション(注釈)を画像内の上段に表示
    • <figure>を利用するのであれば、<figcaption>にクラス付与
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    	<p class="rw-caption-in-top">サンプルキャプション</p>
    </div>
    
    .rw-img {
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	max-width:800px;
    }
    .rw-img > img{
    	display:block;
    	width:100%;
    }
    .rw-caption-in-top {
    	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: left;
        font-size: initial;
        color: #fff;
        padding: 0 15px;
    }
    
    最終更新:2019.10.17

    .rw-caption-in-center

    サンプル画像

    サンプルキャプション

    クラス名
    rw-caption-in-center
    説明
    • rw-imgの子要素にrw-caption-in-centerを付与することで、キャプション(注釈)を画像内の中央に表示
    • <figure>を利用するのであれば、<figcaption>にクラス付与
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    	<p class="rw-caption-in-center">サンプルキャプション</p>
    </div>
    
    .rw-img {
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	max-width:800px;
    }
    .rw-img > img{
    	display:block;
    	width:100%;
    }
    .rw-caption-in-center {
    	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        text-align: left;
        font-size: initial;
        color: #fff;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    最終更新:2019.10.17

    .rw-caption-in-bottom

    サンプル画像

    サンプルキャプション

    クラス名
    rw-caption-in-bottom
    説明
    • rw-imgの子要素にrw-caption-in-bottomを付与することで、キャプション(注釈)を画像内の下段に表示
    • <figure>を利用するのであれば、<figcaption>にクラス付与
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    	<p class="rw-caption-in-bottom">サンプルキャプション</p>
    </div>
    
    .rw-img {
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	max-width:800px;
    }
    .rw-img > img{
    	display:block;
    	width:100%;
    }
    .rw-caption-in-bottom {
    	position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: left;
        font-size: initial;
        color: #fff;
        padding: 0 15px;
    }
    
    最終更新:2019.10.17

    .rw-caption-hover-top

    サンプル画像

    サンプルキャプション

    クラス名
    rw-caption-hover-top
    説明
    • rw-imgの子要素にrw-caption-hover-topを付与することで、画像にカーソルを合わせた時にキャプション(注釈)を画像内の上段に表示
    • <figure>を利用するのであれば、<figcaption>にクラス付与
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    	<p class="rw-caption-hover-top">サンプルキャプション</p>
    </div>
    
    .rw-img {
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	max-width:800px;
    }
    .rw-img > img{
    	display:block;
    	width:100%;
    }
    .rw-caption-hover-top {
    	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        text-align: left;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
        padding: 0 15px;
        opacity:0;
        transition:opacity .2s;
    }
    .rw-img:hover .rw-caption-hover-top {
    	opacity:1;
    }
    
    最終更新:2019.10.17

    .rw-caption-hover-bottom

    サンプル画像

    サンプルキャプション

    クラス名
    rw-caption-hover-bottom
    説明
    • rw-imgの子要素にrw-caption-hover-bottomを付与することで、画像にカーソルを合わせた時にキャプション(注釈)を画像内の下段に表示
    • <figure>を利用するのであれば、<figcaption>にクラス付与
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    	<p class="rw-caption-hover-bottom">サンプルキャプション</p>
    </div>
    
    .rw-img {
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	max-width:800px;
    }
    .rw-img > img{
    	display:block;
    	width:100%;
    }
    .rw-caption-hover-bottom {
    	position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        text-align: left;
        background-color: rgba(0,0,0,0.5);
        color: #fff;
        padding: 0 15px;
        opacity:0;
        transition:opacity .2s;
    }
    .rw-img:hover .rw-caption-hover-bottom{
    	opacity:1;
    }
    
    最終更新:2019.10.17

    .rw-caption-hover-all

    サンプル画像

    サンプルキャプション

    クラス名
    rw-caption-hover-all
    説明
    • rw-imgの子要素にrw-caption-hover-bottomを付与することで、画像にカーソルを合わせた時にキャプション(注釈)を画像内の全体中央に表示
    • <figure>を利用するのであれば、<figcaption>にクラス付与
    コードを表示
    <div class="rw-img">
    	<img src="img/image.jpg" alt="サンプル画像" />
    	<p class="rw-caption-hover-all">サンプルキャプション</p>
    </div>
    
    .rw-img {
    	position:relative;
    	margin:0 auto;
    	overflow:hidden;
    	max-width:800px;
    }
    .rw-img > img{
    	display:block;
    	width:100%;
    }
    .rw-caption-hover-all {
    	position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height:100%;
        background-color: rgba(0,0,0,0.35);
        color: #fff;
        padding: 15px;
        opacity:0;
        transition:opacity .2s;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    .rw-img:hover .rw-caption-hover-all{
    	opacity:1;
    }
    
    最終更新:2019.10.17

    画像加工系

    .rw-img-trim

    サンプル画像
    クラス名
    rw-img-trim
    説明
    • 画像をトリミング
    • 初期設定ではmax-width:400px。状況に合わせて数値変更
    • 正方形が前提だが、決め打ちするならrw-img-trimwidthheightに追加指定も可
    コードを表示
    <div class="rw-img-trim">
    	<img src="img/image.jpg" alt="サンプル画像" />
    </div>
    
    .rw-img-trim {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        max-width:400px;
    }
    .rw-img-trim::before {
        display: block;
        content: "";
        padding-top: 100%;
    }
    .rw-img-trim img {
        width: 150%;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    最終更新:2019.10.17

    .rw-img-circle

    サンプル画像
    クラス名
    rw-img-circle
    説明
    • 画像を丸くトリミング
    • 初期設定ではmax-width:400px。状況に合わせて数値変更
    • 画像の大きさを決め打ちするならrw-img-circlewidthheightに追加指定も可
    コードを表示
    <div class="rw-img-circle">
    	<img src="img/image.jpg" alt="サンプル画像" />
    </div>
    
    .rw-img-circle {
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        max-width: 400px;
        border-radius: 50%;
    }
    .rw-img-circle::before {
        display: block;
        content: "";
        padding-top: 100%;
    }
    .rw-img-circle img {
        width: 150%;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    
    最終更新:2019.10.17

    更新履歴

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