CSS プロパティと値の一覧と使い方完全ガイド！初心者でも分かる詳しい解説

はじめに

CSSはWebページの見た目を整えるために必要な技術です。

CSSにはプロパティと値があり、それらを組み合わせてスタイルを設定します。

しかし、初めてCSSを学ぶ人にとっては、プロパティと値が多く、どのように組み合わせれば良いのか分からないことがあります。

この記事では、CSSのプロパティと値の一覧と使い方を初心者目線で詳しく解説します。

●CSSプロパティ

CSSには多数のプロパティがありますが、ここでは代表的なものを中心に解説します。

○background-color

要素の背景色を設定します。

body {
  background-color: #ffffff; /* 白 */
}

○color

テキストの色を設定します。

h1 {
  color: #333333; /* 黒 */
}

○font-size

フォントの大きさを設定します。

p {
  font-size: 16px;
}

○font-family

フォントの種類を設定します。

h1 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

○font-weight

フォントの太さを設定します。

h1 {
  font-weight: bold;
}

○text-align

テキストの配置を設定します。

h1 {
  text-align: center;
}

○margin

要素の外側の余白を設定します。

div {
  margin: 20px;
}

○padding

要素の内側の余白を設定します。

div {
  padding: 10px;
}

○border

要素の境界線を設定します。

div {
  border: 1px solid #cccccc;
}

○border-radius

要素の角を丸めます。

div {
  border-radius: 10px;
}

○box-shadow

要素に影をつけます。

div {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

○width

要素の幅を設定します。

img {
  width: 100%;
}

○height

要素の高さを設定します。

img {
  height: 200px;
}

○display

要素の表示方法を設定します。

ul {
  display: flex;
  flex-direction: column;
}

○position

要素の位置を設定します。

div {
  position: relative;
  top: 20px;
  left: 30px;
}

○float

要素の左右に配置を設定します。

img {
  float: left;
  margin-right: 10px;
}

●CSS値】

CSSのプロパティには、設定できる値があります。

ここでも、代表的な値を中心に解説します。

○カラー

カラーは、16進数、RGB、RGBA、HSL、HSLAなどの形式で指定できます。

h1 {
  color: #ff0000; /* 赤 */
}

○単位

CSSには、px、em、rem、%などの単位があります。

div {
  margin: 20px;
  font-size: 1.2em;
}

○キーワード

キーワードは、例えば「bold」や「none」のような単語を指します。

h1 {
  font-weight: bold;
  text-decoration: none;
}

まとめ

CSSには多数のプロパティと値があり、初めて学ぶ人にとっては少し難しいかもしれません。

しかし、この記事で紹介した代表的なプロパティと値を覚えておけば、Webページのデザインを自由自在に調整できるようになるでしょう。

ぜひ、実際に手を動かしながら、CSSを学んでみてください。