positionプロパティを使って、要素の重ね合わせをを解説していきます。
例として今回は画像の上にテキストを重ねて表示してみます。
初心者向けの解説ですので、分かる範囲は飛ばして読んで下さい。
前準備
画像を前もって準備してHTMLファイルを事前に記述しておきました。
画像
画像情報
ファイル名：pakupakutop.jpeg
大きさ：640 × 427
HTML
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”image-box”>
<img src=”pakupakutop.jpeg” alt=”クローバー”>
<h1>ぱくぱくのCSS講座</h1>
</div>
</body>
</html>
ブラウザ表示
画像の上にテキストを重ねて表示する
それでは画像の上にテキストを重ねていく手順を解説します。
画像の大きさを調整する（widthとheight）
まず画像が入っている親要素の大きさを指定します。
img要素の親要素はdiv要素である『image-box』ですね。
この要素に『横幅（width）』と『高さ（height）』を使って大きさを指定していきます。
今回は指定する大きさは横幅＝500px、高さ＝300pxとします。
CSS
.image-box{
width: 500px;
height: 300px;
}
親要素の大きさの指定が終わったら、画像の大きさを指定しましょう。
ここでのポイントは、先程指定した親要素の中いっぱいに画像を表示することです。
それでは、どのように記述すれば良いのでしょうか。
答えは。。。
CSS
.image-box{
width: 500px;
height: 300px;
}
img{
width: 100%;
height: 100%;
}
イメージは湧きますか？
これは親要素で作られたブロックの大きさ内で横幅、高さ共に『100%で表示する』という意味になります。
ここまでの指定でブラウザ上でどの様に表示されるか確認してみましょう。
画像が小さく表示されたことが分かりますね。
文字を画像の上に表示する（position:）
今回は画像が増えても『絶対的に同じ位置』に文字を表示したいと思っています。
そこで前回の復習になりますが、文字要素部分であるH1要素に『position: 』で絶対値を指定する『absolute;』を記述します。
CSS
.image-box{
width: 500px;
height: 300px;
}
img{
width: 100%;
height: 100%;
}
h1{
position: absolute;
}
そして次にこのH1タグをどの要素に対して絶対値を指定したいかを記述します。
今回は『image-box』上で絶対的な場所に文字を指定したいので、この要素へ『position: 』を使って相対値を指定する『relative;』を記述します。
CSS
.image-box{
width: 500px;
height: 300px;
position: relative;
}
img{
width: 100%;
height: 100%;
}
h1{
position: absolute;
}
そして画像上の絶対的位置を指定します。
今回は画像上の上部に表示したいと考えています。
そこで画像上のtopトップは上部から『0』の位置に指定します。
CSS
.image-box{
width: 500px;
height: 300px;
position: relative;
}
img{
width: 100%;
height: 100%;
}
h1{
position: absolute;
top: 0;
}
更にmarginを『0』と指定します。
これはブロック要素内のデフォルト値を一度リセットする為に指定しておくものです。
.image-box{
width: 500px;
height: 300px;
position: relative;
}
img{
width: 100%;
height: 100%;
}
h1{
position: absolute;
top: 0;
margin: 0;
}
それではここまでをブラウザで確認してみましょう。
画像の上に文字が配置されたことが分かります。
また配置された文字は余白無しの左上に配置されました。
文字位置をセンターにする
次に文字の位置をセンターにします。
この方法には文字の要素であるH1タグに対して『text-align: center;』を使用します。
そしてどの領域でセンターにするか指定する必要もありますので、H1要素の横幅=100%と指定しておく必要があります。
ではH1要素の横幅＝100%とはどの大きさに対して100%となるのでしょうか。
前提としてH1要素は、親要素（今回でいうとdiv）を引き継ぎます。
画像の横幅はdiv要素（親要素）と同じ大きさで指定したので、H1要素は画像の横幅と同じとなった訳です。
CSS
.image-box{
width: 500px;
height: 300px;
position: relative;
}
img{
width: 100%;
height: 100%;
}
h1{
position: absolute;
top: 0;
margin: 0;
text-align: center;
width: 100%;
}
それではブラウザで確認してみましょう。
文字がセンターに配置されたことが分かります。
文字の背景を透過した色で指定する
今度は文字の背景を白の透過色で指定します。
これに都合の良い方法は『background-color:』を『rgba』で指定することです。
rは（赤）レッド、ｇは（緑）グリーン、ｂは（青）ブルー、aは透過を表します。
これはRGBをそれぞれ数字で指定することで、それぞれの色を混ざり合わせて色を表示させる方法です。
そして透過ですが、数値＝１だと無透明で表示されますが、１より小さい数値で指定することで色が透明化していきます。
CSS
.image-box{
width: 500px;
height: 300px;
position: relative;
}
img{
width: 100%;
height: 100%;
}
h1{
position: absolute;
top: 0;
margin: 0;
text-align: center;
width: 100%;
background-color: rgba(255,255,255,0.7);
}
それではここまでの内容をブラウザで確認してみましょう。
文字の背景が白の透過された背景に指定できました。
おまけ（margin）
以下の様にHTMLを記述しましょう。
Div要素の内容を２つコピーしています。
HTML
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<div class=”image-box”>
<img src=”pakupakutop.jpeg” alt=”クローバー”>
<h1>ぱくぱくのCSS講座</h1>
</div>
<div class=”image-box”>
<img src=”pakupakutop.jpeg” alt=”クローバー”>
<h1>ぱくぱくのCSS講座</h1>
</div>
<div class=”image-box”>
<img src=”pakupakutop.jpeg” alt=”クローバー”>
<h1>ぱくぱくのCSS講座</h1>
</div>
</body>
</html>
この内容をブラウザで確認しましょう。
先程作った画像が並びました。
この様にpositionを使って重ねられた文字は、画像が増えても必ず同じ場所に配置されます。
しかし画像同士がくっついていつので、少し間隔を空けましょう。
CSS
.image-box{
width: 500px;
height: 300px;
position: relative;
margin: 5px;
}
img{
width: 100%;
height: 100%;
}
h1{
position: absolute;
top: 0;
margin: 0;
text-align: center;
width: 100%;
background-color: rgba(255,255,255,0.7);
}
それではブラウザで確認しましょう。
いかがでしょうか。
画像同士の隙間が空いて、見易くなりましたね。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
