ITキャリアゼミフルスタック株式会社のメディア
トッププログラミング【初心者・未経験向け】覚えておきたいプロパティ-ボックス編-
プログラミング
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デザイナーになるため勉強中です。

「記事名」に関する資料ダウンロードフォーム

このフォームから送信された情報は、プライバシーポリシーに基づいて処理されます。ご同意の上お申し込み下さい。

おすすめの記事

We Are Hiring!

もっと色々な情報を知りたい方はこちらからそうぞ

私たちはミッション・価値観への共感を何よりも大切に考え、一緒に働くメンバーを探しています。SNSや企業ブログでさらにフルスタックの情報をご覧いただき、また戻ってきてくださいね。お待ちしております。