プログラマーマの記録

プログラミングを学び、自宅にいながら稼ぐ!プログラマーを目指すママの毎日の記録☆

超基本!初心者でもわかるCSSの基本

CSSの基本を学ぶ

f:id:asktky03:20210412163643p:plain

HTMLの次はCSSの基本を学んでいきましょう!

CSSとは?

HTMLの要素に対して色、大きさ、配置などを指定し、ページをデザインするための言語。

CSSを使うと色やレイアウトを整えられる。

CSSにふれる

CSSはHTMLとは別ファイルに記述する。

HTMLで用意した要素に対して、CSSを使って「どこの」「何を」「どうする」かを指定することができる。

 

この時「どこの」の部分をセレクタ

「なにを」の部分をプロパティという。

f:id:asktky03:20210412164458p:plain

↑画像の説明で、最後に } をつけ忘れました…。

文字の色を変える

「color: #dd000;」のようにカラーコードで色を指定。

主要な色はredなどのように指定ができる。

※カラーコードは覚えなくて良い。

f:id:asktky03:20210412164745p:plain

CSSを書く時の注意

CSSを書く時もインデント(字下げ)をする。

また、CSSのプロパティの末尾にはコロン(:)、

行末にはセミコロン(;)をつけること。

 

h1 {

  color: #ff000;

CSSのコメント

HTMLと同じく、CSSファイルにもコメントを記述できる。

CSSの場合は /**/ で囲んだ行がコメントになる。

 

h1 {

 /*文字の色を赤にする*/

 color: #ff000;

}

文字の大きさを変える

文字の大きさを指定するにはfont-sizeプロパティを使う。

font-sizeはpx(ピクセル)という単位を使って指定する。

pxを書き忘れないように注意する。

f:id:asktky03:20210412165823j:plain

文字の種類を変える

font-familyプロパティを使うとフォントの種類を指定できる。

「font-family: フォント名;」とすると要素にそのフォントを適用できる。

 

フォントにスペースがあればダブルクォーテーション(”)で囲む。

f:id:asktky03:20210412170051p:plain

背景色を変える

背景色を変えるにはbackground-colorプロパティを使う。

色の指定方法はcolorプロパティと同じ。

「#dddddd」のように同じ値が続く場合は「#ddd」と省略できる。

 

※HTML

<h1>プログラマーマ</h1>

CSS

h1 {

  background-color: #dddddd;

}

横幅・高さを変える

要素の横幅を変えたいときはwidthプロパティ、

高さを変えたいときはheightプロパティを使う。

width、height共にpxで指定。

f:id:asktky03:20210412170959p:plain

特定の要素にCSSを適用する

<li>要素が複数ある場合、classをつけて文字に名前を付けてあげられる。

classをつけることでそれぞれの要素を識別し、別々のCSSを適用することができる。

 

class名でCSSを指定する時、先頭にドット「.」が必要。

f:id:asktky03:20210412171357p:plain

classに同じCSSを適用する

複数の要素に同じCSSをつけると、それら全て同じCSSが適用される。

f:id:asktky03:20210412171542p:plain

f:id:asktky03:20210412171554p:plain

classにCSSを指定する時の注意

classに同じCSSを指定する時、先頭に(.)をつけないとCSSが適用されない。

classの場合は(.)が必要で、タグの場合はいらない。

まとめ

少しずつ基本が頭に入ってきたような気がします。

今日の学び。

 

1.CSSに触れる

2.文字の色を変える

3.CSSを書く時の注意

4.CSSのコメント

5.文字の大きさを変える

6.文字の種類を変える

7.背景色を変える

8.横幅・高さを変える

9.特定の要素にCSSを適用する(タグに名前を付ける)

10.classに同じCSSを適用する

11.classにCSSを指定する時の注意

 

次の勉強は再びHTMLに戻り、HTMLの全体構造に移ります。

 

ここが終わったら、HTMLとCSSを組み合わせながらWebサイトなどの目標物を作っていくための練習になるはず。

段々と複雑になってくる…

 

一歩ずつ、着実に。

明日も頑張りましょう!!