本記事は筆者の独学のメモ書きのようなものなので、
読者の皆様は参考にしないで下さい。
あくまで、筆者の復習用です。
目次
1.はじめに
2.ボックスの横幅と高さの指定
3.横幅と高さの変更
4.マージンとパディングの違い
5.おわりに
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. おわりに
本記事で説明不足な点もあると思うので、以下MDN参照リンクあり。
MDNのリンク:https://developer.mozilla.org/ja/
↧