更新日
#22 メインビジュアルを作ろう【ポートフォリオ作成】
1|HTMLとclass名を書いていこう
おさらい用の記事
動画内で書いたコード
現状の確認
以下のような見た目になっていればOKです。

2|WEBフォントを読み込もう
font-familyについて
font-family
は文字の種類を指定するプロパティです。
OSごとに使用できるフォントがあり、WindowsとMacでは共通のものもあれば、それぞれのOSでしか表示できないフォントもあります。
そのため、基本的にはどの端末でも同じフォントでの見た目になるように共通のフォントを使用するか、WEBフォントをインストールして同じ種類のフォントを使用することが多いです。
インストールしたフォントはfont-family : 'フォント名'
で適用させることができ、「,(カンマ)」で区切ることで複数のフォントを指定することが可能です。
動画内で書いたコード
3|CSSを書いていこう
動画内で書いたコード
一点動画内で間違いがありました

.mainvisual__link
(ページ内リンクのボタン)に対して
font-family: "Montserrat", sans-serif;
のフォントの指定することが漏れていました。上記の正解コードには追加してあるので追記をしてください。
動画内で解説したポイントまとめ
- 背景画像は
background-image
で読み込み、background-〇〇で背景に関する設定が可能 line-height
(行間)は文字の〇〇倍(120%)などで設定することが多い- 要素の角を丸くする場合は
border-radius
- 色の透明度をコントロールしたい時は
rgba
を使用する - インライン要素の特性を保ったままpaddingとmarginを効かせたいなら
display: inline-block
解説説記事はこちら→