下層ページのヒーローエリアのコーディング①【Webサイト制作案件でよく使うサンプルコード】

下層ページのヒーローエリアのコーディング①【Webサイト制作案件でよく使うサンプルコード】

こんにちは。

ゆうや(@yuyaphotograph)です!

この記事では、

  • HTML、CSSで下層ページのヒーローエリアのコーディングをする方法が知りたい
  • Webサイト制作案件でよくある最もシンプルなヒーローエリアのサンプルコードが見たい
  • 超シンプルなヒーローエリアのコーディングはどんなHTML構造で作るのか知りたい

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

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

中央にタイトルが配置されているだけのシンプルなものですが、コーディングで躓いている方のお役に立てれば幸いです!

完成イメージ

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

▼▼▼

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

超絶シンプル、、、!!!

こちらを構成する要素としては、

  • 背景画像
  • タイトル
  • 透明度50%の黒いマスク

となります。

Web制作案件を続けていると、何度あのデザインに出会うことやら笑

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

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

下層ページのヒーローエリアのサンプルコード

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

画面が2分割されていて小さいですが、実際のCodePenのページへ行っていただければ横長長方形のヒーローエリアがご覧いただけます。

イメージが湧きやすい方をお選びくださいまし。

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

HTML

こちら、超シンプルな下層ページのヒーローエリアのHTML構造です!

HTML
<div class="HeroSection">
  <div class="Hero">
    <div class="Hero-Inner">
      <h2 class="Hero-Inner-Title">ABOUT</h2>
    </div>
  </div>
</div>

CSS

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

文字サイズや、縦幅などはよしなに変更してお使いください。

CSS
/* ---------------------------- */
/* --- HeroSection --- */
/* ---------------------------- */
.HeroSection {
  position: relative;
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("背景画像のURL or パス") no-repeat center;
  background-size: cover;
  z-index: 0;
}
.HeroSection:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  opacity: .5;
  z-index: 1;
}
.Hero-Inner-Title {
  position: relative;
  color: #fff;
  font-weight: bold;
  font-size: 75px;
  z-index: 2;
}
@media screen and (max-width: 540px) {
  .Hero-Inner-Title {
    font-size: 40px;
  }
}

まとめ

以上、実務でよく使われる超シンプルな下層ページのヒーローエリアのコーディングのサンプルコードを紹介しました。

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

 

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

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

【カードデザインのコーディング】 Webサイト制作案件でよく使うサンプルコードまとめ【カードデザインのコーディング】 Webサイト制作案件でよく使うサンプルコードまとめ 【パネルデザインのコーディング①】 Webサイト制作案件でよく使うサンプルコード【パネルデザインのコーディング①】 Webサイト制作案件でよく使うサンプルコード CSSのflexboxで横スクロールを実装する方法【CSS】flexboxで横スクロールを実装する方法 CSSのflexアイテムの最後の要素を下揃えする方法CSSのflexアイテムの最後の要素を下揃えする方法【たった3行追加で実装】 Flexboxで要素の高さを合わせない方法Flexboxで要素の高さを合わせない方法

コメントを残す

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