100日後にWebサイト作れるようになる納富 vol.2

今日はトップページの作成を途中までしました。
残り94日。

課題1：aタグの下線　青文字が消えない
原因：親要素にtext-decoration: none;を指定していた。
解決策：aタグに直接指定
参照元：https://note.com/stst_esty/n/nbb34e88c5ef4

修正前

.menu-item {
    list-style: none;
    display: inline-block;
    padding: 10px;
    color: black;
    text-decoration: none;
}

修正後

.menu-item a {
　　　　text-decoration: none;
　　　　color: black;
}

課題2：margin: 0 auto;が効かない
原因：widthを指定していないから
解決策：結局、上下中央寄せにしたかったのでdisplay: flex;で作成
参照元：https://knowledge.cpi.ad.jp/tech/169/

修正前

.maintheme {
    padding: 20px 0;
    margin: 0 auto;
    font-size: 50px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

修正後

.maintheme {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    margin: 0 auto;
    font-size: 50px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

課題3：トップの画像の表示位置をいい感じにしたい
方法：未解決（object-fitかobeject-position？）

続きはまた今度。