勉強記録　～プログラマーへのいばら道～　progate：HTML&CSS中級編（４）

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

内容は【アニメーションをつける、行間を指定する、line-heightと縦の中央寄せ、<a>

タグをクリックする範囲、文字の太さを指定する】です。

　transitionを使うとアニメーションをつけることができ、「変化の対象」や「変化にか

　かる時間」などを指定することができる。「変化の対象」にはcolorなどのプロパティ

　を指定するが、allを指定するとすべてのプロパティに適用できる。

　transitionは多くの場合hoverと組み合わせて使用する。

　line-heightプロパティを使うと、行の高さを指定することができる。値が大きいほど

　行間が大きくなる。

　line-heightプロパティは本来、行間を調整するためのプロパティですが、要素の縦方

　向の中央に文字を配置することにも使える。

　line-heightプロパティの「高さの中心」に文字が配置されるため、要素の高さとline-

　heightプロパティを同じ値にすると、文字がちょうど中央に配置されるようになる。

　<a>タグはインライン要素なので、中身のテキストの部分しか大きさを持たない。こ

　の結果、<a>タグをクリックできる範囲はテキストの部分だけになってしまう。

　<a>タグをブロック要素にすると、大きさが親要素一杯に広がるので、全体をクリッ

　クできるようになる。

　font-weightプロパティを用いると文字の太さを指定することができる。normalまたは

　boldを指定する。<h1>～<h6>の要素は初期状態でfont-weight: bold;となっているの

　で、font-weight: normal;と指定すれば文字が細くなる。

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

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

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