6.2 borderプロパティ

[作成] border.html
[フォルダ] webpage/ch06

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
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>border プロパティ</title>
        <style>
            .title {
                border-width: 5px;
                border-style: solid;
                border-color: orange;
            }
 
            .content {
                border-width: 10px;
                border-style: dotted;
                border-color: #20b392;
            }
        </style>
    </head>
    <body>
        <h1 class="title">border プロパティの確認</h1>
        <div class="content">
            <p>点線にしてみました</p>
        </div>
    </body>
</html>

6.3 paddingプロパティ

[作成] padding.html
[フォルダ] webpage/ch06

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
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>padding プロパティ</title>
        <style>
            .title {
                border: 5px solid orange;
                padding-top: 20px;
                padding-left: 100px;
            }
 
            .content {
                border: 10px dotted #20b392;
                padding: 0 0 50px 200px;
            }
        </style>
    </head>
    <body>
        <h1 class="title">padding プロパティの確認</h1>
        <div class="content">
            <p>点線にしてみました</p>
        </div>
    </body>
</html>

6.4 marginプロパティ

[作成] margin.html
[フォルダ] webpage/ch06

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
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>margin プロパティ</title>
        <style>
            p {
                background-color: #85b9e9;
            }
 
            .example1 {
                margin: 50px;
            }
 
            .example2 {
                margin: 50px 100px;
            }
 
            .example3 {
                margin: 50px 10px 50px 200px;
            }
        </style>
    </head>
    <body>
        <p class="example1">上下左右に50pxのマージン</p>
        <p class="example2">上下に50px、左右に100pxのマージン</p>
        <p class="example3">上下に50px、左に200px、右に10pxのマージン</p>
    </body>
</html>

6.5 文字に関するプロパティ

[作成] font.html
[フォルダ] webpage/ch06

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
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>文字に関する プロパティ</title>
        <style>
            .font1 {
                color: #efb2c9;
                font-size: 13px;
            }
 
            .font2 {
                color: #85e524;
                font-size: 15px;
                line-height: 2;
                text-align: center;
            }
 
            .font3 {
                color: black;
                font-size: 40px;
                font-style: italic;
                text-align: right;
            }
        </style>
    </head>
    <body>
        <p class="font1">スタイルの記述方法を勉強しています。</p>
        <p class="font2">
            スタイルの記述方法を勉強しています。<br>
            スタイルの記述方法を勉強しています。スタイルの記述方法を勉強しています。<br>
            スタイルの記述方法を勉強しています。<br>
            スタイルの記述方法を勉強しています。スタイルの記述方法を勉強しています。<br>
            スタイルの記述方法を勉強しています。スタイルの記述方法を勉強しています。
        </p>
        <p class="font3">Kanda</p>
    </body>
</html>

6.6 リストのスタイルに関するプロパティ

