6.2 borderプロパティ
[作成] border.html
[フォルダ] webpage/ch06
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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
<!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>