CSS実践(4) 「ボックスの横幅と高さの指定」

9889 ワード
height CSS 初心者 ボックス width CSS テキストリンク

1. はじめに

本記事では、CSSの
「ボックスの横幅と高さの指定」
について記載する。
・width:横幅
・height:高さ

2. ボックスの横幅と高さの指定

コンテンツ、パディング、ボーダーの領域は変更可能だが、マージン領域は含まれない。

3. 横幅と高さの変更

h1の横幅と高さの変更

【サンプル】
HTML内は以下のように記述する。

index.html
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>初めてのCSS</title>
  <link rel="stylesheet" href="css/style.css" />
  <style>
    h1,p{
      background-color: #6495ed;
    }
  </style>
</head>
<body>
  <h1>ボックスモデル</h1>
  <p>ボックスモデルの練習です。文章に意味はありません。</p>
</body>
styles.css
h1 {
  width: 400px;
  height: 240px;
}

【表示例】
<before>

<after>

指定したボックスを中央揃え

左右のマージンをオートにする。

styles.css
h1 {
  width: 400px;
  height: 240px;
  margin-right: auto;
  margin-left: auto;
}

【表示例】
<before>

<after>

コンテンツを中央に配置したい場合

styles.css
h1 {
  width: 400px;
  height: 240px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

【表示例】
<before>

<after>

4. マージンとパディングの違い

1.余白ができる位置が違う

2.マージンは負の値が使える

3.マージンは値にautoが使える

以下へ解説を記載する。

1.余白ができる位置が違う


マージン領域はボーダー領域の内側なので、余白はできない。
逆の意味では、ボーダ領域やパディング領域はそれぞれ内側に領域が存在するので余白が設定できる。

2.マージンは負(-)の値が使える

【サンプル】

index.html
<body>
  <h1>1</h1>
  <p>2</p>
</body>
styles.css
h1 {
  background-color: #ccc;
}
p {
  background-color: skyblue;
  margin-top: -60px;
}

【表示例】
<before>

<after>

パディングには負の値は使うことができない。

3.マージンは値にautoが使える

HTMLファイルに関しては上記記載のものを継承

styles.css
h1 {
  background-color: #ccc;
}
p {
  background-color: skyblue;
  margin-top: -60px;
  margin-left: auto;
  margin-right: auto;
}

【表示例】
<before>

<after>

パディングにはautoを使用することはできない。

5.おわりに

次項:CSS実践(5) 「3つのセレクターを使えるようになる」に続く。