少し複雑なヒーローエリアのコーディング①【Webサイト制作案件でよく使うサンプルコード】

少し複雑なヒーローエリアのコーディング①【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • HTML、CSSでヒーローエリアのコーディングをする方法が知りたい
  • Webサイト制作案件でよくある少し複雑なヒーローエリアのサンプルコードが見たい
  • コピペでOKなヒーローエリアのコードを見たい

という方のお悩みを解決します!

今回、紹介するサンプルコードはぼくがかつて、実際のWebサイト制作案件で使用したものです。

当時はHTML構造にだいぶ苦戦して、一緒に取り組んでいたWebデザイナーの友人にアドバイスをもらってなんとか実装した、ちょいと難しめのデザインです!笑

完成イメージ

今回紹介するコードで実現できるヒーローエリアのデザインはこちら!

▼▼▼

ヒーローエリアコーディングサンプル

2枚の背景画像を気持ちずらして配置しているのが特徴です。

文字は2枚の画像の境目にちょうどかかるようになっておりますね。

ただポツンと、キャッチコピーを表示させるより、こちらのほうが目を引くのは言うまでもありません笑

 

以下で紹介するコードをお使いいただければ、とりあえず見た目だけは秒で再現できます!

それでは見ていきましょう〜〜

ヒーローエリアのサンプルコード

こちら、CodePenで作った見本です!

レスポンシブでも、PC表示とほぼ同様になるよう、実装しております。

この画面だと表示幅が小さくて本来の迫力を味わえないので、ぜひCodePenのページへ行って確かめてみていただきたいでありんす。

See the Pen
YzwQKKP
by 石森裕也 (@yuyaphotograph)
on CodePen.

HTML

こちら、今回のヒーローエリアのHTML構造です!

HTML
<div class="HeroSection">
  <div class="Hero">
    <div class="Hero-Inner">
      <p class="Hero-Inner-Headline">CEO NAME</p>
    </div>
    <div class="Hero-Bg"></div>
    <div class="Hero-Mask"></div>
  </div>
</div>

2枚の画像部分は空のdivタグで表現します!

「Hero-Bg」と「Hero-Mask」がそれぞれ「前面の画像」「後方の画像」となります。

CSS

こちらスタイリングです!

文字サイズや、背景画像の横幅、文字色などはよしなに変更してお使いください〜

CSS
/* ---------------------------- */
/* --- HeroSection --- */
/* ---------------------------- */
.HeroSection {
  position: relative;
  height: 100vh;
}
.Hero-Inner {
  position: absolute;
  top: 50%;
  left: 74.3%;
  transform: translate(-50%, -50%);
  width: 40vw;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .Hero-Inner {
    left: inherit;
    right: 30px;
    width: 249px;
    transform: translateY(-50%);
  }
}
.Hero-Inner-Headline {
  letter-spacing: 0.15em;
  color: #fff;
  font-size: 64px;
}
@media screen and (max-width: 768px) {
  .Hero-Inner-Headline {
    font-size: 36px;
  }
}
.Hero-Bg {
  position: absolute;
  top: 0;
  left: 0;
  background: url("画像URL") no-repeat;
  background-position: center;
  background-size: cover;
  width: 70%;
  height: 95%;
  z-index: 1;
}
.Hero-Mask {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,0.3);
  background-position: center;
  background-size: cover;
  width: 80%;
  height: 100%;
}

まとめ

以上、実務でよく使われるちょっぴりオシャレで複雑なヒーローエリアのコーディングのサンプルコードを紹介しました。

コーポレートサイトの制作案件をする際にきっと!役立つスキルとなりますのでぜひ覚えていきましょう〜!

 

「CSSのflexboxなどを使ってコーディングスキルをさらにアップしたい!」

という方は以下の記事にも目を通してみてくださいまし。

少し複雑なカードデザインのコーディングパーツ⑤【Webサイト制作案件でよく使うサンプルコード】少し複雑なカードデザインのコーディングパーツ⑤【Webサイト制作案件でよく使うサンプルコード】 少し複雑なカードデザインのコーディングパーツ④【Webサイト制作案件でよく使うサンプルコード】少し複雑なカードデザインのコーディングパーツ④【Webサイト制作案件でよく使うサンプルコード】 少し複雑なカードデザインのコーディングパーツ③【Webサイト制作案件でよく使うサンプルコード】少し複雑なカードデザインのコーディングパーツ③【Webサイト制作案件でよく使うサンプルコード】 少し複雑なカードデザインのコーディングパーツ②【Webサイト制作案件でよく使うサンプルコード】少し複雑なカードデザインのコーディングパーツ②【Webサイト制作案件でよく使うサンプルコード】 少し複雑なカードデザインのコーディングパーツ①【Webサイト制作案件でよく使うサンプルコード】少し複雑なカードデザインのコーディングパーツ①【Webサイト制作案件でよく使うサンプルコード】 【カードデザインのコーディング】 Webサイト制作案件でよく使うサンプルコードまとめ【カードデザインのコーディング】 Webサイト制作案件でよく使うサンプルコードまとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です