2024年7月13日 10:54【初心者・未経験向け】覚えておきたいプロパティ-ボックス編-
CSSは、Webページの見た目を整えるために不可欠なツールです。今回の記事では、特にWebページの「ボックス」を形成する要素に焦点を当て、そのサイズや表示方法を調整するCSSプロパティについて解説します。これらの基本を理解することで、Webデザインの初心者でも効果的にページレイアウトを構築できるようになります。
はじめに
あらかじめHTMLで、下記を作成しておいてください。今回も【初心者・未経験者向け】CSSをデザインする準備をしようPart2で紹介したCSSを読み込む方法で行っていきますので、紐付けておきましょう！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カラーボックス</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="red--box"></div>
<div class="green--box"></div>
</body>
</html>ボックスモデルはWebページのレイアウトを構成する基本です。このセクションでは、それぞれのプロパティがどのように役立つかを、具体的なコード例とともに紹介します！
width-幅-
widthプロパティは、要素の幅を設定します。このプロパティを使うことで、要素が画面上で占める横のスペースを調整できます。
.red--box {
width: 200px;
height: 100px;
background-color: red;
}このコードは、クラス.red--boxが指定された要素の幅を200ピクセル、高さを100ピクセルに設定し、背景色を赤にします。
height-高さ-
heightプロパティは、要素の高さを設定します。これにより、要素が画面上で占める縦のスペースを調整できます。
.green--box {
width: 200px;
height: 150px;
background-color: green;
}このコードは、クラス.green--boxが指定された要素の幅を200ピクセル、高さを150ピクセルに設定し、背景色を緑にします。
background-color-背景色-
HTML要素の背景色を指定するために使用されます。
background-colorプロパティは、色名、RGB値、RGBA値、HEXコード、HSL値、HSLA値など、様々な方法で色を指定することができます。
- 色名で指定:
background-color: red; - RGBで指定:
background-color: rgb(255, 0, 0); - RGBAで指定:
background-color: rgba(255, 0, 0, 0.5);(ここで、0.5は透明度) - HEXコードで指定:
background-color: #FF0000; - HSLで指定:
background-color: hsl(0, 100%, 50%); - HSLAで指定:
background-color: hsla(0, 100%, 50%, 0.5);
このブログで、CSSでボックスを作ることができました！次回は【初心者・未経験向け】覚えておきたいプロパティ-余白編-で要素の余白の作り方について紹介します！
前回の記事はコチラ▶ 【初心者・未経験向け】覚えておきたいプロパティ-文字のデザイン編-
次回の記事はコチラ▶ < coming soon... >
この記事を書いた人
アパレル店員からWEBデザイナーになるため勉強中です。
アパレル店員からWEBデザイナーになるため勉強中です。
.png&w=640&q=75)
