【HTML,CSS基礎】②画像の中央に文字をのせる

こんにちは、Mac大好きです！Macが大好きで、HTML、CSS、JavaScript、Pythonなどでプログラミングをして遊んでいます。

今日は、駆け出しエンジニアの方向け「Web制作の基礎学習」をやっていきます。「Progateの復習」に見てみて下さい。

画像の中央に文字をのせる

HTML

・画像と文字をひとつのdivタグで囲み、classをつけておく。

CSS

・全体のサイズ（divのサイズ）を指定する。

・divに「background-image」を指定する。

・画像の縦横比を保持したまま一枚の画像を使うためには「background-size」に「cover」を指定する。

・「text-align」で文字を中央に配置する。

・「line-height」で行の高さを指定する。※divタグの「height」と同じにする。

以上です。

これからも「プログラミング初心者向け」に簡単なコードをご紹介していきます。「Progateの復習」に使ってみてください。一緒にプログラミングを楽しんでいきましょう！よろしくお願いします。