CSSは「Cascading Style Sheets」の略で、WebサイトやWebアプリのレイアウトやデザインを制御するスタイルシート言語です。
CSSを使うことで、HTMLの構造とデザインを分離でき、同じHTMLに対して異なるスタイルを適用したり、複数のページで一貫したデザインを保つことができます。
文字スタイルの例
h1 {
color: blue; /* 文字色を青に */
font-size: 24px; /* フォントサイズを24pxに */
text-align: center; /* 中央揃え */
}
p {
color: #333; /* 文字色をダークグレーに */
line-height: 1.5; /* 行の高さを1.5倍に */
}
背景とボーダーの例
.box {
background-color: lightblue; /* 背景色を薄い青に */
border: 2px solid red; /* 赤い2pxの枠線 */
padding: 20px; /* 内側の余白を20px */
margin: 10px; /* 外側の余白を10px */
}
ボタンの例
button {
background-color: green; /* 背景色を緑に */
color: white; /* 文字色を白に */
padding: 10px 20px; /* 上下10px、左右20pxの余白 */
border: none; /* 枠線なし */
border-radius: 5px; /* 角を5px丸める */
cursor: pointer; /* マウスオーバーで手の形に */
}