[作成] liststyle.html
[フォルダ] webpage/ch06

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
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>list-style-type プロパティ</title>
        <style>
            ul.square {
                list-style-type: square;
            }
 
            ol.upper {
                list-style-type: upper-alpha;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>リスト項目A</li>
            <li>リスト項目B</li>
        </ul>
        <ul class="square">
            <li>リスト項目A</li>
            <li>リスト項目B</li>
        </ul>
        <ol>
            <li>リスト項目1</li>
            <li>リスト項目2</li>
        </ol>
        <ol class="upper">
            <li>リスト項目1</li>
            <li>リスト項目2</li>
        </ol>
    </body>
</html>

6.7 カーソル形状に関するプロパティ

[作成] cursor.html
[フォルダ] webpage/ch06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>カーソル形状に関する プロパティ</title>
        <style>
            .move {
                cursor: move;
            }
 
            .help {
                cursor: help;
            }
        </style>
    </head>
    <body>
        <p class="move">移動</p>
        <p class="help">ヘルプ</p>
    </body>
</html>

6.8 背景に関するプロパティ

[作成] background.html
[フォルダ] webpage/ch06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>背景に関する プロパティ</title>
        <style>
            body {
                background-color: #acd1f5;
                background-image: url(../img/dog.jpg);
                background-repeat: repeat;
            }
        </style>
    </head>
    <body>
    </body>
</html>

6.9 displayプロパティ

[作成] display.html
[フォルダ] webpage/ch06

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>diplayプロパティ</title>
        <style>
            body {
                width: 750px;
                margin: 0 auto;
            }
 
            h2 {
                margin-top: 30px;
                padding-left: 10px;
                border-bottom: 3px solid #63a4c2;
            }
 
            div p {
                border: 2px solid #6ac5ac;
                padding: 5px;
                margin: 10px 0;
            }
 
            strong {
                border: 2px solid #fdc72f;
                padding: 5px;
                margin-top: 10px;
                height: 50px;
            }
 
            div {
                border: 2px solid #d64078;
                padding: 10px;
                margin: 20px 0 0;
            }
 
            .inline {
                display: inline;
            }
 
            .block {
                display: block;
            }
 
            .inline-block {
                display: inline-block;
            }
 
            .none {
                display: none;
            }
 
            .inherit {
                display: inherit;
            }
        </style>
    </head>
    <body>
        <h2>inlineの確認</h2>
        <div>
            <p>p要素の初期値のまま（block）</p>
            <p class="inline">p要素にinlineを指定</p>
            <p class="inline">p要素にinlineを指定</p>
            <p class="none">p要素にnoneを指定</p>
        </div>
        <p>p要素はデフォルトでblockが指定されているため、ブロックレベル要素のように扱われます。<br>
            p要素にinlineを指定した場合、インライン要素のように扱われ、横並びで表示されます。</p>
        <h2>blockとinline-blockの確認</h2>
        <div>
            <strong>strong要素の初期値のまま（inline）</strong>
            <strong class="block">strong要素にblockを指定</strong>
            <strong class="none">strong要素にnoneを指定</strong>
            <strong class="inline-block">strong要素にinline-blockを指定</strong>
            <strong class="inline-block">strong要素にinline-blockを指定</strong>
        </div>
        <p>strong要素はデフォルトでinlineが指定されているため、インラインレベル要素のように扱われます。<br>
            strong要素にblockを指定した場合、ブロックレベル要素のように扱われます。<br>
            strong要素にinline-blockを指定した場合、インラインレベル要素のように扱われますが、<br>
            高さや横幅が指定できるようになるため、strongタグに指定した高さ50pxが適用されます。
        </p>
        <h2>inheritの確認</h2>
        <div>
            <strong>strong要素の初期値のまま（inline）</strong>
            <strong>strong要素の初期値のまま（inline）</strong>
        </div>
        <p>strong要素はデフォルトでinlineが指定されているため、横並びで表示される</p>
        <div>
            <strong class="inherit">strong要素にinheritを指定</strong>
            <strong class="inherit">strong要素にinheritを指定</strong>
        </div>
        <p>strong要素にinheritを指定した場合、親要素であるdiv要素の値(block)が適用され、<br>
            ブロックレベル要素のように扱われます。
    </body>
</html>

6.10 positionプロパティ

[作成] position.html
[フォルダ] webpage/ch06

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>positionプロパティ</title>
        <style>
            .elem {
                position: static;
                border: 3px solid #6ac5ac;
            }
 
            .fixed {
                position: fixed;
                bottom: 0;
                right: 0;
                border: 3px solid #fdc72f;
                width: 200px;
            }
 
            .relative {
                position: relative;
                border: 3px solid #d64078;
                left: 40px;
                top: 100px;
                width: 500px;
                margin-bottom: 50px;
            }
 
            .absolute {
                position: absolute;
                border: 3px solid #0080c0;
                background-color: #fff;
                top: 90px;
                right: 30px;
                width: 300px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div class="elem">
            <p>staticを指定</p>
        </div>
        <div class="fixed">
            <p>fixedを指定</p>
        </div>
        <div class="relative">
            <p>relativeを指定</p>
        </div>
        <div class="relative">
            <p>これはrelativeな要素です。もしこの要素がposition: static;の場合、absoluteな子要素の位置はずれてしまいます。
                そして、子要素はbodyからの相対位置で指定されます。</p>
            <div class="absolute">
                <p>absoluteを指定。親要素からの相対位置で指定されます。</p>
            </div>
        </div>
    </body>
</html>