勉強記録 ~プログラマーへのいばら道~ progate:HTML&CSS中級編(1)

プログラマー転職を目指す、progateでのお勉強記録。

今回は、HTML&CSS中級編の復習その1となります。

内容は【<header>と<footer>、背景画像を指定する、背景画像の大きさを指定する、

要素を中央に配置する、要素を透過させる、文字の間隔を指定する】です。

1.<header>と<footer>

 <div class="header">と<div class="footer">のような、ヘッダーとフッターのための

 タグは非常によく使われるので、HTML5は<header>と<footer>というタグが用意さ

 れている。<header>と<footer>を使うほうが一般的である。

2.背景画像を指定する

 CSSで背景画像を指定するには、background-imageプロパティを用いる。

 background-image: url(画像のurl)の様に使う。

3.背景画像の大きさを指定する

 background-imageで指定された背景画像は、表示範囲を埋め尽くすまで繰り返し表

 示される性質がある。background-image: cover;を指定すると、1枚の画像で表示範囲

 を埋め尽くすように画像の大きさが拡大縮小される。

4.要素を中央に配置する

 containerクラスを中央に寄せるためには、marginの左右にautoを指定する。

 marginにautoを指定するときは、必ずwidthを合わせて指定する。

 なお、上下のmarginにautoを指定することはできない。

5.要素を透過させる

 opacityプロパティを使用すると、要素を透明にすることができる。

 透明度は0.0(完全に透明)~1.0(完全に不透明)の数値で指定する。

6.文字の間隔を指定する

 letter-spacingプロパティを用いることで、文字の間隔を指定することができる。

 指定する際には数値にpxをつける。

 

ということで、本日はここまで。

次回は「HTML&CSS中級編」の2回目の復習を記録します。 

 

ご一読を頂きまして、有り難うございました。