CSS

【入門】CSSの書き方を基本構造から理解する【図解付き】

どうも、つよぽんです!

今回はCSSの基本構造の理解を目的とした記事となります。

CSSの基本構造を知る = CSSの書き方の基本を身につける」ということにもなるので、これからCSSを学び始める際には、まずはCSSの基本的な構造を理解しましょう。

今回の記事は次のような方に向けて書きました。

想定読者
  • CSSの書き方を覚えたい方
  • CSSの学習を始めたばかりの方
  • なんとなくでCSSを書いている方

今回の記事は以下の学習コンテンツ記事内のスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
CSSの基本構造を理解するCSSの基本的な構造を理解することでスタイルを定義してWebページのスタイル(見た目)を好きに変更できるようになります。CSSを構成する「セレクター」「プロパティ」についてこの記事で理解していきましょう...

今回の内容は以下のとおりです。

今回の内容
  • CSSの書き方
  • CSSのセレクター(セレクターリスト)
  • CSSのプロパティ
  • CSSのプロパティ値
  • CSSのスタイル定義を囲む波括弧
  • CSSのプロパティ値を囲むコロンとセミコロン

 

CSSの書き方

CSSを書くためにはCSSの構造を理解する必要があります。

次以降の章でCSSを書くために必要な知識を詳しく解説しますが、CSSの構造は次のパーツで構成されています。

CSSの構成パーツ
  1. セレクター(セレクターリスト)
  2. プロパティ
  3. プロパティ値
  4. 波括弧 (“{}”)
  5. コロン(“:”)とセミコロン(“;”)

上記5つを組み合わせて以下の画像のようにCSSのスタイル定義を行います。

CSSのスタイル定義の構造CSSのスタイル定義の構造

次の章以降で1つずつパーツの紹介をしていきます。

CSSのセレクター(セレクターリスト)

CSSのセレクターCSSのセレクター

CSSのセレクターは上の画像の赤枠で囲っている部分になります。(上の画像の例だとh1がセレクターとなる。)

CSSのセレクターを使うことで、どの部分のスタイルを変更するか定義することが出来ます。(上の画像の例ではh1タグのスタイルを変更する。)

セレクターリストとも書いている理由は、セレクターは1つだけでなく複数セットすることも可能なためです。

セレクターには「h1タグ」「pタグ」のようなHTMLの要素を指定する他にも、HTMLのclass属性値id属性値など様々な値をセットすることが出来ます。

他にセットできるセレクターに関しては以下のリンクを参考にしていただけたらと思います。

CSSのプロパティ

CSSのプロパティCSSのプロパティ

CSSのプロパティは上の画像の赤枠で囲った部分になります。

上の画像の例だと3つのプロパティを定義しており、これらのプロパティを使うことによってどのようにスタイルの変更を行うか指定することが出来ます。

上の画像で使っているプロパティの意味は次のとおりです。

プロパティの意味
  1. colorプロパティ : 文字の色を指定する(赤・青など)
  2. text-alignプロパティ : 文字の位置を指定する(左・中央・右など)
  3. font-sizeプロパティ : 文字の大きさを指定する

上記3つのプロパティ以外にも何十種類もプロパティは存在するためここでは全部の紹介は割愛しますが、他にどんなプロパティがあるか知りたい方は以下のリンクを参考にしていただけたらと思います。

ここで紹介したプロパティはあくまでも「文字の色を変更する」「文字サイズを変更する」と言ったように「何を変更するか」を指定するだけです。

実際に「文字を赤くする」「文字を大きくする」などの具体的な変更内容は次に紹介するプロパティ値を使います。

CSSのプロパティ値

CSSのプロパティ値CSSのプロパティ値

CSSのプロパティは上の画像の赤枠で囲っている部分になります。

colorプロパティ」に対して「red」という値をセットすることで、h1タグ内に記述したテキストは赤くなります。

text-alignプロパティ」に対して「center」としているので、文字がデフォルトの左揃えから中央揃えになります。

font-sizeプロパティ」に対して「20px」とすることで、文字サイズを20px(ピクセル)に指定しています。

このようにプロパティ値にどのように変化させるか具体的な値をセットすることでスタイルの変更を行うことが出来ます。

実際にプロパティ値をしてすることによって見た目がどのように変わったか表したものが以下の画像になります。

CSSの役割

上の画像の赤枠内が今回紹介している「color」「text-align」「font-sizeプロパティプロパティ値をセットした結果となります。

上のコードと出力結果が見づらい場合は以下のリンクから直接コードと出力結果を確認することも可能です。

CSSのスタイル定義を囲む波括弧

CSSのスタイル定義は波括弧で囲むCSSのスタイル定義は波括弧で囲む

ここまで紹介してきた「セレクター」「プロパティ」「プロパティ値」がCSSを構成するメインパーツとなりますが、実際にはこの章で紹介する「波括弧」、次の章で紹介する「コロンとセミコロン」を適切なところに配置してCSSの定義が完成します。

まず「波括弧」から見ていきましょう。

波括弧(“{}”)はCSSのスタイル定義を行っている箇所(プロパティとプロパティ値)を囲むようにセットします。

上の画像の赤枠の部分を参考にしていただけたらわかるかと思います。

CSSのプロパティ値を囲むコロンとセミコロン

CSSのプロパティ値はコロンとセミコロンで囲むCSSのプロパティ値はコロンとセミコロンで囲む

コロン(“:”)セミコロン(“;”)に関しては、プロパティ値を囲むようにセットしてます。

上の画像の赤枠を観ていただくとわかるかと思いますが、プロパティ値である「red」「center」「20px」がコロン(“:”)セミコロン(“;”)で囲まれています。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • CSSの構造は以下のパーツが組み合わさってできている
    • セレクター
    • プロパティ
    • プロパティ値
    • 波括弧(“{}”)
    • コロン(“:”)とセミコロン(“;”)
  • セレクターはHTMLの要素だけでなくclass属性値やid属性値など様々な値がセットできる
  • CSSのプロパティは何十種類もある
  • CSSのプロパティ値で具体的なスタイルの変更内容を定義する

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
CSSの基本構造を理解するCSSの基本的な構造を理解することでスタイルを定義してWebページのスタイル(見た目)を好きに変更できるようになります。CSSを構成する「セレクター」「プロパティ」についてこの記事で理解していきましょう...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

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