はじめに…
このブログは、プログラミング初心者（筆者）が “ある目標” に向けて
未知の領域であるプログラミングを、まっさらな状態から一歩ずつ登っていく（学んでいく）、雑記を含んだ内容になっております。
なので、、
プログラミングをこれから学んでみたいなって人の背中を少しは押すことができるかもしれませんが
すでにある程度の内容を理解している方に対しては読んでても面白くはないかもしれないことだけは お伝えしておきますm(._.)m
今日はこのテーマでブログを書いて復習をしていきます！
テーマは こちら↓
- CSSの基礎を知ろう！
でっす
※前回は 『画像の添付方法とリストの作り方』を勉強しました ↓
※ “ある目標” については こちらへ ↓
※内容については 《Progate》の初級編を参考に
学習させていただいています。
CSSとは？
はい、これ絶対初めに出てきそうなヤツ（文言）ですよね。
例に漏れず僕も初めに出したりするんですけど（笑）
で、
CSSとは！
→“カスケーディング・スタイル・シート”の頭文字をとってCSS！ というそうです
『HTMLで作ったモノに、文字の色や大きさなど 好みのデザインに装飾する。見た目を整える』のがCSSの役割です
HTMLとは別ファイルで
CSSとHTMLは別のファイルで管理していきます。
“HTMLで作った要素に対して、CSSを使って 『どこの』『なにを』『どうしていくか』” の部分を指定していきます。
（例）
《HTML》
＜h1＞CSSの基礎を知ろう＜/h1＞
《CSS》
.h1 {
color: orange;
}
《できあがり》
CSSの基礎を知ろう
［解説］
例文は
“h1で書かれた 『CSSの基礎を知ろう』に対して、文字色をオレンジにして” というふうに指定しています
- 『どこの』→ h1（＝CSSの基礎を知ろう）
- 『なにを』→ color（＝色を）
- 『どうする』→ orange（＝オレンジ色にして）
ということですね！
例えば、、
見出し（h1）の他に 各段落にも装飾する場合は・・・
《HTML》
＜h1＞CSSの基礎を知ろう＜/h1＞
＜p＞その1・文字の色を変えられる＜/p＞
《CSS》
h1 {
color: orange;
}
p {
color: red;
}
《できあがり》
CSSの基礎を知ろう
その1・文字の色を変えられる
HTMLの “h1” や “p” に対して、CSSでその項目（h1やp）にだけ変更を加えられるようにすることも可能なんですね
ちなみに、色はカラーコードで指定するのが一般的なのかもしれませんね（ここでは色の名前で書いちゃいますけどw）
#fff ←こんなやつですね〜
CSSを書く際の注意点
ポイントは ふたつです。
- インデント（字下げ）をする
- プロパティの末尾にコロン（：）、行末にはセミコロン（；）を必ずつける
※プロパティとは属性のことです（例えるならパーツのようなもの）
さっきの例題で見てみると
《CSS》
h1 {
□color: orange; ←字下げ&コロンとセミコロンつける
}
p {
□color: red; ←字下げ&コロンとセミコロンつける
}
今日の学び
- CSSの基礎について
を勉強しました！
これらを学ぶことができ、
たか は、経験値３を手に入れた
《たか のステータス》
| LEVEL ２ | HP １６ | 攻撃力 ８ |
| 職業 旅人 | MP ２ | 守備力 ４ |
| 経験値 １４ | すばやさ ７ | |
| ライティング ５ |
さーて、、
・文字の大きさ・種類を変更してみる
です^ ^
おわり
