HTMLとCSSで画像の上に要素を配置する

ウェブアプリケーションの作成にあたって、背景画像に写真を使いたかったため以下の手順で実装しました。

画像と文字を配置する
相対位置と絶対位置について理解する
画像の上に文字を配置する(絶対位置と相対位置の設定をする)
画像の上に要素を配置する(絶対位置と相対位置の設定をする)

画像と文字を配置する

まずは、画像を文字のあるhtmlのページを作成します

まずは画像と文字を配置する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <img src="sample01.jpg" >
  <p>サンプル文字</p>
</body>
</html>

相対位置と絶対位置について理解する

相対位置と絶対位置についての説明をする前に、下記のような記述ができれば、相対位置や絶対位置について学習せずとも背景に画像が適用ができます。

できそうでできない、、、

<img src="sample01.jpg" >
  <p>サンプル文字</p>
</img>

しかし、imgタグは開始タグと終了タグを分けて記述することができません。
そのため、配置する位置関係を工夫することで背景に画像を適用します。
まずは、相対位置(relative)と絶対位置(absolute)についての理解が必要です。

相対位置(relative)・・・

　自分と同じ階層にある要素に対し、一つ前にある要素の左下を始点とし、どう配置するのかを決める方法

絶対位置(absolute)・・・

　配置されている要素に関係なく、そのページの一番左上を始点とし、どう配置するのかを決める方法

デフォルトでは、相対位置での記述になっています。
そのため、上記のhtmlの構成ではの次に

があるため、位置関係として写真の左下を始点とした文字がその下に表示されているという関係になります。そこで、絶対位置を用います。

を絶対位置で画像の上に当たる場所に配置することで実装します。

画像の上に文字を配置する(絶対位置と相対位置の設定をする)

に対して「backgroundImage」クラスを指定

に対して「onImage」クラスを指定

html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <img src="sample01.jpg" class="backgroundImage" >
  <p class="onImage">サンプル文字</p>
</body>
</html>

指定したクラスを実装する
「backgroundImage」については、上下左右を画面一杯に表示する設定
「onImage」については、絶対位置を適用し、画面左上からどこの位置に文字を表示するかの設定

style.css

.backgroundImage {
  width: 100%;
  height: 100%;
}
.onImage {
  position: absolute;
  top: 0%;
  left: 0%;
}

画像の上に要素を配置する(絶対位置と相対位置の設定をする)

これで、画像の上に文字を表示できるようになりました

しかし、このままでは下記のように画像の上に表示したい要素が増えた場合に、onImageを下のクラスにも適用すると、サンプル文字と追加文字に対して「top:0,left:0」が適用されてしまい、同じ場所に文字が表示されてしまうため、綺麗に表示できません。

綺麗に表示できない、、、

<img src="sample01.jpg" class="backgroundImage" >
<p class="onImage">サンプル文字</p>
<p class="onImage">追加文字</p>

そこで、親要素と子要素の関係を利用します。
親要素には絶対位置としての情報を付与し、子要素では相対位置を利用するといったものです。
実際のコードとしては以下のようにします。

親要素と子要素の関係性を利用

<img src="sample01.jpg" class="backgroundImage" >
<div class="onImage">
  <p>サンプル文字</p>
  <p>追加文字</p>
</div>

の親要素である

では絶対位置が指定されているためそのタグで囲まれている

はともに画像の上に表示ができ、

同士は相対位置で表示されるため綺麗に表示ができるというわけです。あとは要素を中央に寄せたり、余白をつけたりと通常通りのcssの記述方法に則り記載します。