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

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

内容は【ボタンを作る、インラインブロック、display、複数クラスの指定、カーソルを乗せた時に色を変える、ボタンを角丸にする、テキストを中央に寄せる、「margin :auto 0」と「text-align: center」】です。

　ボタン部分を作る際、ボタンは<a>タグで指定する。

　しかし<a>タグはインライン要素であり、インライン要素にはwidthやheightが指定で

　きない。これを解決する方法がインラインブロック要素への変更である。

　ブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というもの

　がある。インラインブロック要素はインライン要素と同様に横に並ぶが、ブロック要

　素の様に幅や高さを持つ。

　<a>タグは初期状態でインライン要素になっているが、displayプロパティを使うと、　

　インラインブロック要素に変更することができる。

　displayプロパティはblock（ブロック要素）・inline-block（インラインブロック要

　素）・inline（インライン要素）を指定することができる。

　ボタンの様に「共通の部分があるが、それぞれ小さい変化をつけたいとき」にはクラ

　スの名前を複数指定すると便利である。

　<div class="btn green"><div class="btn pink">の様に、半角スペースで区切ると複数

　のクラスを指定することができるようになる。

　カーソルが乗ったときの状態をhoverという。CSSでセレクタ：hoverとすることで、

　カーソルが乗ったときのCSSを指定することができる。

　角を丸めるには、border-radiusプロパティを用いる。

　数字が大きいほど、角が丸くなる。

　text-alignプロパティを用いることで、テキスト等のインライン要素やインラインブロ

　ック要素の配置を指定することができる。

　leftで左寄せ、centerで中央寄せ、rightで右寄せに設定することができる。

　要素を中央寄せする方法として「margin: 0 auto;」と「text-align: center;」を学んだ

　が、この2つの違いを整理する。

　containerクラスのように広い範囲を囲うようなブロック要素の場合はmarginを、テキ

　ストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを

　使うようにする。

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

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

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