CSSの基本的なところ

#最初に
カレンダー企画2020の6日目
プログラミングの勉強を始めて3ヶ月程経ったので学んだことのメモをアウトプットとして記事に残します。
これからプログラミングの世界に入る人の手助けになれたら嬉しい限りです。
間違っていたり、言葉が違っていたり、表現が誤解されるような言葉があったら教えて下さい^^
言葉を長々と読みづらかったら申し訳ありません。少しずつなれてがんばります。

#CSSの基本的なところ
##CSSとは？
Cascading Style Sheets(カスケーディングスタイルシート)の略みたい。
WEBページを装飾するのに必要な言語です。
簡単にいうとWEBページのデザインです！

普段見ているWEBページで
文字の色が黒以外のものだったり、背景に画像があったりしませんか？
このページもヘッダーが緑ですよね？これはCSSのおかげです。

HTMLは文字を表示してそれを見やすくするデザインするのがCSSみたいな感じです！(厳密には違いますがここでは簡単に表現…)

##CSSの書き方

文法

セレクタ{
  プロパティ: 値;
}

• セレクタ：CSSを適応させたい場所を指定 (例：セレクタの部分の)
• プロパティ：指定した場所の何を変えるのか？を指定 (例：文字色を)
• 値：どのように変えるのか？を指定 (例：赤にする)

みたいな感じ！
具体的に書いてみる

qiita_post.css

h1{
  color: red;
}

• セレクタ = h1
• プロパティ = color
• 値 = red
  これの意味は「h1(見出し)の文字を赤にして」となります。

↓
こんな感じに変わる
↓

CSSを使うとこんな風にすることが出来ます。

###CSSのフアイルを読み込ませないと上記のことが出来ない
CSSをせっかく書いてもファイルを読み込まないと反映されないです！
ここで紹介してある
HTMLにCSSファイルを記載する。どのHTMLファイルにどのCSSファイルを読み込ませるのか？を指定する必要があるからです。
紹介してある記述の仕方は同じフォルダ内にある場合です。
他にも
#####下のフォルダにある場合は
<link rel="stylesheet" href="フォルダ名/qiita_post.css" />

#####上のフォルダにある場合は
<link rel="stylesheet" href="../qiita_post.css" />(1つ上の場合)
<link rel="stylesheet" href="../../qiita_post.css" />(2つ上の場合)

これをHTMLファイルに行えれば読み込み成功して
CSSで作成したものがHTMLファイルに適応されて先程のように文字を赤くすることが出来ます。

##セレクタについてもう少し詳しく
セレクタはどこをどうしたいのか？を決める最初の場所決めでしたね。
同じ文字色で考えて行きますね。

さっきのCSSの書き方だと一つ問題が起きます。

qiita_post.css

h1{
  color: red;
}

qiita_post.html

<h1>qiita_post_demo</h1><!--文字色：赤-->
<h1>qiita_post_demo2</h1><!--文字色：青-->

このように文字色を変えたい場合です。
でも今のCSSの書き方では全てが赤になってしまう。。。

じゃあこうしてみよう

qiita_post.css

h1{
  color: red;
  color:  blue;
}

でも次はこうなってしまう。。。

上から順び読み込まれるので下にあるものが適応されるのでこうなります！

じょあどうしようとなる時に方法は2つ！

1. id属性で指定する
2. class属性で指定する

###id属性で指定する

qiita_post.html

<h1>qiita_post_demo</h1><!--文字色：赤-->
<h1 id="word-blue">qiita_post_demo2</h1><!--文字色：青-->

2行目にh1にid属性をつけました。
CSSファイルも変更

qiita_post.css

h1{
  color: red;
}
#word-blue{
  color: blue;
}

id属性で指定した部分のCSSのセレクタは(#)をつけます

###class属性で指定する

qiita_post.html

<h1>qiita_post_demo</h1><!--文字色：赤-->
<h1 class="word-blue">qiita_post_demo2</h1><!--文字色：青-->

qiita_post.css

h1{
  color: red;
}
.word-blue{
  color: blue;
}

id属性だった部分をclassに変えてあります。
それに伴ってCSSの方は# → .(ピリオド)に変更

どちらもこうなります！

ここで疑問が出ますよね？
どっちも同じになるのであればどっちかだけでいいじゃん！って(私は思いました^^)

##id属性とclass属性の違い

• id属性は同じページ内で1回しか使うことが出来ない。
• class属性は同じページ内に何度も使うことが出来る。

違いはこれだけです！
id属性は同じ装飾を同じページ内で複数行いたい場合には不向きです。装飾用で使うよりは何かを明示する時に使うことが多い印象があります。例えばタブ自体に名前をつけて指定する時とかにidを使うことはありました。慣れていって使う場面が少しずつ分かるのかな？って思っています。

class属性は同じ装飾を同じページ内で複数回使えますのでデザインとしてはこちらの方が汎用性はあると思います。

qiita_post.html(これはOK)

<h1 class="word-blue">qiita_post_demo</h1>
<h1 class="word-blue">qiita_post_demo2</h1>

qiita_post.html(これはNG)

<h1 id="word-blue">qiita_post_demo</h1>
<h1 id="word-blue">qiita_post_demo2</h1>

少しは違いが分かりましたでしょうか？

#最後に
以上でCSSについての基本的なところは終わります。
CSSを使いこなせるととても見やすいページになるので深くするのは良いことだと思います！
私もまだまだなので頑張ります。