さて今回は、メイン画像の中にh1タイトルを表示させるように、CSSを書いてみましょう。
タイトルを表示させるだけでなく、テキストのみ背景に黒の透明色を入れ、少し装飾を加えていきます。
完成イメージはこんな感じです。
背景画像とタイトルを入れるエリア
HTMLでは、背景画像を埋め込むエリアと、テキスト表示させるエリア、2つの要素をつくりました。
|
1 2 3 |
<div class="main"> <h1>メインタイトル</h1> </div> |
シンプルにdivの中にh1を入れました。
見た目はまだこんな感じですね。
CSSで埋め込みとテキスト装飾
続いてCSSで、レイアウトを調整しました。
コードを一気に見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.main { width: 100%; padding: 75px 0; margin: 0; background-image: url(../img/main.jpg); background-position: center; background-size: cover; text-align: center; } h1 { display: inline-block; margin: 0; font-size: 1.5em; color: #ffffff; padding: 0 20px; background-color: rgba(0, 0, 0, 0.25); text-shadow: 1px 2px 3px #000000; } |
埋め込んだ背景画像は、横いっぱいの100%表示にしています。
h1タイトルの要素は横いっぱいに広げたくないので、display:inline-blockを設定。
テキスト背景の要素には、ブラックの透明色を使いました。
これは、background-colorに「rgba」を使います。
background-color: rgba(0～255, 0～255, 0～255, 透明度);
RGB値でカラー指定して、最後は透明度を少数で書きましょう。
そしてここで一番気をつけたいのが、text-align:center;を書く場所。
子要素のh1でインラインブロックに変換しているため、text-alignは親要素に書きましょう。
これでh1テキスト中央に揃ってくれました。
