ブログ
【WEB制作の基本】CSSとは?
更新日:2023年04月22日
WEBサイトを作成するのに欠かせないものに「CSS」があります。
HTMLでWEBページの骨組みを構築するのに対して、CSSは見た目の装飾を整えます。
色、文字の大きさ、レイアウトの幅や高さ、背景等CSSを用いればWEBページのデザインを自由自在に変更することができます。
この記事では、CSSの特徴や書き方を解説していきます!
CSSとは
CSS(Cascading Style Sheets)は、WEBページを作成するためのマークアップ言語です。
例えば文字や背景の色、テキストや画像の配置などをCSSで指定します。
HTMLは、WEBページのレイアウトやデザインを決める役割を持っています。
CSSの書き方
CSSは、以下の3つの要素で構成されています。
1. セレクタ
セレクタは、HTMLの中でデザインを適用するタグを記述します。
2. プロパティ
プロパティは、適用させるデザインの種類を記述します。
3. 値
値は、プロパティに対応した値を記述します。
実際にCSSでデザインする際は、以下のように記述します。
セレクタ {
プロパティ: 値;
}
CSSの記述方法
CSSをWEBページに適用させる方法として、以下の3つが挙げられます。
1. 外部ファイルとして読み込む
<head>
<link rel="stylesheet" href="style.css">
</head>
2. head要素内に記述する
<head>
<style>
h1 {
color: #ffffff;
}
p {
color: #000000;
}
</style>
</head>
3. HTMLタグに記述する
<h1 color="#ffffff">見出し、見出し、見出し</h1>
<p color="#000000">段落、段落、段落</p>