【初心者向け】CSSとは？基本的な書き方を解説！

こんにちは！Kです！

今回は、CSSについて初心者の方に向けて説明します。

まず、CSSについて簡単に説明します。
htmlがWebページの見出しなどの文書構造を形成する言語であるのに対し、CSSはその文書構造に対して装飾をし見た目を整える言語です。

htmlについては記事がありますのでぜひご覧ください。

※ HTMLに関する記事→【HTML】HTMLって何？

CSSとは？

CSSはスタイルシートとも呼ばれ、「Cascading Style Sheets」 の頭文字をとった略語です。

文頭でも書きましたが、CSSは文章構造を装飾（デザイン）するための言語です。

Webページの基本構造は、HTMLとCSSでできています。

補足で説明すると、そこに動きを出したい場合はJavaScriptという言語を使用します。
JavaScriptについてはまた後日記事にしたいと思います！

CSSファイルの作り方

CSSファイルの作り方はいたって簡単です！

ファイル名の拡張子に「.css」をつけるだけでPCがCSSファイルと認識してくれます。

CSSの書き方

CSSの書き方は難しくはありません。

簡単な例で説明します。

【例】

/** HTMLファイル **/
<h1>この要素をcssで赤色に装飾します</h1>

/** CSSファイル **/
h1{
  color: red
}

ブラウザでの表示結果

この要素をcssで赤色に装飾します

解説

以下CSSの基本事項です。
この基本事項を覚えておいて、プロパティなどはやっていく内にだんだん覚えていきますし、必要とあれば調べれば大体出てきますので問題ないです。

・ CSSを適応したいタグ（上の例ではh1タグ）のことを「セレクタ」といいます

・ 変更したい項目（上の例では「color」）を「プロパティ」といいます

・ プロパティには「値（上の例では「red」）」を与えてください

・ プロパティと値は「{ }」で囲んであげればOK

最後に

今回はCSSについて説明しました。

初心者の方は、まずはHTMLとCSSでブラウザに表示するところからやっていけばいいと思います。

挫折しないコツは簡単なことから基本を学んでちゃんとできるようになることだと思います！

基本からしっかり学んでいきましょう！

それでは、また！

Follow me!