プログラミング

【プログラミング独学】ProgateでCSSを学習!文字色を変えれた!【2日目】

ジャスタ

こんにちは、プログラミング学習2日目のジャスタです。

私は、プログラミングでHTML、CSS、WordPressがわかるようになりたいと思い、一昨日から独学を始めました。

このブログでは、プログラミング初心者が独学した内容をこれから1日単位で記録していきます。

ちなみに現時点では、プログラミングスクールに申し込むことは考えていません。

まだ結構な金をかけるほど、のめり込めるかわからないですからね...

なので、これからプログラミング独学を自力で始めようとしている方に、プログラミング独学ってどんな雰囲気か伝われば良いなと思いながら今後ブログを書いて行くつもりです。

前置きはこれくらいにして、プログラミング学習2日目を振り返ってみます。

✔️本日の学習まとめ

・使用した教材:Progate

・学習時間:1時間

・学習内容:CSSについて下記の①、②

①CSSを使って文字の色・大きさ・種類・背景色・横幅・高さを変える。

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

上記の内容について振り返っていきます。

プログラミング初学者がどう感じたかをメモとして残していくので、もし興味があったらご覧下さい。

使用した教材:Progate

今日使った教材は『Progate』ですね

有料部分と無料部分がありますが、『HTML&CSS初級編』は無料です。

今日も先日の続きで、『HTML&CSS初級編』を実践します。

今日の学習時間:1時間

ジャスタ

今日の学習時間は1時間でした。

内容が少し難しくなった感じがしたので、とりあえず1時間実践です。

慣れるまでは、徐々に学習していきます。

今日の学習内容:CSSについて

今日はProgateの『CSS』について学習しました。

🔽やってみた感想

『CSS』って何ですか?

ジャスタ

よくわからないけど...

『HTML』で書いた部分の文字や背景とかの装飾を指定するのに、『CSS』にコード書くみたい。

現時点ではこのくらいの解釈です。

これがどの程度、的を得ているかもよくわかっていません...

しかし、とりあえずHTMLで書いた部分を装飾するために、CSSで別にコードを書くみたいな雰囲気を感じました。

CSSでHTMLで書いた部分を装飾する

CSSを使うことで、HTMLで書いた部分の文字や背景を装飾することができるみたいです。

CSSとは?

CSS

HTMLで用意した要素に対して、CSSを用いて『どこの』、『何を』、『どうする』かを指定できます。

この時の対象(要素名)をセレクタ、変更項目をプロパティと言う。

ジャスタ

よくわからないけど、そういうものだと覚えておこう...

まあ、これもやってるうちに慣れるだろうと気にせずに進もうと思います。

文字の色・大きさ・種類を変える

CSSでコードを書くことで、HTMLの文字の色・大きさ・種類を変えられるようです。

CSS:文字について

・文字の色を変える:colorプロパティを使う。

・文字の大きさを変える:font-sizeプロパティを使う。

・文字の種類を変える:font-familyプロパティを使う。

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

質問者さん

例えばですけど、『1つのリストの要素だけ赤くしたい』ときはどうしたらいいんでしょうか?

答え:『要素にclassを使って名前をつける』ということをするそうです。

classをつけることで、それぞれの要素を識別し、別々のCSSを適用できるようになるらしいです。

実際にHTMLで書いて画面表示するとこんな感じに。

  • HTML ← ここだけclassを使って文字を赤に指定。
  • PHP
  • Ruby

3つのリストのうち、1つだけclassを使って赤文字にしています。

class名でCSSを指定する場合、

先頭にドット『 . 』が必要です

まとめ

今日やったことは、おそらくCSSでの1番基礎の部分だと思います。

正直な感想は、『何でこんな書き方でHTMLの文字の大きさとか変えれるんだろう』って感じですが。

でも、『こういう感じでCSSって書くんだな』と雰囲気はまあまあ感じられたので、この調子で学習していきたいですね。

-プログラミング

© 2021 ジャスたいむ Powered by AFFINGER5