あくまでも私の備忘録です
@charset “UTF-8”;
body {
background-color: #fffeee;}
h1 {
color: #00bbdd;}
p {
font-size: 20px;}
ルールとして、
ｈ1｛ ←どこの （セレクター
color: #00bbdd;} ← 何を （プロパティ
color: #00bbdd;} ← どうするのか （値
各項目改行したけど、一行でしてもOKらしい
小文字、；（セミコロン） 単位は何か 基本
●cssコードを読み込ませる
猫の一日
ひたすら寝ています
●要素の中の要素に読み込ませる
div p のまんまる子猫
のんびり小猫
div p {color: #dd0000;}
指定した個所の色など他と変えたいとき HTMLに＜div p＞ cssへも div p {color: #dd0000;} をつける
フォントの設設定
html {font-size: 100%;}
h1 {font-size: 2rem;}
h2 {font-size: 20px;}
p {font-size: 14px;}
/* フォントファミリーの設定 */
h1 {font-family: serif;}
h2 {font-family: “游ゴシック体”,”Yu Gothic”,”YuGothic,sans-serif”;}
p {font-size: “ヒラギノ丸ゴ pro W4,Hiragino Maru Gothic Pro,sans-serif”;}
フォントは、３種類まで 装飾系のフォントは使用を避ける
フォントの太さは、「fotnt-weight」プロパティ」
ｐを太くしたかったら
p {font-weight: bold}
＜行間設定１．７(1.5-1.9内で)に変更＞デザインによって調整
p {line-height: 1.7;}
文章をそろえよう「text-againプロパティ」
p {text-align: justify;}両端がきれいになる
p {text-align: left;} 右はガタガタと不揃い
Webフォントを使おう
Google で、「m plus rounded 1c」検索
<link rel=”preconnect” href=”https://fonts.googleapis.com”>
<link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin>
<link href=”https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap” rel=”stylesheet”>
↑コードを取得して、ｈｔｍｌに追加（ウェイト700用）
↓CSSに追加
/* Webフォントの設定 */
h2 {
font-family: “M PLUS Rounded 1c”, sans-serif;
font-weight: 700;
font-style: normal;
}
●cssコードを読み込ませる
猫の一日
ひたすら寝ています
＜行間設定１．７(1.5-1.9内で)に変更＞
柔軟で高い身体能力、優れた五感、独立心の強さ、そして多彩なコミュニケーション能力です。
体が非常に柔軟で、狭い場所への出入りや高い場所への昇り降りが得意です。
また、鋭い視覚、聴覚、嗅覚を持ち、特に暗闇での視力や高周波音の聴覚に優れています。
独立心が強くマイペースな性格である一方、飼い主への愛情表現も見せます。
●要素の中の要素に読み込ませる
div p のまんまる子猫
のんびり小猫