お電話でのお問い合わせ
電話をかける
電話をかける メニューボタン
学習コンセプトカリキュラム・料金教室紹介無料体験授業

フタバゼミ
ゼミノート

【CSS】メイン画像の中に見出しテキスト

さて今回は、メイン画像の中にh1タイトルを表示させるように、CSSを書いてみましょう。

タイトルを表示させるだけでなく、テキストのみ背景に黒の透明色を入れ、少し装飾を加えていきます。

完成イメージはこんな感じです。

背景画像とタイトルを入れるエリア

HTMLでは、背景画像を埋め込むエリアと、テキスト表示させるエリア、2つの要素をつくりました。

シンプルにdivの中にh1を入れました。

見た目はまだこんな感じですね。

CSSで埋め込みとテキスト装飾

続いてCSSで、レイアウトを調整しました。

コードを一気に見ていきましょう。

埋め込んだ背景画像は、横いっぱいの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テキスト中央に揃ってくれました。