【CSS】画像の上に文字を重ねる〜背景画像を使う方法〜【day82】

HTML/CSS

プログラミング独学day82のアウトプットは?

今日は

・【CSS】画像の上に文字を重ねる〜背景画像を使う方法〜

をアウトプットします!

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。
2歳0歳の育児をしながら、22時〜1時に独学しています!

 

わかったことや、気付きをログに残します。
同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

【CSS】画像の上に文字を重ねる〜背景画像を使う方法〜

現在、クリ★スタさん(@cresta_design)のXDデザインカンプをお借りして、模写コーディングに励んでいます。(模写コードはこちらで公開中→haruのGitHub)

模写の中で出てきた、「画像の上に文字を重ねる」ときに背景画像を使う方法を新しく知ったのでアウトプットします。

 

今までの方法→positionを使う

今まで、画像の上に文字を重ねるといえば

<div> に画像と文字を入れて、
<div>→position: relative;
文字→position: absolute; を設定する

という方法を使ってきました。今までそれしか知りませんでした。

 

模写中に、わたしもこの方法でマークアップしていました。

x.com

PC版はこれでも問題ないのですが、スマホへのレスポンシブ対応でflexを縦表示にしようとすると途端におかしくなります;

設定していたabsoluteの位置が、縦表示になったことで崩れてしまうのです。

 

新たに知った方法→画像を背景画像として扱う

先ほどのツイートで出てきた画像3枚を、背景画像として扱ってみます。

 

まず、該当のHTMLです。
<ul><li>のリストの中に、重ねたい文字<a>があります。

 

次にCSSです。

まず、<ul class=”service__list”>をflexで横ならびにします。
この状態では、まだ<p>が3つ並んだだけです。

さらに、<li class=”service__item”>の横幅を33.3%にして、均等なBOXを画面いっぱいに並べます。

 

そのBOXの中に、それぞれ背景画像を設定します。 

※ちなみに、background-size: coverを記述することで、画像を「表示領域全体に広げる」ことができます。レスポンシブで画面サイズが変わったときに、自動で画像を伸縮させてくれます。

 

最後に、背景画像の上に表示させる<a>の設定です。

今回は、上下左右に中央配置をします。

左右→text-align: center

上下→line-height: 320px(画像のheight)を設定しました。

 

これで、きれいに表示されました。

absoluteで指定するよりもレスポンシブでいい感じです。

あとがき

relativeとabsolute以外の方法を知ることができました。背景画像も活用していこうと思います。

今回は以上です。

 

Thanks:師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら