HTML/CSS_ll ボタン - Study record

Progate「HTM &CSS中級編」ボタン作成時に覚えておきたいポイントがあったのでメモしておく。

インライン要素

aタグなど
width・height：指定できない
margin・padding：左右のみ指定できる
配置：横並び

ブロック要素

width・height：指定できる
margin・padding：指定できる
配置：縦並び

インラインブロック

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

width・height：指定できる
margin・padding：指定できる
配置：横並び

display

 aタグは初期状態でインライン要素になっているが、displayプロパティを使うと、インラインブロック要素に変更することができる。
displayプロパティはblock（ブロック要素）, inline-block（インラインブロック要素）, inline（インライン要素）を指定することができる。

クリック時にボタンがへこんで見えるようにする

box-shadowを noneにする
position: relative;と topによって影の分だけ位置を下げる

/* messageクラスのボタンをクリック時にへこんで見えるように */
.message:active{
  box-shadow:none;
  position:relative;
  top:7px;
}