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 -->