【WEBデザイン学習記録】-2

【学習記録】-2　24.6.28

今日は二時間ほど学校の教材でCSS基礎を復習しました！

\明日すること/
・残りの動画教材の視聴＆まとめ
・コーディング課題①のCSS→提出！
・コーディング課題②のHTML/CSSをざっと書く
・お手伝いしているポスター作り
・LP課題の続き→提出！

さぁ、明日一日でどれぐらい進むかな。。。

・font-familyの指定方法①
フォントファミリー名は、クォーテーションに入れる
 body{
     font-family: “MS Pゴシック” ;
}

・font-familyの指定方法②
総称フォント名はクォーテーションでは囲わない
body{
     font-family: san-serif ;
}

・font-familyの指定方法③
複数指定の場合は、カンマ切りで指定する
body{
     font-family: “Arial”, “メイリオ”, san-serif ;
}

・font-familyの指定方法④
複数指定の場合は、前に書いた後フォントが優先的に反映される
body{
     font-family: “Arial”, “メイリオ”, san-serif ;
}

・文字の太さを設定
font-weight

・行間を空ける
line-height; (デフォルトは1) →【2】は文字が一文字分空く、小数点でも設定できる

・文字間隔を空ける
letter-spacing: 〇em(px)→【em】で設定することが多い、小数点でも設定できる

・英字の頭文字のみ大文字にする
text-transform: capitalize ;
・英字のすべてを大文字にする
text-transform: uppercase ;

・テキストに下線
text-decoration: underline ;
・テキストに打消し選（値段に使う場合が多い）
text-decoration: line-through ;

・text-shadow: オフセット・ぼかし・色
　text-shadow: 10px 10px #aaa

・background-color: rgb(234, 172,172 0.6←透明度)

・背景の画像の指定方法
background-image: url(画像のパス)
・背景の画像のリピート
background-repeat: repeat;
background-repeat: repeat-x;　横方向にリピート
background-repeat: repeat-y;    縦方向にリピート
background-repeat: no-repeat;  一枚で表示させたい場合

・背景のポジションを設定する
background-position
・背景のサイズを設定する
background-size: contain(100%) ;  ブラウザの幅に合わせて縮む
background-size: cover ;  ブラウザの幅に合わせて縮まないが100％で表示される