ヒーローヘッダーとは?サンプルコード付きで解説!

海外のサイトなどを見ているとhero-○○というクラス名を見かけることがあるかと思います。これはヒーローヘッダーというデザインのことです。今回はヒーローヘッダーについて解説し、その実装方法をサンプルコード付きで解説します。

コンテンツ [表示]

  1. 1ヒーローヘッダーとは?
  2. 2ヒーローヘッダーの例
  3. 2.1imgタグを用いる方法
  4. 2.2background-imageプロパティを用いる方法

ヒーローヘッダーとは?

海外のWEBサイトなどを見ているとhero-○○というクラス名を見かけることがあると思います。

これはヒーローヘッダーというデザインのことで、画像をスクリーンいっぱいに表示し、その上に文字を重ねるような実装の事を言います。

ヒーローヘッダーを用いると、サイトを開いた瞬間に最も強調したい画像を画面いっぱいに表示できるというメリットがあります。

今回は、ヒーローヘッダーの例を紹介するとともに、その実装方法についてサンプルコード付きで解説します。

Photo byPexels

ヒーローヘッダーの例

ヒーローヘッダーを実装する方法は2通りあります。
 

imgタグを用いる方法

まずはimgタグを用いて、テキストをその上に配置する方法です。

imgタグを用いる場合はwidthプロパティに100vwheightプロパティに100vhをそれぞれ設定します。
こちらの方法の場合、拡大はさせないことが一般的となっています。そのため画質が落ちないので、綺麗に見せたい商品画像などに使用することが多いです。

background-imageプロパティを用いる方法

background-imageプロパティを用いる場合は、画像の拡大縮小を行うので想定されるスクリーン幅の中間の大きさで画像を書き出すことが多いです。

画質も変動するため、画質が多少粗くても大丈夫な背景画像を用います。

background-imageプロパティを用いる場合は同時にbackground-sizeプロパティをcontainもしくはcoverで指定します。

以下のサンプルコードでご確認ください。

今だけ
無料

【5月31日まで】全カリキュラム無料で提供中!

Qumeru

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次

しまむ
ライター

しまむ

千葉県在住、都内の大学に通う大学1年生です。HTML/CSS/BootStrapに関する記事を執筆しています。