こんにちは、Mochiです。
CSSって聞いたことあるけど結局何なんだろう？CSSってどうやって書くんだっけ？🤔
そんな方に向けて、CSSとは何か、そして基本的なCSSの書き方をわかりやすく解説します。学んでいきましょう！
🤔CSSとは？
CSS(Cascading Style Sheets)はスタイルシート言語と呼ばれるWeb上のコード技術の一つで、HTMLの見た目と視覚的なスタイルを装飾する役割があります。
HTMLって何？という方は記事「HTMLとは何かを簡単にプログラミング初心者にもわかりやすく解説」を読むと理解しやすくなるのでおすすめです。
スタイルシート言語という言葉は覚えなくても良いので、要するに見た目を作るためのものと覚えておきましょう。例えば
- テキストのフォント
- 配置
- 背景の色
- アニメーション
など、さまざまな見た目に関する装飾ができます。
例えばCSS無しだと左のようなサイトになってしまいますが、CSSを使うことで右のようなデザイン性のあるサイトになります。
使えると便利そうですね。ではCSSの基本的な書き方を学んでみましょう！
✍️CSSの書き方・文法
CSSは次のような書き方・文法です。
selector {
property1: value1;
property2: value2;
}図解はこちらです。
訳のわからない英単語がたくさん出てきて、困惑させてしまったかもしれません。でも安心してください。理解できるように、この中の3つの項目
- selector：セレクター
- property：プロパティ
- value: 値
それぞれについて解説します。
セレクター
セレクターには装飾する部分を指定します。例えば、見出し1を装飾したい場合にはHTMLタグの”h1”を指定し、段落を装飾したい場合にはHTMLタグの”p”を指定します。後の記事で伝えますが、その他にも指定方法がいくつかあります。
つまり、何に対して装飾をするのかを選択（セレクト）します。
プロパティ
プロパティには装飾項目を指定します。例えば、文字の色を装飾したい場合は”color”というプロパティを指定し、フォントの大きさを装飾したい場合は”font-size”というプロパティを指定します。
つまり、何を装飾するのかを指定します。
このプロパティはたくさんの種類があります。全て覚えるのは難しいので重要なものを中心に覚え、それほど重要でないプロパティは適宜調べるようにしましょう。
値
値には装飾内容を指定します。プロパティで指定した装飾項目を、どのように装飾するのかを決めます。例えば、文字の色を緑色に装飾する場合は”green”を与え、文字の大きさを10pxに装飾する場合は”10px”を与えます（pxは大きさの単位と捉えてください）。指定する値はプロパティによって異なります。
つまり、どんな風に、どれぐらい装飾するのかを指定します。
CSSでは以上の「セレクター」「プロパティ」「値」を指定することで、装飾を行います。シンプルで分かりやすい構造ですね！
🎉まとめ
CSSとはHTMLの見た目を装飾するスタイル言語シートです。CSSを使うことで画面の彩りやデザイン性が向上するため、人の目に触れるシステムを開発する方には必須の技術です。文法に従って「セレクター」「プロパティ」「値」を指定することで、装飾を行います。
皆さんはCSSとは何か、そして基本的なCSSの書き方を習得し、スキルアップしました。素晴らしいです👏
今回押さえた基本はCSSを学ぶ上で何度も思い出すことになります。ぜひ、このサイトを見返して思い返してください！
