いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【HTML/CSS】メインビジュアルの作成｜簡単なポートフォリオサイトの作成

HTMLとCSSで、Webサイトの顔となるメインビジュアルを作成する方法を解説します。画面サイズに合わせて広がる背景画像の上に、Flexboxを使ってテキストを中央配置します。さらに、疑似要素で半透明のオーバーレイを重ねたり、テキストに影をつけたりして、文字を読みやすくするテクニックも学べます。positionとz-indexによる重ね順の制御も理解できます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • HTML: 5
  • CSS: 3
  • JavaScript: ES6以降

サンプルコード

/assets/css/style.css

/assets/css/style.css
1 
2 .nav-list li a:hover {
3   color: #0077cc;
4+}
5+
6+/* メインビジュアル */
7+#main-visual {
8+  height: 80vh;
9+  background-image: url("../img/main-visual.jpg");
10+  background-size: cover;
11+  background-position: center;
12+  display: flex;
13+  align-items: center;
14+  justify-content: center;
15+  text-align: center;
16+  position: relative;
17+  color: #fff;
18+}
19+
20+#main-visual::before {
21+  content: "";
22+  position: absolute;
23+  inset: 0;
24+  background-color: rgba(0, 0, 0, 0.4); /* 黒の半透明オーバーレイ */
25+  z-index: 1;
26+}
27+
28+.main-text {
29+  position: relative;
30+  z-index: 2;
31+}
32+
33+.main-text h2 {
34+  font-size: 36px;
35+  margin-bottom: 10px;
36+  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
37+}
38+
39+.main-text p {
40+  font-size: 18px;
41+  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
42 }
43

/assets/img/main-visual.jpg

/assets/img/main-visual.jpg
1Binary files /dev/null and b/assets/img/main-visual.jpg differ
2

/index.html

/index.html
1     </header>
2 
3     <section id="main-visual">
4-        <h2>Welcome to My Portfolio</h2>
5-        <p>フロントエンドとWebデザインの制作事例を紹介します</p>
6+        <div class="main-text">
7+            <h2>Welcome to My Portfolio</h2>
8+            <p>フロントエンドとWebデザインの制作事例を紹介します</p>
9+        </div>
10     </section>
11 
12     <section id="about">
13

コード解説

変更点: テキスト要素をdivタグでグループ化

/index.html
1     </header>
2 
3     <section id="main-visual">
4-        <h2>Welcome to My Portfolio</h2>
5-        <p>フロントエンドとWebデザインの制作事例を紹介します</p>
6+        <div class="main-text">
7+            <h2>Welcome to My Portfolio</h2>
8+            <p>フロントエンドとWebデザインの制作事例を紹介します</p>
9+        </div>
10     </section>
11 
12     <section id="about">

HTMLファイルで、見出し（h2タグ）と段落（pタグ）を、新しく<div class="main-text">というひとつの箱で囲みました。 このように複数の要素をdivタグでグループ化することで、後の工程でCSSを使ってまとめてスタイルを適用したり、位置を調整したりするのが簡単になります。

変更点: メインビジュアルの背景画像と高さを設定

/assets/css/style.css
1+/* メインビジュアル */
2+#main-visual {
3+  height: 80vh;
4+  background-image: url("../img/main-visual.jpg");
5+  background-size: cover;
6+  background-position: center;
7+  color: #fff;
8+}

メインビジュアル全体を覆う#main-visual要素にCSSでスタイルを設定しています。

  • height: 80vh;
    • vhは「viewport height」の略で、表示されている画面の高さに対する割合を指定する単位です。80vhは、画面の高さの80%をこの要素の高さに設定するという意味になります。これにより、どんなデバイスで見ても画面の大部分を占めるメインビジュアルを作成できます。
  • background-image: url("../img/main-visual.jpg");
    • 背景に表示する画像ファイルを指定します。url()の中に画像のパスを記述します。../は「一つ上の階層へ」という意味で、cssフォルダから一つ上の階層にあるimgフォルダ内のmain-visual.jpgを指定しています。
  • background-size: cover;
    • 背景画像が要素全体を完全に覆うように、画像の比率を保ったまま拡大または縮小します。画像の一部が見切れる可能性はありますが、要素内に余白が生まれることはありません。
  • background-position: center;
    • 背景画像を要素の中央に配置します。background-size: cover;と組み合わせることで、ウィンドウサイズが変わっても画像の中心部分が常に表示されるようになります。
  • color: #fff;
    • この要素の中にあるテキストの色を白（#ffffffの省略形）に設定します。暗い背景画像の上でも文字が読みやすくなります。

変更点: Flexboxでテキストを上下左右中央に配置

/assets/css/style.css
1 #main-visual {
2   height: 80vh;
3   /* ... */
4+  display: flex;
5+  align-items: center;
6+  justify-content: center;
7+  text-align: center;
8 }

CSSのFlexboxという機能を使って、メインビジュアル内のテキスト（先ほどdivで囲んだ.main-text）を上下左右の中央に配置しています。

  • display: flex;
    • 要素の子要素を柔軟に配置するための「Flexboxレイアウト」を有効にします。これを指定した要素（親要素）は「Flexコンテナ」となります。
  • align-items: center;
    • Flexコンテナの子要素を、縦方向（交差軸）の中央に揃えます。
  • justify-content: center;
    • Flexコンテナの子要素を、横方向（主軸）の中央に揃えます。
  • text-align: center;
    • テキスト自体を中央揃えにします。Flexboxはあくまで箱（.main-text）を中央に配置するだけなので、箱の中のテキストを中央揃えにするにはこの指定が必要です。

