layout-medias

echo-medias

.echo-media をグリッド状に繰り返すための領域を作成する。 .echo-media.echo-media-fixed の使用が望ましい。
(breakpoint)が lg 以上で2列となる。

Internet Explorer 11で段組にならない不具合について

よくあるブログ記事の概要表示です

これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…

よくあるブログ記事の概要表示です

これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…

よくあるブログ記事の概要表示です

これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…

よくあるブログ記事の概要表示です

これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…

よくあるブログ記事の概要表示です

これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…

よくあるブログ記事の概要表示です

これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…

よくあるブログ記事の概要表示です

これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…

<div class="echo-medias">

    <div class="echo-medias-item">
        <div class="echo-media echo-media-fixed">
            <div class="echo-media-inner">
                <div class="echo-media-object">
                    <figure class="echo-thumbnail">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_04_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_04.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img alt="" src="../images/_dummy/image_04.jpg">
                        </picture>
                    </figure><!-- /.echo-thumbnail -->
                </div><!-- /.echo-media-object -->
                <div class="echo-media-contents">
                    <time class="echo-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a"><a href="#">よくあるブログ記事の概要表示です</a></h3>
                    <p class="echo-media-body">これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…</p>
                </div><!-- /.echo-media-contents -->
            </div><!-- /.echo-media-inner -->
        </div><!-- /.echo-media -->
    </div><!-- /.echo-medias-item -->

    <div class="echo-medias-item">
        <div class="echo-media echo-media-fixed">
            <div class="echo-media-inner">
                <div class="echo-media-object">
                    <figure class="echo-thumbnail">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_04_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_04.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img alt="" src="../images/_dummy/image_04.jpg">
                        </picture>
                    </figure><!-- /.echo-thumbnail -->
                </div><!-- /.echo-media-object -->
                <div class="echo-media-contents">
                    <time class="echo-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a"><a href="#">よくあるブログ記事の概要表示です</a></h3>
                    <p class="echo-media-body">これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…</p>
                </div><!-- /.echo-media-contents -->
            </div><!-- /.echo-media-inner -->
        </div><!-- /.echo-media -->
    </div><!-- /.echo-medias-item -->

    <div class="echo-medias-item">
        <div class="echo-media echo-media-fixed">
            <div class="echo-media-inner">
                <div class="echo-media-object">
                    <figure class="echo-thumbnail">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_04_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_04.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img alt="" src="../images/_dummy/image_04.jpg">
                        </picture>
                    </figure><!-- /.echo-thumbnail -->
                </div><!-- /.echo-media-object -->
                <div class="echo-media-contents">
                    <time class="echo-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a"><a href="#">よくあるブログ記事の概要表示です</a></h3>
                    <p class="echo-media-body">これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…</p>
                </div><!-- /.echo-media-contents -->
            </div><!-- /.echo-media-inner -->
        </div><!-- /.echo-media -->
    </div><!-- /.echo-medias-item -->

    <div class="echo-medias-item">
        <div class="echo-media echo-media-fixed">
            <div class="echo-media-inner">
                <div class="echo-media-object">
                    <figure class="echo-thumbnail">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_04_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_04.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img alt="" src="../images/_dummy/image_04.jpg">
                        </picture>
                    </figure><!-- /.echo-thumbnail -->
                </div><!-- /.echo-media-object -->
                <div class="echo-media-contents">
                    <time class="echo-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a"><a href="#">よくあるブログ記事の概要表示です</a></h3>
                    <p class="echo-media-body">これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…</p>
                </div><!-- /.echo-media-contents -->
            </div><!-- /.echo-media-inner -->
        </div><!-- /.echo-media -->
    </div><!-- /.echo-medias-item -->

    <div class="echo-medias-item">
        <div class="echo-media echo-media-fixed">
            <div class="echo-media-inner">
                <div class="echo-media-object">
                    <figure class="echo-thumbnail">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_04_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_04.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img alt="" src="../images/_dummy/image_04.jpg">
                        </picture>
                    </figure><!-- /.echo-thumbnail -->
                </div><!-- /.echo-media-object -->
                <div class="echo-media-contents">
                    <time class="echo-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a"><a href="#">よくあるブログ記事の概要表示です</a></h3>
                    <p class="echo-media-body">これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…</p>
                </div><!-- /.echo-media-contents -->
            </div><!-- /.echo-media-inner -->
        </div><!-- /.echo-media -->
    </div><!-- /.echo-medias-item -->

    <div class="echo-medias-item">
        <div class="echo-media echo-media-fixed">
            <div class="echo-media-inner">
                <div class="echo-media-object">
                    <figure class="echo-thumbnail">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_04_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_04.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img alt="" src="../images/_dummy/image_04.jpg">
                        </picture>
                    </figure><!-- /.echo-thumbnail -->
                </div><!-- /.echo-media-object -->
                <div class="echo-media-contents">
                    <time class="echo-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a"><a href="#">よくあるブログ記事の概要表示です</a></h3>
                    <p class="echo-media-body">これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…</p>
                </div><!-- /.echo-media-contents -->
            </div><!-- /.echo-media-inner -->
        </div><!-- /.echo-media -->
    </div><!-- /.echo-medias-item -->

    <div class="echo-medias-item">
        <div class="echo-media echo-media-fixed">
            <div class="echo-media-inner">
                <div class="echo-media-object">
                    <figure class="echo-thumbnail">
                        <picture>
                        <source
                            media="(max-width:640px)"
                            srcset="../images/_dummy/image_04_s.jpg 640w"
                            sizes="100vw">
                        <source
                            srcset="../images/_dummy/image_04.jpg 1280w"
                            sizes="(max-width:1280px) 100vw, 1280px">
                        <img alt="" src="../images/_dummy/image_04.jpg">
                        </picture>
                    </figure><!-- /.echo-thumbnail -->
                </div><!-- /.echo-media-object -->
                <div class="echo-media-contents">
                    <time class="echo-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                    <h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a"><a href="#">よくあるブログ記事の概要表示です</a></h3>
                    <p class="echo-media-body">これはブログの概要文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…</p>
                </div><!-- /.echo-media-contents -->
            </div><!-- /.echo-media-inner -->
        </div><!-- /.echo-media -->
    </div><!-- /.echo-medias-item -->

</div><!-- /.echo-medias -->