Code CSS HTML

【HTML/CSS初心者の模写】ヒーロー画像の上に文字を重ねて表示する方法を解説|Norton

2020年10月17日

こんにちは、イケゾーです。

今回は、セキュリティでおなじみ「Norton」のサイト模写の解説をしていきます。(2020/10時点)

WEBサイトを表示した時に表示される大きな画像のことを「ヒーロー」と読びます。
ヒーローでは、画像のみを表示する場合もありますが、文字を画像の上に配置して表示する場合もあります。Nortonのヒーローでは、「カートに入れる」というボタンも配置していますね。このようなコーディングができるような方法を解説します。

 

ヒーローとは

設計図

 

この記事を読むと

画像の上に文字を重ねて表示する方法が分かります

 

下の記事では、ヒーロの上の部分「ナビゲーション」の作成方法を解説していますので、興味があればお読みください。

navdemo
【初心者のWEBサイト模写】Bootstrapでナビゲーションバーを作る方法を解説|Norton

続きを見る

 

僕も、模写を進めながらひとつひとつ解説をしていくので、「簡単すぎる」と感じたところは飛ばしながら読んでいってください。そのままコピーして頂いても同じように実装できますので、ぜひ手を動かしてみてください。

 

では、やっていきましょう。

【初心者のWEBサイト模写】ヒーロー画像の上に文字を重ねて表示する方法を解説

レイアウトの設計

こちらのサイト Norton  を模写していきます。

コードを書き始める前に、レイアウトの設計をしましょう。模写の場合は、WEBサイトのスクリーンショットをパワポ等に貼り付けて書き込んでいきましょう。もちろん紙でも構いません。

 

レイアウト設計

僕の場合は、レイアウトを下のように設計しました。

画像は2枚使用し、上部の「hero」では、画像の上に「hero-product」「hero-price」「ボタン」を配置していきます。ここの配置が今回のポイントですね。

このように設計できていれば次へ進めていきましょう。

 

レイアウト設計図

レイアウト

 

スタート状態の確認

次章からコードを書いていきますが、その前にスタートの状態を確認しておきましょう。

僕の画面では、下の記事でページ上部にナビゲーションを作成済みの状態です。僕の画面と合わせたい方は、コードをコピペしてきてください。

初心者向け【WEBサイト模写のやり方】HTMLとCSSのテンプレートを作る方法を解説

続きを見る

ナビゲーション作成済み

HTMLの作成

手順としては、まず画像を表示して確認します。無事に表示できていれば、画像の上に表示させるテキスト部分を作成して確認します。

 

画像を表示してみよう

画像をダウンロードする

WEBサイトから画像をダウンロードして、画像を表示していきます。

参考

画像をひとつひとつ、「右クリック」→「名前をつけて保存」は効率悪いですよ。
下の記事にて、一括で全てダウンロードできる方法を紹介しております。この方法で画像を準備してください。

【模写コーディングおすすめツール】WEBサイトの画像を一括保存する「Image Downloader」

続きを見る

 

index.htmlで画像を表示させる

では、index.htmlを書いていきます。とりあえず画像を2枚表示させてみましょう。

index.html
	<div class="hero-container">
	<div class="hero">
		<img src="image/jp_top_herobanner_father_n360.png" alt="メイン画像">
	</div>
	<div class="hero-second">
		<a href=""><img src="image/nn360_main_banner.png" alt="サブ画像"></a>
	</div>
	</div>

 

ブラウザでの確認

画像の確認

イケゾー
いいですね、順調♪

 

文字とボタンを表示してみよう

index.htmlでテキストを表示させる

レイアウト設計で作ったclassを使っていきます。まずは、フォントやマージンなどは気にせず、必要なパーツを準備することに集中しましょう。できたら、font-awesomeでアイコンの表示、<span>を使って違うフォントを設定できるようにしよう。
ボタンは、Bootstrapのボタンを使用していきます。

コードを載せておくので、参考にしてください。
index.html

<div class="hero-container">
	<div class="hero">
		<img src="image/jp_top_herobanner_father_n360.png" alt="メイン画像">
		<div class="hero-text">
			<p class="hero-product">ノートン 360 デラックス<span class="hero-series">1年3台版</span></p>
			<div class="hero-price">
				<div>
					<p class="hero-price-first">5,480<span class="yen">円(税抜)</span></p>
					<p class="hero-price-second">1日あたり約<span class="yen-per">15</span>円</p>
				</div>
				<button type="button" class="btn btn-success text-white hero-btn"><i class="fas fa-shopping-cart mr-1"></i>カートに入れる</button>
			</div>
		</div>
	</div>
	<div class="hero-second">
		<a href=""><img src="image/nn360_main_banner.png" alt="サブ画像"></a>
	</div>
</div>

 

ブラウザでの確認

イケゾー
順調だね♪

 

CSSの作成

手順としては、まず画像を表示して確認します。無事に表示できていれば、画像の上に表示させるテキスト部分を作成して確認します。

 

画像の上に文字を配置してみよう

「position」を使います

画像に「position:relative」、テキスト部分に「position:absolute」を書きます。こうすることで、画像とテキスト部分が縦並びではなく、テキスト部分を画像に対してどこに配置するかを設定できるようになります。

bottom、leftの値を変えてみると移動するのが分かりますよ。

style.cssl
.hero{
	position: relative;
}
.hero-text{
	position: absolute;
	bottom: 20px;
	left: 150px;
}
.hero-price{
	display: flex;
}

 

ブラウザでの確認

 

フォントやマージンの調整

あとは、細かな部分を調整していきましょう。どこまで厳密にやるかはお任せしますが、僕の完成形とソースコードを載せておきますね。

ひとつひとつ見ていけば、難しい要素はないです。基本的なことばかりなので、焦らずやっていきましょう。

 

ブラウザでの確認

完成

 

style.css
.hero-container{
	margin-top: 30px;
}
.hero{
	position: relative;
	margin-bottom: 20px;
}
.hero-text{
	position: absolute;
	bottom: 20px;
	left: 150px;
	color: #353636;
	font-size: 19px;
}
.hero-product{
	margin-bottom: 5px;
}
.hero-series{
	border: 1px solid #353636;
	margin-left: 5px;
	padding: 0 3px 0 3px;
}
.hero-price{
	display: flex;
}
.hero-price-first{
	font-size: 36px;
	margin-bottom: 0;
	height: 48px;
}
.yen{
	font-size: 16px;
}
.hero-price-second{
	font-size: 18px;
	color: #ff0000;
	margin-bottom: 0;
	background: #fff;
	border-radius: 20px;
	text-align: center;
}
.yen-per{
	font-size: 22px;
}
.hero-btn{
	width: 200px;
	height: 70px;
	margin-top: 10px;
	background: #046F13;
	border:none;
}
.hero-second{
	margin-bottom:20px;
}
.hero-second:hover{
	opacity: 0.7;
}

 

 

完成!

お疲れ様でした。同じようにできたでしょうか。

1pxのずれも許さないという模写ではないので、この程度再現できていればOKです。

このテクニックはよく使いますので、使いこなせるようにしておくと良いですね。

 

まとめ

以上で、ヒーローを作成してきました。

画像の上に文字を重ねて配置する方法がお分かりいただけたかと思います。

メインのサービス紹介の部分を模写していきます。

 

当ブログでは、仕事や副業さらには生活で使える「効率」を発信しています。

ぜひ、他の記事もご覧ください。

 

ご不明点あれば、コメントまたはTwitterまでご連絡ください。ではでは。

 

  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-Code, CSS, HTML
-, , , ,

© 2021 IkezoooBlog