ブログ
【WEB制作の基本】これだけは覚えておきたいCSSプロパティ
更新日：2023年04月24日
WEBサイトを作成するのに欠かせないものに「CSS」があります。
HTMLでWEBページの骨組みを構築するのに対して、CSSは装飾して見た目を整えます。
色、文字の大きさ、レイアウトの幅や高さ、背景等CSSを用いればWEBページのデザインを自由自在に変更することができます。
この記事では、必要最低限覚えておきたいCSSプロパティとその活用方法を解説していきます！
覚えておきたいCSS（フォント・文字色編）
color
文字の色を指定する
p{
color: #ffffff;
}font-family
フォントの種類を指定する
p{
font-family: "Arial","メイリオ";
}font-size
文字フォントの大きさを指定する
p{
font-size: 16px;
}覚えておきたいCSS（テキスト関連編）
text-align
文字の揃え方を指定する
p{
text-align: center;
}text-decoration
文字に装飾線や点滅を指定する
p{
text-decoration: underline;
}letter-spacing
文字の間隔を指定する
p{
letter-spacing: 0.1rem;
}line-height
行の高さを指定する
p{
line-height: 1.75;
}覚えておきたいCSS（要素の横幅や高さ編）
height
要素の高さを指定する
div{
height: 100px;
}width
ボックス領域の幅を指定する
div{
width: 100px;
}覚えておきたいCSS（余白・枠線・角丸編）
padding
要素の内側の余白を指定する
div{
padding: 20px;
}margin
要素の外側の余白を指定する
div{
margin: 20px;
}border
要素の周囲に枠線を指定する
div{
border: 1px solid #ffffff;
}border-radius
要素の角丸を指定する
div{
border-radius: 10px;
}覚えておきたいCSS（背景編）
background-color
背景色を指定する
div{
background-color: #ffffff;
}background
背景の画像、位置、大きさ、繰り返しを指定する
div{
background: url(../img/sample.jpg) center center / cover no-repeat;
}覚えておきたいCSS（要素の表示や配置編）
display
要素の表示形式を指定する
div{
display: none;
}position
要素の配置方法について相対的か絶対的にするかを指定する
div{
position: relative;
}overflow
要素からはみ出た部分の取り扱いを指定する
div{
overflow: hidden;
}z-index
要素の重なり順序を指定する
div{
z-index: 10;
}