学習ログ〜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が１つのリスト要素に色をつけてくれるclass名
※ドットを付けることで、selectedと云うclass名がつている全てのHTML要素に同じCSSが適用される

本日のまとめ

CSSでは沢山のタグがでてきた。

color
font-size
font-family
background-color
width
height
class
selected

まずはこれらを何回もコードを書きながら覚えていかなければならないな。
ノートに書くだけ、記録するだけではなく実際コードを入力して体に染み込ませようと！　

私は、英語が苦手なので変な良い方で覚えたいと思います！

次回までにクリアにすること・・・classについて

classを理解するの少し時間がかかったので、他に参考になる記事や書籍を読もうと思います。