プログラミング・ITCSS

Blog Article

CSSとは何か?その基本と書き方を初心者にもわかりやすく解説

こんにちは、Mochiです。

CSSって聞いたことあるけど結局何なんだろう?CSSってどうやって書くんだっけ?🤔

そんな方に向けて、CSSとは何か、そして基本的なCSSの書き方をわかりやすく解説します。学んでいきましょう!

🤔CSSとは?

CSS(Cascading Style Sheets)はスタイルシート言語と呼ばれるWeb上のコード技術の一つで、HTMLの見た目と視覚的なスタイルを装飾する役割があります。

HTMLって何?という方は記事「HTMLとは何かを簡単にプログラミング初心者にもわかりやすく解説」を読むと理解しやすくなるのでおすすめです。

スタイルシート言語という言葉は覚えなくても良いので、要するに見た目を作るためのものと覚えておきましょう。例えば

  • テキストのフォント
  • 配置
  • 背景の色
  • アニメーション

など、さまざまな見た目に関する装飾ができます。

例えばCSS無しだと左のようなサイトになってしまいますが、CSSを使うことで右のようなデザイン性のあるサイトになります。
CSSを使った画面装飾の例

使えると便利そうですね。ではCSSの基本的な書き方を学んでみましょう!

✍️CSSの書き方・文法

CSSは次のような書き方・文法です。

selector {
	property1: value1;
	property2: value2;
}

図解はこちらです。

CSSの構造とルール

訳のわからない英単語がたくさん出てきて、困惑させてしまったかもしれません。でも安心してください。理解できるように、この中の3つの項目

  1. selector:セレクター
  2. property:プロパティ
  3. value: 値

それぞれについて解説します。

セレクター

セレクターには装飾する部分を指定します。例えば、見出し1を装飾したい場合にはHTMLタグの”h1”を指定し、段落を装飾したい場合にはHTMLタグの”p”を指定します。後の記事で伝えますが、その他にも指定方法がいくつかあります。

つまり、何に対して装飾をするのかを選択(セレクト)します。

プロパティ

プロパティには装飾項目を指定します。例えば、文字の色を装飾したい場合は”color”というプロパティを指定し、フォントの大きさを装飾したい場合は”font-size”というプロパティを指定します。

つまり、何を装飾するのかを指定します。

このプロパティはたくさんの種類があります。全て覚えるのは難しいので重要なものを中心に覚え、それほど重要でないプロパティは適宜調べるようにしましょう。

値には装飾内容を指定します。プロパティで指定した装飾項目を、どのように装飾するのかを決めます。例えば、文字の色を緑色に装飾する場合は”green”を与え、文字の大きさを10pxに装飾する場合は”10px”を与えます(pxは大きさの単位と捉えてください)。指定する値はプロパティによって異なります。

つまり、どんな風に、どれぐらい装飾するのかを指定します。

CSSでは以上の「セレクター」「プロパティ」「値」を指定することで、装飾を行います。シンプルで分かりやすい構造ですね!

🎉まとめ

CSSとはHTMLの見た目を装飾するスタイル言語シートです。CSSを使うことで画面の彩りやデザイン性が向上するため、人の目に触れるシステムを開発する方には必須の技術です。文法に従って「セレクター」「プロパティ」「値」を指定することで、装飾を行います。

皆さんはCSSとは何か、そして基本的なCSSの書き方を習得し、スキルアップしました。素晴らしいです👏

今回押さえた基本はCSSを学ぶ上で何度も思い出すことになります。ぜひ、このサイトを見返して思い返してください!

🤗おすすめ

本で体系的にCSSについて学びたいという方にはこちらの本をおすすめします。HTML・CSSの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。HTMLやCSSなど、ぜひ気になるWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容