初心者がゼロから始める【CSS】プログラミング【学習8日目】外部参照を使ったCSS

こんにちは、ryomaです。

今日からCSSの学習に入ったので、CSSについてまとめていきたいと思います。

CSSはHTMLで構造化された文章を装飾する言語です。
HTML➡️文章構造
CSS➡️見た目

ざっくりと説明するとこんなイメージです。

CSSが実装される前は、HTMLタグのtable要素を使っていましたがメンテナンスがしずらかったりSEOに弱いなどの問題点がありました。
以上の点から、レイアウトはHTMLでは行わないというのが常識となっているようです。

CSSの基本的なルール

CSSの書き方のルールがあります。

セレクター（どこの）{
プロパティ（なにを）:
値（どうするのか）;
}

上記の形が基本的なルールとなっているので、具体的な例を入れていきます。

セレクターの（どこの）は『h1』見出しなどが入ります。
プロパティの（なにを）は『color』色などが入ります。
値（どうするのか）には『＃FF0000』赤色を示す値などが入ります。

上記の例を入力するとこのような書き方になります。

入力前がこちら

反映させて赤文字に装飾完了です。

文字に色をつけるコードは複数あり16進数であったり、10進数であったりRGB指定などがあります。

全て文字を赤く表示することのできるコードです。
一般的には16進数の『＃FF0000』が使われることが多く、同じ番号が続いている時には『＃F00』のように短縮して表すことができます。

少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。
引用元：https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Getting_started/Color

上記のサイトで赤色以外の色の調整方法などが書かれていますので、参考にしてください。

CSSは外部参照を使う

HTMLで装飾していた時は、HTMLのコードと同じ場所にtable要素を入れていましたが、CSSを使う時には外部参照として別の場所を用意してリンクさせます。ブログの外部リンクのようなイメージを持ってもらえれば大丈夫です。

<link rel="stylesheet" href="stylesheets/color.css">で外部とリンクさせています。

外部参照ではなく内部参照（HTMLと同じページ）にCSSを記述する方法もあるのですが、現在は外部参照を使ってのCSSが一般的のようです。

まとめ

・HTMLは構造を表しCSSは見た目を表すコード
・CSSの基本的なルールは、セレクター（どこの）プロパティ（なにを）値（どうするのか）に当てはめて使う
・CSSでは外部参照を使ってHTMLとは別のページに、CSSのコードを書いてリンクさせる

今回はCSSの基本を学習しました。
まだまだ始まったばかりなので、CSSもがんばっていきたいと思います！