C-5. 初期値について、ボックスモデルと指定プロパティ

2021.12.18

fontプロパティを理解しておこう

fontプロパティは、font-size、font-familyなど一括で指定できるプロパティです。内容を確認するためにも実際に記載してみてください。

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
  <title>HTML CSS　Sample</title>
  <style media="screen">
    h1{
      font: 40px selif;
      /*font-size: 40px;
      font-family: self;*/
    }
    p{
      font: bold 20px "メイリオ","Meiryo";
      /*font-weight:bold;
      font-size: 20px;
      font-family: "メイリオ", "Meiryo";*/
    }
 
    .border_test{
     font-size:18px;
     font-family: "Meiryo";
      border: 1px solid red;
      /*border-top: 1px;
      border-left:1px;
      border-right:1px;
      border-bottom:1px;
      border-style:solid ;
      border-top-color:red;
      border-left-color:red;
      border-right-color:red;
      border-bottom-color:red;*/
    }
  </style>
</head>
<body>
  
<h1>フォントの指定の場合</h1>
<p>これはfontですが、他にもいろいろborderやbackgroundやpadding、margin</p>
<div class="border_test"> などがあります。それぞれについて確認してみましょう。</div>
  
</body>
</html>

border, background, font、padding、margin, ul、ol、li, border-radius, transition なども一括で指定することができます。

MDN(一括指定プロパティ)参考に確認してください。

実行結果

ボックスモデルを理解しておこう

幅を持った四角形の中心にコンテンツ（文章、画像等）が入っています。その形状からボックス（箱）といいます。

ボックスモデルは、コンテンツを中心に4つの要素（content[コンテンツ], padding , border, magrin)で構成されています。

ボックス記述例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
  div.box-sample {
    width:100%;
    margin: 50px 50px;/* 色付きの外側がマージンになります。 */
    border: 10px solid #fa09a2;/*色付がボーダになります。*/
    border-radius:3px;
    padding: 20px 20px 20px 20px;/* 文字の外枠がパディングになります。*/
  }
</style>
 
 
<body>
<div class="box-sample">これはボックスのサンプルです。</div>
</body>

ボックスの実行結果

課題

ボックスモデルの4つの要素（content, padding , border, margin)を使ってサイトを完成させてください。 作成したファイル名をindex_2_15.htmlにして送ってください。

マージサイズ：上20px　下、左右10px

パディングサイズ：上20ox 下20px 左15px　右16px

ボーダサイズ：18px　ボーダ色#cac432

XHTML
1
2
3
<body>
<div class="box">課題サンプルの表示です。</div>
</body>

実行結果

ヒント

使用するCSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box{
margin: ;
padding: ;
border: ;
}
 
//marginとpaddingについては、
//指定するピクセルの個数によって反映される箇所が変わってくるため注意
 
//例
//margin:⚪︎px;　←全部
//margin:⚪︎px △px;　←上下⚪︎px、左右△px
//margin:⚪︎px △px ◻︎px; ←上⚪︎px、左右△px、下◻︎px
//margin:⚪︎px △px ◻︎px ⭐︎px; ←上⚪︎px、右△px、下◻︎px、左⭐︎px

課題・復習用キーワード

検索例
🔍CSS　margin　指定の仕方
🔍CSS　padding　指定の仕方
🔍CSS　border　指定の仕方