大学生/大学院生向け

在宅ワークのお仕事

プルグラミング学習の無料相談も可能良く

プログラミング学習の定額のサブスク

サイト/ブログ作成をコスパ良く

プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

Google Workspceで便利に作業

大学生/大学院生向け

在宅ワークのお仕事

プルグラミング学習の無料相談も可能良く

プログラミング学習の定額のサブスク

サイト/ブログ作成をコスパ良く

CSSの設定は「AのBをCにする」をまずは理解しよう

Webプログラミングの中で、CSSで見栄えを設定していきますが、CSSの設定方法として、「プロパティ 」と「値」をそれぞれ、設定していきます。
ここでは、この2つを覚えましょう。

CSSの設定方法

「AのBをCにする」で設定

Webプログラミングの初心者の方には、
「AのBをCにする」
と言われても、なんのことかわからないと感じるかもしれませんが、とてもシンプルなので、簡単な例でみていきましょう。

body {
  background-color: red;
}

これを例にすると、

body

background-color(背景)

red(赤色)

にする。

このように見ると、非常にシンプルでわかりやすいと思います。

先ほどの、CSSを「AのBをCにする」で置き換えて見ると、

body {
  background-color: red;
}

このCSSは

A {
  B: C;
}

と考えることができます。

プロパティ と値

「BをCにする」がプロパティ と値

先ほど、説明したシンプルな例で

A {
  B: C;
}

B = プロパティ
C = 値

と読んでいます。

A {
  background-color: red;
  color: blue;
}

あとはこのように必要に応じて、B(プロパティ)とC(値)を増やしていくことになります。

上記の例は、Aに対して

「BをCにする」

background-color(背景)を red(赤色)にする
color(文字色)を blue(青色)にする

この2つを設定していることになります。

いかがでしたか。
シンプルな例でみていくと、「プロパティ 」と「値」に関しても、理解して頂けると思います。

この2つが「AのBをCにする」ことが理解できれば、あとは「B」と「C」の組み合わせを色々と試しながら覚えていくだけです。

この辺りは、楽しみながら覚えていきましょう。

こちらもおすすめ

初心者向けの色々な情報はあるけれど、

  • 無料でお試しができるスクール
  • ホームページなど簡単に作成できる
  • 組織で使いたいサービス

について、

少しでも試して良いものがあると、

それを活用することで学習や業務などが効率化できるので、

おすすめのサイトなどをいくつか紹介しておきます

ピックアップ

おすすめ記事