バナー

この教材は「ギャクサン」というWeb制作学習カリキュラムの一部です。

はじめての方はこちらからご覧ください👉

更新日

#22  メインビジュアルを作ろう【ポートフォリオ作成】

web兄さん

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解説説記事はこちら→