【CSS】CSSの基本 ~ CSSの記述方法 書き方の基本

CSS

(最終更新月:2021年5月)

「HTMLは書けるようになってきたけど、見栄えを良くしたい!」

「CSSはどうやって書くの?」

というCSS初学者向けの記事となります

CSSの基本 ~ CSSの記述方法

について解説します

「そもそも、CSSって何?」

「CSSの書き方よりもどこに書くのかが知りたい!」

という方は、CSSとは?CSSの記述場所を解説した記事をご覧ください

CSSの構成

CSSの構成は、この通り↓

まずは要素について見てみましょう

要素を指定する

要素とは?

ここでいう要素は<></>で囲われた部分です

<></>で囲われたものはタグと呼びますが、要素 = タグというわけではありません

要素は指定方法により、タグそのものをさす場合もありますが、タグの中でも特定されたものだけ、などと限定することも可能です

下記にてその指定方法を解説します

要素の指定方法

指定方法は3つあります↓

  1. 指定したタグ全てに適用する
  2. クラス名を使って特定のタグ(複数指定可)に適用する
  3. ID名を使って特定のタグ(一つ)に適用する

クラスの場合は、「 . 」ドットを、

IDの場合は、「#」をつけるのを忘れずに!

「クラス、IDの違いを知りたい!」という方はこちらをご参考ください↓

要素をどうしたいか?プロパティと値の指定

スポンサーリンク

プロパティとは?

ここでいうプロパティでは

要素の「何に」CSSを適用するか?

を指定します

例えば、

「文字色を変えたい!」場合は、「color」

「背景色を指定したい!」場合は、「background-color」

「文字の大きさを決めたい!」場合は、「font-size」

などが入ります

値とは?

ここでいう値では、

要素の何を「どうするか?

を指定します

例えば、

「文字色や背景色を指定する」場合は、「green」や「red」、「#F4F4F4(グレー)」など

「文字サイズを指定する」場合は、「10px」や「12px」など

が挙げられます

プロパティ、値を指定する

スポンサーリンク

プロパティ、値がどんなものかはイメージつきましたか?

プロパティ、値の指定については、いかがでしょうか?

上記の例はほんの一部で、使いこなすにはごまんとあるプロパティを覚える必要があるのでしょうか?

実際は基本さえ押さえておけば、全て覚える必要はありません!

検索バーで、

css プロパティ ボーダー
css プロパティ アンダーライン
css プロパティ 一覧

などと検索して都度調べれば必ず必要な情報が出てきます!

調べればわかることは、都度調べるとして大事な根っこの部分をきちんと覚えるようにしていきましょう!

まとめ

CSSの構成をまず覚えること

必要なプロパティ、値は都度検索をし、人の知恵を上手に借りること

が大事だと考えます

この記事の知識を持って、

をご覧になるとより実践的で理解が深まります

Webアプリ開発にあたりCSSの基本は必ず知っておくべきだと思いますが、あまり詳しく知る必要もありません

というのも、実践においてはCSSをパッケージ化した「Bootstrap」「tailwindcss」などを使うことの方が多いかと思います

次回以降で、「Bootstrap」などの基本、使い方をお伝えしていきます

最後までご覧いただきありがとうございました!!!

「もっとHTML/CSSの基本を学びたい!」という方はこちらをご覧ください↓

タイトルとURLをコピーしました