訓練日誌2024/1/19（CSSについて）
目次
- CSSについて
CSSについて
▪️マークアップ
コーディングしていくということ （CSSを書いていくということ）
▪️書き方
書き方は3通りある
①別でCSSファイル作成
②HTMLのheadに直接入力
③HTMLの装飾したい箇所に直接入力
※②と③は変更があった場合、すべてのページの修正が必要なため①を推奨。
▪️優先順位
①〜③全てに入力があった場合
③→②→① の順で優先される
※下に書いてあるものの方が優先される
▪️点数の計算
style属性 <p style=“…”> 1000点
idセレクタ #id名{} 100点
全称セレクタ *{}0点
など点数がついている
点数高い方が優先される
※idセレクタはあまり使用しない方が良い
※style属性は最終手段として使用する
▪️呼び方
p(どこの)をセレクター
color(何を)をプロパティ
orenge(どうする)を値
HTMLでid→CSSでは#id (#を付ける)
HTMLでclass→.class (.を付ける)
どちらも半角不要
▪️CSSの基本的な書き方
下記はマストで必要
@charset “UTF-8”;
/* CSS Document */
例)
@charset “UTF-8”;
article{
color:red;
don’t-size: 200%;
text-along: center;
}
※セミコロン(;)は終わりの意味 毎回つける
非表示にする時→文の前後に/*………..*/と打つ
▪️単位
pxピクセル
%
em：フォントの大きさに使用 1emが100%
rem：フォントの大きさに使用
vw：画面の表示幅 50vwだと半分になる
vh: 画面の表示高さ
calc関数：計算式(単位が違っても計算してくれる)
▪️色の指定
5パターンあり
①色のスペル打つ
②16進数 #0000など
③egg/rgbn関数 rgba(255,102,0,0.8)など
④hsl関数 hsl(360,60%,50%)
⑤グラデーション linear-gradient(red,lime,blue)など
③④のaは不透明色を入れる時に使う
▪️ボックスモデル
content,padding,border,marginの4つの領域を持っている
