プログラミング

【プログラミングをイチから学ぶ】CSSの基礎を知ろう

 

はじめに…

 

このブログは、プログラミング初心者(筆者)が “ある目標”  に向けて

 

未知の領域であるプログラミングを、まっさらな状態から一歩ずつ登っていく(学んでいく)、雑記を含んだ内容になっております。

 

なので、、

プログラミングをこれから学んでみたいなって人の背中を少しは押すことができるかもしれませんが

すでにある程度の内容を理解している方に対しては読んでても面白くはないかもしれないことだけは お伝えしておきますm(._.)m

 

 

たか
たか
こんにちは、たかです! 

 

今日はこのテーマでブログを書いて復習をしていきます!

 

テーマは こちら↓

  • CSSの基礎を知ろう!

でっす

 

※前回は 『画像の添付方法とリストの作り方』を勉強しました ↓

【プログラミングをイチから学ぶ】“画像の添付” と “リスト作成” はじめに… このブログは、プログラミング初心者(筆者)が “ある目標”  に向けて 未知の領域で...

 

※ “ある目標” については こちらへ ↓

 

※内容については 《Progate》の初級編を参考に

学習させていただいています。

 

 CSSとは?

 

はい、これ絶対初めに出てきそうなヤツ(文言)ですよね。

例に漏れず僕も初めに出したりするんですけど(笑)

 

で、

 

CSSとは!

→“カスケーディング・スタイル・シート”の頭文字をとってCSS! というそうです

 

まろ
まろ
これ多分覚えなくてOKかなと 笑 

 

 

『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を書く際の注意点

 

ポイントは ふたつです。

  1. インデント(字下げ)をする
  2. プロパティの末尾にコロン(:)、行末にはセミコロン(;)を必ずつける

※プロパティとは属性のことです(例えるならパーツのようなもの)

 

さっきの例題で見てみると

 

《CSS》

h1 {

 color: orange;  ←字下げ&コロンとセミコロンつける

}

p {

 color: red;    ←字下げ&コロンとセミコロンつける

}

 

まろ
まろ
忘れずにね〜 

 

 

今日の学び

 

  • CSSの基礎について

を勉強しました!

 

 

これらを学ぶことができ、

たか は、経験値3を手に入れた

 

《たか のステータス》

LEVEL     2 HP    16 攻撃力     8 
職業    旅人 MP     2 守備力       4
経験値   14 すばやさ    7
ライティング  5

 

さーて、、

“次回のプログラミング講座は?”

  ・文字の大きさ・種類を変更してみる

です^ ^

 

おわり

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA