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

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

CSS プロパティと値の一覧を徹底解説CSS

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

このサービスは複数のSSPによる協力の下、運営されています。

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

また、理解しにくい説明や難しい問題に躓いても、JPSMがプログラミングの解説に特化してオリジナルにチューニングした画面右下のAIアシスタントに質問していだければ、特殊な問題でも指示に従い解決できるように作ってあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

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を学んでみてください。