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の内容が多すぎるとはみ出すことがある点に注意。
.c-hero-title > .m-title のフォントサイズはこのコンポーネント独自の変化をする。
なお、.c-hero-title > .m-title に付与されている .u-font-first は必須ではない。詳細は utility > font を参照。
.c-hero-link > .m-btn のfont-size、paddingはこのコンポーネント独自の変化をする。
<div class="c-hero">
<div class="c-hero-image">
<picture>
<source
media="(max-width:768px)"
srcset="../images/_dummy/image_10_m.jpg 768w"
sizes="100vw">
<source
srcset="../images/_dummy/image_10.jpg 1280w"
sizes="(max-width:1280px) 100vw">
<img src="../images/_dummy/image_10.jpg" alt="">
</picture>
</div><!-- /.c-hero-image -->
<div class="c-hero-contents">
<div class="c-hero-contents-inner">
<h2 class="c-hero-title m-title u-font-first">吾輩は猫である</h2>
<p class="c-hero-caption">名前はまだ無い</p>
<div class="c-hero-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div><!-- /.c-hero-body -->
<p class="c-hero-link">
<a href="#" class="m-btn m-btn-gray m-btn-bordered m-btn-block">詳しくはこちら</a>
</p>
</div><!-- /.c-hero-contents-inner -->
</div><!-- /.c-hero-contents -->
</div><!-- /.c-hero -->c-hero-fit
背景画像が縦横比を保ってトリミングされる。
ブレークポイントが xs では 1:1 、sm, md, lg では 16:9 、xl 以上では 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_10_m.jpg 768w"
sizes="100vw">
<source
srcset="../images/_dummy/image_10.jpg 1280w"
sizes="(max-width:1280px) 100vw">
<img src="../images/_dummy/image_10.jpg" alt="">
</picture>
</div><!-- /.c-hero-image -->
<div class="c-hero-contents">
<div class="c-hero-contents-inner">
<h2 class="c-hero-title m-title u-font-first">吾輩は猫である</h2>
<p class="c-hero-caption">名前はまだ無い</p>
<div class="c-hero-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div><!-- /.c-hero-body -->
<p class="c-hero-link">
<a href="#" class="m-btn m-btn-gray m-btn-bordered m-btn-block">詳しくはこちら</a>
</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 m-title u-font-first">吾輩は猫である</h2>
<p class="c-hero-caption">名前はまだ無い</p>
<div class="c-hero-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div><!-- /.c-hero-body -->
<p class="c-hero-link">
<a href="#" class="m-btn m-btn-gray m-btn-bordered m-btn-block">詳しくはこちら</a>
</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_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 m-title u-font-first">吾輩は猫である</h2>
<p class="c-hero-caption">名前はまだ無い</p>
<div class="c-hero-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div><!-- /.c-hero-body -->
<p class="c-hero-link">
<a href="#" class="m-btn m-btn-gray m-btn-bordered m-btn-block">詳しくはこちら</a>
</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 m-title u-font-first">吾輩は猫である</h2>
<p class="c-hero-caption">名前はまだ無い</p>
<div class="c-hero-body">
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
</div><!-- /.c-hero-body -->
<p class="c-hero-link">
<a href="#" class="m-btn m-btn-inverse m-btn-bordered m-btn-block">詳しくはこちら</a>
</p>
</div><!-- /.c-hero-contents-inner -->
</div><!-- /.c-hero-contents -->
</div><!-- /.c-hero -->