変更点: 要素を重ねるための基準点を設定

/assets/css/style.css
1 #main-visual {
2   /* ... */
3   justify-content: center;
4   text-align: center;
5+  position: relative;
6   color: #fff;
7 }

#main-visualにposition: relative;を追加しました。 これは、要素の配置方法を指定するpositionプロパティの一つです。relativeを指定すると、その要素自体は元の位置から動きませんが、子要素にposition: absolute;を指定した際の「基準点」として機能するようになります。 後ほど、この#main-visualの上に半透明の膜（オーバーレイ）を重ねるために必要な設定です。

変更点: 疑似要素で背景画像に半透明のオーバーレイを追加

/assets/css/style.css
1   color: #fff;
2 }
3 
4+#main-visual::before {
5+  content: "";
6+  position: absolute;
7+  inset: 0;
8+  background-color: rgba(0, 0, 0, 0.4); /* 黒の半透明オーバーレイ */
9+  z-index: 1;
10+}
11+
12 .main-text {

CSSの「疑似要素」という機能を使って、背景画像の上に半透明の黒い膜（オーバーレイ）を重ねています。これにより、背景画像の明るさに関わらず、上に乗る白い文字の可読性を高めることができます。

  • #main-visual::before
    • ::beforeは、指定した要素（#main-visual）の「内側の先頭」に、HTMLには存在しない架空の要素をCSSで追加する命令です。
  • content: "";
    • 疑似要素を機能させるためには必須のプロパティです。空でも良いので必ず記述します。
  • position: absolute;
    • 親要素（position: relative;が指定された#main-visual）を基準にして、絶対的な位置を指定します。
  • inset: 0;
    • top: 0; right: 0; bottom: 0; left: 0;をまとめて書いたものです。親要素の上下左右の端から0pxの位置に配置されるため、結果的に親要素全体に広がります。
  • background-color: rgba(0, 0, 0, 0.4);
    • 背景色を指定します。rgbaは色を赤(Red)、緑(Green)、青(Blue)と透明度(Alpha)で指定する方法です。rgb(0,0,0)は黒を意味し、最後の0.4が透明度（0が完全透明、1が不透明）を表しています。ここでは40%の透明度を持つ黒を指定しています。
  • z-index: 1;
    • 要素の重なり順を数値で指定します。数値が大きいほど手前（上）に表示されます。ここではオーバーレイの重なり順を「1」に設定しています。

変更点: テキストをオーバーレイの上に表示

/assets/css/style.css
1   z-index: 1;
2 }
3 
4+.main-text {
5+  position: relative;
6+  z-index: 2;
7+}
8+
9 .main-text h2 {

先ほど追加したオーバーレイの上にテキストが表示されるように、.main-textにスタイルを設定します。

  • position: relative;
    • z-indexプロパティを有効にするために、positionにstatic（初期値）以外の値を指定する必要があります。ここではrelativeを指定しています。
  • z-index: 2;
    • 重なり順を「2」に設定します。これにより、z-index: 1;が指定されたオーバーレイよりも手前（上）にテキストが表示されるようになります。

変更点: テキストの視認性を高める装飾を追加

/assets/css/style.css
1   z-index: 2;
2 }
3 
4+.main-text h2 {
5+  font-size: 36px;
6+  margin-bottom: 10px;
7+  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
8+}
9+
10+.main-text p {
11+  font-size: 18px;
12+  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
13+}

メインビジュアル内の見出し（h2）と段落（p）に、それぞれスタイルを追加して見た目を整えます。

  • font-size
    • 文字の大きさを指定します。
  • margin-bottom
    • 要素の下側の余白を指定し、見出しと段落の間にスペースを作ります。
  • text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
    • テキストに影を付けます。これにより、背景画像と文字色が似ていても、文字の輪郭がはっきりして読みやすくなります。値は左から順に「水平方向のオフセット」「垂直方向のオフセット」「ぼかしの半径」「影の色」を意味します。

変更点: 背景画像ファイルを追加

/assets/img/main-visual.jpg
1Binary files /dev/null and b/assets/img/main-visual.jpg differ

CSSのbackground-imageプロパティで指定するための画像ファイル（main-visual.jpg）が、/assets/img/フォルダ内に追加されました。

おわりに

今回は、背景画像とテキストを組み合わせたメインビジュアルの作成方法を学びました。Flexboxを使えば、要素を簡単に上下左右の中央へ配置できることをご理解いただけたかと思います。また、positionとz-indexで要素の重なり順を制御し、疑似要素によるオーバーレイやtext-shadowで文字の可読性を高めるテクニックも重要なポイントです。これらの基本を組み合わせることで、様々なWebサイトに応用できる魅力的なメインビジュアルを作成できるようになります。

【HTML/CSS】メインビジュアルの作成｜簡単なポートフォリオサイトの作成 | いっしー@Webエンジニア