echo-media
サムネイル等のメディアオブジェクトと、テキストオブジェクトが並列しているコンポーネントを表示する。
.echo-button, .echo-title, .echo-thumbnail を含むことができる。
.echo-media-object の最大幅は 33.33333333% となっている。比率を変更したい場合は任意調整すること。
リンクを含む場合は .echo-media-title に下線が引かれる。リンクが不要な場合であっても .echo-media-inner が必須であることに注意する。
| (breakpoint) | (fontsize) | ||
|---|---|---|---|
| .echo-***-sm | .echo-*** | .echo-***-lg | |
| md以下 | xs | sm | md |
| lg以上 | sm | md | lg |
補足：中間の余白
.echo-media-object, .echo-media-contents 間の余白は画面サイズに対する相対で変動する。デフォルトの大きさは以下の通り。
Internet Explorerは変動に対応していないため、常に3%となる。
Note: Margins between
The gutter between .echo-media-object and .echo-media-contents varies relative to screen size. The default size is as follows.
Internet Explorer, which is not responsive, is always 3%.
| min | bases | max |
|---|---|---|
| 0.5rem (8px) | 3.5% (component width) | 3rem (48px) |
これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
.echo-media-body のコンテンツの一部に .echo-text-xxl を付与しています。
ここが150%になります。画面サイズを変えて、ひとつ前のコンポーネントと比較してください。
<div class="echo-media">
<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">
<p class="echo-media-meta">2021.05.01</p>
<h3 class="echo-media-title echo-title echo-title-level-4 echo-title-style-a">これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。</h3>
<p class="echo-media-body">これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->
<hr class="echo-margin-y-lg">
<div class="echo-media">
<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">
<p class="echo-media-body">.echo-media-body のコンテンツの一部に .echo-text-xxl を付与しています。<br>
<span class="echo-text-xxl">ここが150%になります。</span>画面サイズを変えて、ひとつ前のコンポーネントと比較してください。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->
<hr class="echo-margin-y-lg">
<div class="echo-media">
<a href="#" 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">
<h3 class="echo-media-title echo-title echo-title-level-5 echo-title-style-a">全体がリンク範囲となっている例</h3>
<p class="echo-media-body">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
<div class="echo-margin-top-md"><span class="echo-button echo-button-sm echo-button-style-b echo-button-icon-arrow">ボタン</span></div>
</div><!-- /.echo-media-contents -->
</a><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->sub class echo-media-(size)
文字サイズを変更する。
(size)は、 sm, lg に対応している。
このサンプルコードでは、見出しに .echo-title.echo-title-level-4.echo-title-style-a を付与している。 .echo-title-level-(level) は、継承された文字サイズの相対値となるため、見出しの文字サイズも追随する。
.echo-media-sm
これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
(default)
これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
.echo-media-lg
これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">.echo-media-sm</p>
<div class="echo-media echo-media-sm">
<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">
<p class="echo-media-meta">2021.05.01</p>
<h3 class="echo-media-title echo-title echo-title-level-4 echo-title-style-a">これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。</h3>
<p class="echo-media-body">これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">(default)</p>
<div class="echo-media">
<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">
<p class="echo-media-meta">2021.05.01</p>
<h3 class="echo-media-title echo-title echo-title-level-4 echo-title-style-a">これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。</h3>
<p class="echo-media-body">これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">.echo-media-lg</p>
<div class="echo-media echo-media-lg">
<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">
<p class="echo-media-meta">2021.05.01</p>
<h3 class="echo-media-title echo-title echo-title-level-4 echo-title-style-a">これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。</h3>
<p class="echo-media-body">これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->sub class echo-media-fixed
文字が (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。
echo-media-fixedの例
幅を300pxに制限しています
サイドバーウィジェットなど、常に狭い領域に配置する場合は、文字サイズは画面サイズによって変更されないことが期待されます。
.echo-media-sm
これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
(default)
これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
.echo-media-lg
これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。
<div style="max-width: 300px;">
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">echo-media-fixedの例</p>
<div class="echo-media echo-media-fixed">
<div class="echo-media-inner">
<div class="echo-media-object">
<figure class="echo-thumbnail echo-thumbnail-square">
<img alt="" src="../images/_dummy/image_04_s.jpg">
</figure><!-- /.echo-thumbnail -->
</div><!-- /.echo-media-object -->
<div class="echo-media-contents echo-text-sm">
<p class="echo-media-title echo-title echo-title-level-6 echo-title-style-a">幅を300pxに制限しています</p>
<p class="echo-media-body">サイドバーウィジェットなど、常に狭い領域に配置する場合は、文字サイズは画面サイズによって変更されないことが期待されます。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->
</div>
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">.echo-media-sm</p>
<div class="echo-media echo-media-sm 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">
<p class="echo-media-meta">2021.05.01</p>
<h3 class="echo-media-title echo-title echo-title-level-4 echo-title-style-a">これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。</h3>
<p class="echo-media-body">これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">(default)</p>
<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">
<p class="echo-media-meta">2021.05.01</p>
<h3 class="echo-media-title echo-title echo-title-level-4 echo-title-style-a">これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。</h3>
<p class="echo-media-body">これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-top-lg echo-margin-bottom-md">.echo-media-lg</p>
<div class="echo-media echo-media-lg 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">
<p class="echo-media-meta">2021.05.01</p>
<h3 class="echo-media-title echo-title echo-title-level-4 echo-title-style-a">これは見出しです。.echo-media-title には .echo-title を付与できます（推薦）。</h3>
<p class="echo-media-body">これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
</div><!-- /.echo-media-contents -->
</div><!-- /.echo-media-inner -->
</div><!-- /.echo-media -->sub class echo-media-middle
画像と本文を、上ではなく縦中央に整列させる。
これは見出しです
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…
<div class="echo-media echo-media-middle">
<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">
<h3 class="echo-media-title echo-title echo-title-level-4 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 -->
sub class echo-media-reverse
オブジェクトと本文の配置を逆にする。
これは見出しです
これは本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは…
<div class="echo-media echo-media-reverse">
<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">
<h3 class="echo-media-title echo-title echo-title-level-4 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 -->