CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでヒーロー画像を作成する方法を初心者向けに解説｜サンプルコード付き

Webサイトのファーストビューを飾る「ヒーロー画像」は、訪問者の印象を左右する重要な要素です。CSSを使えば、背景画像の上に半透明のグラデーションやキャプションを重ねた、おしゃれなヒーローセクションを簡単に作成できます。

この記事では、実際に動作するサンプルコードをもとに、CSSでヒーロー画像を作成する手順をわかりやすく解説します。

ヒーロー画像作成のポイント

今回作成するのは、背景画像全体に半透明のグラデーションを重ね、その上に見出し・サブタイトル・ボタンを配置するシンプルなヒーローセクションです。押さえておきたい主なポイントは以下の3つです。

  • linear-gradient()でオーバーレイを追加 … 背景画像の上に半透明のグラデーションを重ねることで、白いテキストでも読みやすいデザインになります。
  • background-size: coverで画像を全面表示 … 画面幅に合わせて画像が自動的に拡大・縮小され、余白や繰り返しが発生しません。
  • position: absoluteでキャプションを配置 … 親要素を基準に、テキストやボタンを自由な位置に設置できます。

CSSでヒーロー画像を作成するサンプルコード

以下は、CSSでヒーロー画像を作成するための完全なコード例です。そのままHTMLファイルとして保存し、ブラウザで開けばすぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body,
html {
    height: 100%;
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
h1 {
    font-size: 60px;
    font-weight: bolder;
}
.heroContainer {
    background-image: linear-gradient( rgba(185, 255, 243, 0.5), rgba(31, 12, 117, 0.5) ),
    url("https://images.pexels.com/photos/670720/pexels-photo-670720.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
    height: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.heroCaption {
    text-align: center;
    position: absolute;
    top: 20%;
    left: 45%;
    color: white;
}
.heroCaption button {
    border: none;
    outline: none;
    display: inline-block;
    padding: 20px;
    color: rgb(255, 255, 255);
    opacity: 0.8;
    font-size: 20px;
    background-color: rgb(47, 151, 21);
    text-align: center;
    cursor: pointer;
}
.heroCaption button:hover {
    opacity: 1;
}
</style>
</head>
<body>
<div class="heroContainer">
<div class="heroCaption">
<h1>I am Shawn</h1>
<h2>And I'm a Web Developer</h2>
<button>Contact Me</button>
</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで表示すると、次のようなヒーロー画像が生成されます。

CSSでヒーロー画像を作成する方法を初心者向けに解説｜サンプルコード付き

まとめ

CSSによるヒーロー画像の作成は、「背景画像＋グラデーションのオーバーレイ」「coverによる全面表示」「絶対配置のキャプション」という3つの要素を組み合わせるだけで実現できます。グラデーションの色味やキャプションの位置、フォントサイズなどを調整すれば、サイトの雰囲気に合わせたオリジナルのヒーローセクションが簡単に作れます。ぜひ実際にコードを書いて、自分だけのデザインに仕上げてみてください。

  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>