ブラウザで表示されない
フッターのCSSで、▼のリスト表示をするコーディング。
Codestepでの正解は、
#footer ul.about-list .arrow::before {
content: ”;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 0 6px 8px;
border-color: transparent transparent transparent #333;
position: absolute;
top: 50%;
left: 0;
margin-top: –6px;
}
#footer ul.about-list .arrow {
position: relative;
display: inline-block;
padding-left: 12px;
color: #333; }
私のブラウザでは、「表示されない！！」なぜ？
→自分の頭で考える。
今までの学習を総合的に判断。
自分でも言葉ではまだ説明ができないけど、
「display:flex;」
にすると、表示された。（やった！）
あとは、CSSで
main {
width: 65%;
}
main article {
margin-bottom: 80px;
}
main .article-title {
font-size: 1.5rem;
margin: 10px 0 15px 0;
}
こんな風にarticleタグもmainタグもそのまま指定できるのが驚きだった。（←初心者感満載★）
SASSA Shop