CSSを使うことで、Webサイトのデザインやレイアウトを自由にカスタマイズできます。本記事では、CSSの基本となる10のプロパティをわかりやすく解説し、それぞれの使い方やポイントを詳しく紹介します。初心者から経験者まで、実践的に活用できる内容をまとめていますので、ぜひ参考にしてください。
CSSとは？基本を押さえよう
CSS（Cascading Style Sheets）は、Webサイトのデザインやレイアウトを指定するためのスタイルシート言語です。HTMLで作成したWebページの構造に対して、色やサイズ、配置などを設定し、見やすく美しいデザインに仕上げる役割を持っています。
CSSを学ぶことで、文字の色を変えたり、ボタンのデザインをカスタマイズしたり、ページ全体のレイアウトを自由に調整することが可能になります。
CSSについて「詳しくしりたい」方はこちらの記事もおすすめです！
CSSの基本プロパティ10選
ここでは、Webデザインを行う上で必須となるCSSの基本プロパティを紹介します。それぞれのプロパティを理解し、自由にレイアウトを調整できるようになりましょう。
color（文字色を設定する）
color プロパティは、文字の色を指定するためのプロパティです。色は、色名、RGB、HEXコードなどで指定できます。
p {
color: blue; /* 文字の色を青にする */
}
font-size（文字サイズを変更する）
font-size プロパティを使うと、文字のサイズを自由に変更できます。
h1 {
font-size: 24px; /* 文字のサイズを24ピクセルにする */
}
単位には「px（ピクセル）」のほかに「em」や「rem」などがあり、用途によって使い分けることが重要です。
font-family（フォントを指定する）
font-family プロパティは、文字のフォントを指定するために使用します。
body {
font-family: Arial, sans-serif; /* Arialフォントを使用する */
}
複数のフォントをカンマで区切って指定することで、ブラウザに応じたフォントの切り替えが可能です。
background-color（背景色を指定する）
background-color は、要素の背景色を指定するプロパティです。
div {
background-color: #f0f0f0; /* 背景色をグレーにする */
}
ページ全体のデザインを決める際に重要なプロパティです。
width（要素の幅を指定する）
width プロパティは、要素の横幅を指定します。
div {
width: 300px; /* 幅を300ピクセルにする */
}
レスポンシブデザインを意識する場合は、「%」を使うことで画面サイズに応じた調整が可能になります。
height（要素の高さを指定する）
height プロパティは、要素の縦の高さを指定します。
div {
height: 200px; /* 高さを200ピクセルにする */
}
画像やボックスの大きさを固定する際に活用します。
margin（外側の余白を設定する）
margin プロパティは、要素の外側の余白を指定します。
div {
margin: 20px; /* すべての方向に20ピクセルの余白を作る */
}
要素間の間隔を調整する際に重要なプロパティです。
padding（内側の余白を設定する）
padding プロパティは、要素の内側の余白を指定します。
div {
padding: 10px; /* 内側の余白を10ピクセルにする */
}
テキストやボックス内のコンテンツと枠の間隔を調整する際に使用します。
display（要素の表示方法を決める）
display プロパティは、要素の表示形式を指定するためのプロパティです。
span {
display: block; /* インライン要素をブロック要素にする */
}
値には「block（ブロック要素）」「inline（インライン要素）」「flex（フレックスボックス）」などがあります。
position（要素の配置方法を決める）
position プロパティを使うと、要素の配置を自由に調整できます。
div {
position: absolute;
top: 50px;
left: 100px;
}
「relative」「absolute」「fixed」「sticky」などの値があり、レイアウトを柔軟に調整できます。
CSSの基本プロパティを活用するコツ
CSSの基本プロパティを活用するためには、次のポイントを意識するとよいでしょう。
統一感のあるデザインを意識する
フォントやカラーの設定は、全体のバランスを考えて統一感を持たせることが重要です。
レスポンシブデザインを意識する
「px」ではなく「%」や「vw/vh」を活用することで、画面サイズに応じた調整が可能になります。
クラスやIDを適切に使い分ける
CSSを適用する際には、クラス（class）とID（id）を適切に使い分けることがポイントです。
.button {
background-color: blue;
color: white;
}
このように共通のスタイルをクラスに設定すると、管理がしやすくなります。
まとめ
CSSの基本プロパティを理解し、適切に使うことで、自由にデザインやレイアウトをカスタマイズできるようになります。本記事で紹介した10個のプロパティを活用し、実際に試しながら学んでいきましょう！
