学習ログ〜CSS〜
本日の学び
1.CSSと文字の色
2.文字の大きさと種類
3.横幅、高さ、背景色
4.タグに名前をつける
1.CSSと文字の色
CSS
・レイアウト(色・大きさ・配置)を整えるための言葉
・HTMLで用意した要素に対して
《どこの》《何を》《どうするか》を指定することができる
例)
HTML
<h1>prorate</h1>
⬇︎
CSS
h1{
color: red;
}
h1要素の(どこの)、color(何を)を、赤色(red)にする。
※対象の要素名をセレクター、変更項目をプロパティという
colorプロパティ
color: #ff0000 ; 16進数のカラーコードで色を指定する
※主要カラーは、コード打たず《red》で指定できる
CSSのプロパティの末尾はコロン(:)、行末はセミコロン(;)
2.文字の大きさと種類
font-size: 文字の大きさpx;
・文字の大きさを指定する
・px(ピクセル)を用いて指定する
・フォントの種類指定可能
font-family:フォント名:
・フォントの種類指定
・フォント名にスペースがある場合は、
font-family:"フォント名": ダブルクォーテーションで囲む
font-familyの種類
明朝体
・serif
・YuMincho
ゴシック体
・sans-serif
・Lucida Grande
3.横幅、高さ、背景色
background-color: #ddddd ;
・背景色のプロパティ
・色の指定はcolorと同様
・#ddddddは#dddに省略可
width: 数値px; 横幅のプロパティ
height: 数値px; 高さのプロパティ
4.タグに名前をつける
class
これをつけることによって、それぞれの要素を識別し、
別々のCSSを適用することができる。
1つのリスト要素に色をつけた場合どのように表したらいいのか?
HTML
<li class-"selected">HTML</li>
CSS
.selected{
color: red;
}
※classの場合は、ドット(.)が必要、タグの場合は必要ない
※selectedが1つのリスト要素に色をつけてくれるclass名
※ドットを付けることで、selectedと云うclass名がつている全てのHTML要素に同じCSSが適用される
本日のまとめ
CSSでは沢山のタグがでてきた。
color
font-size
font-family
background-color
width
height
class
selected
まずはこれらを何回もコードを書きながら覚えていかなければならないな。
ノートに書くだけ、記録するだけではなく実際コードを入力して体に染み込ませようと!
私は、英語が苦手なので変な良い方で覚えたいと思います!
次回までにクリアにすること・・・classについて
classを理解するの少し時間がかかったので、他に参考になる記事や書籍を読もうと思います。