メインビジュアル - メインビジュアル

見出し+テキスト+ボタン。背景画像を全画面で表示。

スマートフォン上の表示
パソコン上の表示

ソースコード

ソースコードである HTML および CSS を利用するページにコピーし、ご利用ください。

HTML

以下のコードをmain要素直下に配置します。

<hr class="mf-hr mf-col-1 mf-width-fullexpand" style="display: none">

<div class="mfc-mainvisual mfc-mainvisual-001-001-2">
    <div class="mfc-mainvisual-img">
        <ul>
            <li style="background-image:url('https://via.placeholder.com/1280/f0a0a0/ffffff')"></li>
        </ul>
    </div>
    <div class="mfc-mainvisual-content">
        <h1>見出し</h1>
        <p>テキスト</p>
        <a class="mfc-link" href="#">リンク</a>
    </div>
</div>

CSS

.mfc-mainvisual-001-001-2 {
  position: relative;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content {
  position: absolute;
  z-index: 2;
  top: 15vh;
  left: 0;
  right: 0;
  padding: 2rem;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link {
  background: #5C5C5C url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDBWMHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOC04LTh6Ii8+PC9zdmc+") no-repeat right 1rem center;
  padding: 1rem;
  border-radius: 4px;
  width: 100%;
  color: #fff;
  text-align: center;
  text-decoration: none;
  display: block;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:hover {
  opacity: 0.7;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:hover,
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:focus,
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:active,
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:visited {
  text-decoration: none;
  color: #fff;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:hover *,
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:focus *,
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:active *,
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content .mfc-link:visited * {
  text-decoration: none;
  color: #fff;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content a {
  margin-top: 1.5rem;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-content h1 {
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-img {
  overflow: hidden;
}
.mfc-mainvisual-001-001-2 .mfc-mainvisual-img li {
  height: 70vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center bottom;
}
.mf-converted .mfc-mainvisual-001-001-2 .mfc-mainvisual-content {
  position: absolute;
  width: 480px;
  margin-right: 50%;
  right: 0;
  left: initial;
  text-align: left;
  top: 15vh;
}
.mf-converted .mfc-mainvisual-001-001-2 .mfc-mainvisual-img li {
  background-position: center bottom 30%;
}

mfc-base.cssの読み込みが必要です。

デザインコンポーネントについて