今日学んだこと:
１．width,heightの絶対値とパーセンテージ指定を上手く使い分ける
　⇒絶対値を使うとレスポンシブ対応の時困る場合がある

２．flex-boxについて
　⇒display : flexの時、親要素は子要素の大きさに依存する

３．figma (Fill / Fixed / Hug)
　⇒Fillは親要素いっぱいに広げる / Fixedは固定サイズ / Hugは親要素が中の子要素のサイズに合わせる（paddingなど）

今日学んだこと:
buttonクラスにはデフォルトでボーダーがついている。

メリット：
ユーザーがクリックできる部分などをわかりやすくできる。

デメリット：
ボーダーがあることで画面サイズが変わるとレイアウトが崩れたり、デザインが動的に調整されない場合がある。
追加で装飾する場合、ボタンや入力フィールドがデザイン的に過剰に装飾されることがある。

cssでimgを非表示

以下のコードでimgをhoverしたときだけimgを表示させたい...

-html-
<div>
    <img>
</div>

-css-
div{
    display: inline-block;
}
div:hover img {
    ??????
}
img{
    height: 20px;
    width: 20px;
}

imgを非表示にするにはいくつか方法があります。

１つ目の方法は display:none; を用いる方法です。
しかしこの場合、imgはコンポーネント自体が消えてしまうため、hoverを適用できなくなってしまいます。
２つ目の方法は　visibility: hidden; を用いる方法です。
この場合、imgのサイズが保たれたまま非表示にすることが出来ます。

補足：hover領域を明示するために

画像が非表示になっていると、どこにマウスを置けば表示されるのか分かりづらくなります。
そのため、以下のようにdivにボーダーをつけておくと、hover可能な領域が分かりやすくなります。

div {
    display: inline-block;
    border: 2px solid red;
}