instagram 風に 画像を並べるcss

4450 ワード
Instagram CSS CSS テキストリンク

instagram風にきれいに整列して画像を並べたい。

コピペでうごく。

参考
https://pecopla.net/web-column/flexbox-1
https://saruwakakun.com/html-css/reference/image-text

まずはCSS


<style>
    .insta {
        display: flex;
        display: -webkit-flex;
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }
    .insta > div {
        position: relative;
        width: 31%;
        height: auto;
        margin: 1%;
        overflow: hidden;
    }
    .insta > div:before {
        content: "";
        display: block;
        padding-top: 100%;
    }
    .insta > div > a {
        position: absolute;
        display: block;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
    }
    .insta > div > a img{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: auto;
        height: 100%;
    }



    .insta > div > a > span {/*classがfaのアイコンに対して*/
        position: absolute;
        top: 10%;
        right: -5%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        margin:0;/*余計な隙間を除く*/
        padding:0;/*余計な隙間を除く*/
        font-size: 12px;/*サイズ*/
        color: rgba(255, 255, 255, 0.6);/*半透明*/
    }


    .insta > div > a > span i:nth-child(2) {
        opacity: 0.55;
        color: red;
    }

</style>

メイン


<div class="insta">
    <div>
        <a>
            <img src="https://placehold.jp/150x150.png" class="img-circle">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-times fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>

    <div>
        <a>
            <img src="https://placehold.jp/150x150.png" class="img-circle">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-times fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>

    <div>
        <a>
            <img src="https://placehold.jp/150x150.png" class="img-circle">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-times fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>

    <div>
        <a>
            <img src="https://placehold.jp/150x150.png" class="img-circle">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-times fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>

    <div>
        <a>
            <img src="https://placehold.jp/150x150.png" class="img-circle">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-times fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>

    <div>
        <a>
            <img src="https://placehold.jp/150x150.png" class="img-circle">
            <span class="fa-stack fa-lg">
              <i class="fa fa-circle fa-stack-2x"></i>
              <i class="fa fa-times fa-stack-1x fa-inverse"></i>
            </span>
        </a>
    </div>

</div>