Webデザイナーブログから学ぶホームページ制作

画像や写真の上に文字やアイコン、ボタンをのせる場合は、HTMLとCSSのみで設定することができます。
CSSで設定する場合は、「position」プロパティを使うことで画像や写真の上に文字やアイコン、ボタンを重ねて配置できます。

今回は、CSSで画像や写真の上に文字やアイコン、ボタンを重ねて配置する方法を解説します。

CSSで画像や写真の上に文字やアイコン、ボタンを重ねて配置する場合は「position」プロパティで配置します。

文字やアイコンを配置する為に少し暗めの画像を用意します。

<div class="box1">
<img src="/img/test.jpg">
</div>

画像の上に配置する文字を記述します。この時、配置する文字は1つのdivの中に配置します。
※pタグやtitleタグを配置しても問題ありません。

<div class="box1">
<img src="/img/test.jpg">
<p>文字を配置</p>
</div>

.box2 {
  width:500px;
  height:auto;
  margin:auto;
}
.box2 p{}

配置した画像と文字に「position」プロパティを設定して画像と文字を重ねます。
親要素である「div」に対して「position:relative」を記述し、子要素である文字の入った「p」タグに「position:absolute」を記述します。
ここで「position:absolute」を使用するので「top」「bottom」「left」「right」で配置を指定します。
親要素、子要素に「position」プロパティを設定すれば完了です。

<div class="box1">
<img src="/img/test.jpg">
<p>文字を配置</p>
</div>

「position」プロパティを使う事で重ねる文字の位置を「top」「bottom」「left」「right」で指定をします。
文字の位置を変更したCSSを紹介します。

文字を右下に配置する場合は、「bottom」「left」で指定をします。

.box4 {
  position:relative;
  width:500px;
  height:auto;
  margin:auto;
}
.box4 p{
  position:absolute;
  bottom:30px;
  right:30px;
  color:#FFF;
}

文字を中央に配置する場合は、「top」「left」を50%に指定をします。
「transform: translate」プロバティを利用して縦横の文字分のズレを補正します。

.box5 {
  position:relative;
  width:500px;
  height:auto;
  margin:auto;
}
.box5 p{
  position:absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  color:#FFF;
}

「position」プロパティとは、要素に対して基準となる位置から配置する位置を指定する時に用いるプロバティです。

「position」プロパティは、Webサイトの自由度を高めたプロバティのひとつです。
「position」プロパティを知っておくだけでWebサイトの自由度も増し、今まで出来なかったことも出来るようになります。色んな使い方はあると思いますが、使う事でデザインの幅が広がるので使い方は覚えておきましょう。