Google Fontsの使用方法
-
Goole Fontsページへアクセス
-
使いたいフォント（ここでは「Noto Serif JP」）を検索して、選択します。
-
フォントの選択できたら右上の【Get font】をクリック
-
続けて【Get embed code】をクリック
-
「Embed code in the <head> of your html」の【Copy code】をクリックします。
-
コピーしたコードをVS Codeの作成するページのhtml内に貼り付けます。
-
ブラウザに戻って「Noto Serif JP: CSS class for a variable style」内の下記画像にある2行をコピーします。
-
コピーしたコードをVS Codeの作成するページのスタイルファイルのhtml{…}内に貼り付けます。
-
以上でサイトにフォントが適用されます。
塗りつぶし
背景の設定
要素に背景色や背景画像を設定します。
背景色:青
背景画像
背景画像
パターン画像：
背景パターン
background-sizeの設定例
- background-size: cover;
- 縦横比を保ったまま、余白が出ないよう表示領域全体を覆うように表示します
- background-size: contain;
- 縦横比を保ったまま、画像の全体が表示されます
- background-size: 200px auto;
- 横幅200px,縦幅は縦横比を保ったまま横幅に合わせて自動計算されます
- background-size: 50% auto;
- 縦幅は表示領域の50%,横幅は縦横比を保ったまま縦幅に合わせて自動計算されます
グラデーション
グラデーションで塗りつぶすにはbackgroundプロパティの値としてlinear-gradientで記述します。
書き方
background: linear-gradient([方向], [色 パーセント], …色パターンを順次記載…);
グラデーション
表示/非表示
displayプロパティを使ってコンテンツの表示非表示を制御することができます。
改行のPC/スマホ制御
下記のようなsp-onlyクラスを定義しておくことで改行の有無を切り替えできます。
