0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-08-24

##1. はじめに
本記事では、CSSの
「ボックスの横幅と高さの指定」
について記載する。
width:横幅
height:高さ
##2. ボックスの横幅と高さの指定
コンテンツ、パディング、ボーダーの領域は変更可能だが、マージン領域は含まれない。
ボックスモデル_原紙.png
##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>
w-h_bef.png
<after>
w-h_aft.png
###指定したボックスを中央揃え
左右のマージンをオートにする。

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

【表示例】
<before>
margin-no.png
<after>
margin-auto.png
###コンテンツを中央に配置したい場合

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

【表示例】
<before>
text-align_bef.png
<after>
text-align_aftv2.png
##4. マージンとパディングの違い
:::note info
1.余白ができる位置が違う
:::
:::note
2.マージンは負の値が使える
:::
:::note
3.マージンは値にautoが使える
:::
以下へ解説を記載する。
###1.余白ができる位置が違う
ボックスモデル_原紙.png
マージン領域はボーダー領域の内側なので、余白はできない。
逆の意味では、ボーダ領域やパディング領域はそれぞれ内側に領域が存在するので余白が設定できる。
###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>
mar_-_bef.png
<after>
mar_-_aft.png

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

###3.マージンは値にautoが使える
HTMLファイルに関しては上記記載のものを継承

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

【表示例】
<before>
mar-auto_bef.png
<after>
mar-auto_aft.png

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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?