2021/2/18 「HTML&CSS辞典」をオープンしました! 是非、ご覧になってください!

[初心者向け] CSSとは? CSSの書き方・ルールも分かりやすく解説します!

CSSの書き方やルールを知りたい人

CSSの書き方やルールを知りたいな!

この記事は上記のような疑問を解消するものとなっています。

CSSを記述してみたいと思っても、まずはCSSの書き方やルールが分からないといけません。

そこで、この記事では初心者の方でも分かりやすいようにCSSの書き方やルールを分かりやすく解説していきたいと思います。

気になる方は是非最後まで読んで頂ければと思います。

1.CSSとは?

CSSとは?

CSSは Cascading Style Sheet (カスケーディング・スタイルシート)の略です。

CSSを利用することでWebページの見栄えを細かく設定することができます。

例えば、文字に色をつけたり、背景に色をつけたり、フォントを変更したりすることができます。

CSSを別管理するメリット
  • HTMLファイルの容量を少なくできる
  • CSSの修正が楽になる
  • Webページの表示速度がはやくなる




2.CSSで使われる用語

まずはCSSで使われる用語をみていきましょう。

以下はCSSのソースコードの一例です。

CSSソースコードの各部分の名称
  • セレクタ:h1
  • プロパティ名:color、font-size
  • プロパティ値:orange、36px

まずはどの要素に対してデザインを適用させるのかを最初に示しています。

この部分をセレクタと言います。

次に要素に対する具体的なデザイン設定は { } 内に記述していきます。

{ } 内には何をどのようにデザイン設定をするのかを指定します。

{ } 内はプロパティ名プロパティ値をコロン( : )で区切って記述します。

そして最後はセミコロン( ; )をつけて終わりです。




3.CSSのルール

CSSは様々な書き方が可能となっています。

それではCSSソースコード例である「半角スペース・改行を入れたソースコード」と「半角スペース・改行を入れないソースコード」をみていきましょう。

半角スペース・改行を入れたソースコード

半角スペース・改行を入れないソースコード

どちらのソースコードのほうが見やすいでしょうか?

もちろん、「半角スペース・改行を入れたソースコード」のほうが見やすいかと思います。

どのような書き方をしても大丈夫ですが、書き方を統一しておくことで見やすくもなりますし、予想外の編集ミスを防ぐことができます。

また、CSSのセレクタはカンマ( , )で区切って複数指定することもできます。

例えば、h1要素とp要素を同じ表示指定にする場合は以下のように記述します。

コメントの書き方

CSSではソースコードにコメントを記述することができます。

/*」と「*/」で囲った部分がコメントとなります。

コメントを書くことであとで見返した時、どのような表示設定がされているのか一目で分かりやすいです。

また、コメントを利用して一時的に表示設定を無効にすることも可能となっています。

4.まとめ

最後まで読んで頂きまして、ありがとうございました。

CSSを構成する名称・書き方・ルールをしっかりと理解しておくことはとても重要なことです。

途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

以下のような本を一冊もっておくと何か分からないことがあったら便利です。(kindle unlimitedに会員登録をすると無料で読むことができるのでオススメです。)

以下の本はより実践的な内容になっているので、もっとHTML&CSSを学びたい方は取り組んでみることをオススメします。

他にもHTML&CSSを学ぶことができる教材を知りたい方は以下の記事もご覧になってください。

[初心者・中級者向け] HTML & CSS を学ぶことができるおすすめの本 [必見!] Udemy(ユーデミー) おすすめのHTML/CSS講座

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です