component-media

c-media

サムネイル等のメディアオブジェクトと、テキストオブジェクトが並列しているコンポーネントを表示する。
.m-title, .m-thumbnail を含む前提となっている。
リンクを含む場合は .c-media-title.m-title に下線が引かれる。
.c-media-object の最大幅は、ブレークポイントが sm 以下で 50% 、 md 以上で 33.33333333% となっているため、比率を変更したい場合は任意調整すること。

これはメディアです

これはメディアの本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

よくあるカラムレイアウトの例

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

メディア全体がリンク範囲

吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。

コンテンツが長すぎる_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

<div style="margin-bottom: 2rem;">
<div class="c-media">
    <div class="c-media-object">
        <div class="m-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>
        </div>
    </div>
    <div class="c-media-contents">
        <time class="c-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
        <h3 class="c-media-title m-title m-title-level-4 m-title-style-a"><a href="#">これはメディアです</a></h3>
        <p class="c-media-body">これはメディアの本文です。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
    </div>
</div>
</div>


<div style="margin-bottom: 2rem;">
<div class="l-grid-row">
    <div class="l-grid-col-12 l-grid-col-lg-6 l-grid-col-xl-4" style="padding-bottom: 1rem;">
        <div class="c-media">
            <div class="c-media-object">
                <div class="m-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>
                </div>
            </div>
            <div class="c-media-contents">
                <time class="c-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                <h3 class="c-media-title m-title m-title-level-6 m-title-style-a"><a href="#">よくあるカラムレイアウトの例</a></h3>
                <p class="c-media-body">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
            </div>
        </div>
    </div>
    <div class="l-grid-col-12 l-grid-col-lg-6 l-grid-col-xl-4" style="padding-bottom: 1rem;">
        <a href="#" class="c-media">
            <div class="c-media-object">
                <div class="m-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>
                </div>
            </div>
            <div class="c-media-contents">
                <time class="c-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                <h3 class="c-media-title m-title m-title-level-6 m-title-style-a">メディア全体がリンク範囲</h3>
                <p class="c-media-body">吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。</p>
            </div>
        </a>
    </div>
    <div class="l-grid-col-12 l-grid-col-lg-6 l-grid-col-xl-4" style="padding-bottom: 1rem;">
        <div class="c-media">
            <div class="c-media-object">
                <div class="m-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>
                </div>
            </div>
            <div class="c-media-contents">
                <time class="c-media-meta" datetime="2020-12-28T09:00:00+09:00">2020.12.28</time>
                <h3 class="c-media-title m-title m-title-level-6 m-title-style-a"><a href="#">コンテンツが長すぎる_吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a></h3>
                <p class="c-media-body">何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</p>
            </div>
        </div>
    </div>
</div>
</div>

c-media-middle

画像と本文を、上ではなく縦中央に整列させる。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。

この書生の掌の裏でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋も見えぬ。肝心の母親さえ姿を隠してしまった。その上今までの所とは違って無暗に明るい。眼を明いていられぬくらいだ。はてな何でも容子がおかしいと、のそのそ這い出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

<div class="c-media c-media-middle">
    <div class="c-media-object">
        <div class="m-thumbnail">
            <picture>
            <source
                media="(max-width:640px)"
                srcset="../images/_dummy/image_06_s.jpg 640w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_06.jpg 1280w"
                sizes="(max-width:1280px) 100vw, 1280px">
            <img alt="" src="../images/_dummy/image_06.jpg">
            </picture>
        </div><!-- /.m-thumbnail -->
    </div><!-- /.c-media-object -->

    <div class="c-media-contents">
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
        <p>掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。</p>
        <p>この書生の掌の裏でしばらくはよい心持に坐っておったが、しばらくすると非常な速力で運転し始めた。書生が動くのか自分だけが動くのか分らないが無暗に眼が廻る。胸が悪くなる。到底助からないと思っていると、どさりと音がして眼から火が出た。それまでは記憶しているがあとは何の事やらいくら考え出そうとしても分らない。ふと気が付いて見ると書生はいない。たくさんおった兄弟が一疋も見えぬ。肝心の母親さえ姿を隠してしまった。その上今までの所とは違って無暗に明るい。眼を明いていられぬくらいだ。はてな何でも容子がおかしいと、のそのそ這い出して見ると非常に痛い。吾輩は藁の上から急に笹原の中へ棄てられたのである。</p>
    </div><!-- /.c-media-contents -->
</div><!-- /.c-media -->

<div class="c-media c-media-middle">
    <div class="c-media-object">
        <div class="m-thumbnail">
            <picture>
            <source
                media="(max-width:640px)"
                srcset="../images/_dummy/image_06_s.jpg 640w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_06.jpg 1280w"
                sizes="(max-width:1280px) 100vw, 1280px">
            <img alt="" src="../images/_dummy/image_06.jpg">
            </picture>
        </div><!-- /.m-thumbnail -->
    </div><!-- /.c-media-object -->

    <div class="c-media-contents">
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
    </div><!-- /.c-media-contents -->
</div><!-- /.c-media -->

c-media-reverse

オブジェクトと本文の配置を逆にする。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

<div class="c-media c-media-reverse">
    <div class="c-media-object">
        <div class="m-thumbnail">
            <picture>
            <source
                media="(max-width:640px)"
                srcset="../images/_dummy/image_07_s.jpg 640w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_07.jpg 1280w"
                sizes="(max-width:1280px) 100vw, 1280px">
            <img alt="" src="../images/_dummy/image_07.jpg">
            </picture>
        </div><!-- /.m-thumbnail -->
    </div><!-- /.c-media-object -->
    <div class="c-media-contents">
        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>
    </div><!-- /.c-media-contents -->
</div><!-- /.c-media -->