component-hero

c-hero

注意.c-hero は、Version2.0.0で背景画像のマークアップと挙動が変更されました。

.c-heroの主な変更点
高さが画面に対する相対値ではなくなりました。
.c-hero-left, .c-hero-right のコンテンツ幅が小さくなりました。
画像をトリミングしない挙動がデフォルトになりました。
.c-hero-fit を使用した場合、CSSのobject-fitによるトリミングを行うようになりました。
Internet Explorer11でトリミングに対応する場合は、別途ライブラリを追加してください。

メインビジュアルなどに使用される全面背景を持つコンポーネントを表示する。
.c-hero-contents-inner が必須であることに注意する。
.c-hero-image の画像はトリミングされず、縦横比を保って伸縮する。レスポンシブイメージを併用することが望ましい。
.c-hero-contents-innerの内容が多すぎるとはみ出すことがある点に注意。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<div class="c-hero">
    <div class="c-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_06_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_06.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_06.jpg" alt="">
        </picture>
    </div><!-- /.c-hero-image -->
    <div class="c-hero-contents">
        <div class="c-hero-contents-inner">
            <h2 class="c-hero-title">吾輩は猫である</h2>
            <p class="c-hero-caption">名前はまだ無い</p>
            <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
        </div><!-- /.c-hero-contents-inner -->
    </div><!-- /.c-hero-contents -->
</div><!-- /.c-hero -->

c-hero-fit

背景画像が縦横比を保ってトリミングされる。
ブレークポイントが md 以下では 3:2 、それ以上では 2.5:1 となる。 画像のトリミングにはobject-fitを使用しているため、Internet Explorer 11には対応していない。
ライブラリを追加した場合でも、レスポンシブイメージとの併用ができないことに注意(画面サイズに関係なく、img要素のsrc属性に指定した画像が使用される)。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<div class="c-hero c-hero-fit">
    <div class="c-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_06_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_06.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_06.jpg" alt="">
        </picture>
    </div><!-- /.c-hero-image -->
    <div class="c-hero-contents">
        <div class="c-hero-contents-inner">
            <h2 class="c-hero-title">吾輩は猫である</h2>
            <p class="c-hero-caption">名前はまだ無い</p>
            <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
        </div><!-- /.c-hero-contents-inner -->
    </div><!-- /.c-hero-contents -->
</div><!-- /.c-hero -->

c-hero-(direction)

コンテンツブロックを指定した方向に寄せる。
ブレークポイントが md 以上の場合は最大幅が66%、 lg 以上の場合は50%に制限される。

.c-hero + .c-hero-left

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

.c-hero + .c-hero-right

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<div class="c-hero c-hero-left">
    <div class="c-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_09_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_09.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_09.jpg" alt="">
        </picture>
    </div><!-- /.c-hero-image -->
    <div class="c-hero-contents">
        <div class="c-hero-contents-inner">
            <h2 class="c-hero-title">吾輩は猫である</h2>
            <p class="c-hero-caption">名前はまだ無い</p>
            <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
        </div><!-- /.c-hero-contents-inner -->
    </div><!-- /.c-hero-contents -->
</div><!-- /.c-hero -->


<div class="c-hero c-hero-right">
    <div class="c-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_08_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_08.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_08.jpg" alt="">
        </picture>
    </div><!-- /.c-hero-image -->
    <div class="c-hero-contents">
        <div class="c-hero-contents-inner">
            <h2 class="c-hero-title">吾輩は猫である</h2>
            <p class="c-hero-caption">名前はまだ無い</p>
            <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
        </div><!-- /.c-hero-contents-inner -->
    </div><!-- /.c-hero-contents -->
</div><!-- /.c-hero -->

c-hero-inverse

コンテンツの色が反転する。
テキストリンク、ボタン等の色は反転前とは変わらないことに注意。

吾輩は猫である

名前はまだ無い

どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

<div class="c-hero c-hero-inverse">
    <div class="c-hero-image">
        <picture>
            <source
                media="(max-width:768px)"
                srcset="../images/_dummy/image_07_m.jpg 768w"
                sizes="100vw">
            <source
                srcset="../images/_dummy/image_07.jpg 1280w"
                sizes="(max-width:1280px) 100vw">
            <img src="../images/_dummy/image_07.jpg" alt="">
        </picture>
    </div><!-- /.c-hero-image -->
    <div class="c-hero-contents">
        <div class="c-hero-contents-inner">
            <h2 class="c-hero-title">吾輩は猫である</h2>
            <p class="c-hero-caption">名前はまだ無い</p>
            <p class="c-hero-body">どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
        </div><!-- /.c-hero-contents-inner -->
    </div><!-- /.c-hero-contents -->
</div><!-- /.c-hero -->