CSSについて説明します。
box modelについて説明します。
box model
ボックスモデルは下記で構成されます。
- margin
- border
- padding
図示すると下記となります。
samples
サンプルで確認します。
test_001.css
div.test-001-001
{
margin: 50px;
border: 1px solid;
padding: 50px;
}
test_001.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_001.css"/></head>
<body>
<div class="test-001-001"></div>
</body>
表示は下記となります。
test_001.css
div.test-001-002
{
margin: 200px;
border: 100px solid;
border-color: rgba(180, 242, 214, 0.5);
padding: 50px;
background-color: rgba(245, 245, 245, 0.8);
}
div.test-001-002::after
{
content: "content";
}
test_001.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_001.css"/></head>
<body>
<div class="test-001-002"></div>
</body>
表示は下記となります。
test_001.css
div.test-001-003
{
width: 200px;
height: 200px;
margin: 50px;
border: 1px solid;
padding: 50px;
background-color: rgba(51, 153, 255, 0.1);
}
div.test-001-003::after
{
content: "content";
}
test_001.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_001.css"/></head>
<body>
<div class="test-001-003"></div>
</body>
表示は下記となります。
test_001.css
div.test-001-004
{
width: 200px;
height: 200px;
background-color: rgba(51, 153, 255, 0.1);
}
test_001.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_001.css"/></head>
<body>
<div class="test-001-004"></div>
</body>
表示は下記となります。
test_001.css
div.test-001-005
{
width: 200px;
height: 200px;
margin: 50px;
border-color: rgba(0, 0, 240, 1.0);
border-style: solid;
border-top-width: 10px;
border-bottom-width: 20px;
border-left-width: 30px;
border-right-width: 40px;
}
test_001.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_001.css"/></head>
<body>
<div class="test-001-005"></div>
</body>
表示は下記となります。
test_001.css
div.test-001-006
{
width: 200px;
height: 200px;
margin: 50px;
border-color: rgba(0, 0, 240, 1.0);
border-style: solid;
border-top-width: 10px;
border-top-color: rgba(102, 242, 75, 1.0);
border-bottom-width: 20px;
border-bottom-color: rgba(75, 242, 214, 0.5);
border-left-width: 30px;
border-left-color: rgba(176, 245, 203, 0.96);
border-right-width: 40px;
border-right-color: rgba(211, 255, 128, 1.0);
}
test_001.html
<!DOCTYPE html>
<head><link rel="stylesheet" type="text/css" href="./test_001.css"/></head>
<body>
<div class="test-001-006"></div>
</body>
表示は下記となります。
詳細
詳細を示します。
margin-top
margin-bottom
margin-left
margin-right
padding-top
padding-bottom
padding-left
padding-right
border-top-width
border-bottom-width
border-left-width
border-right-width
border-width
border-top-color
border-bottom-color
border-left-color
border-right-color
border-color
border-top-style
border-bottom-style
border-left-style
border-right-style
border-style
サンプルは上記を参照ください。
記法
記法は下記です。
div
{
margin: 10px; /* (top + bottom + left + right) */
}
div
{
margin: 10px 10px; /* (top + bottom) (left + right) */
}
div
{
margin: 10px 10px 10px; /* (top) (left + right) (bottom) */
}
div
{
margin: 10px 10px 10px 10px; /* (top) (right) (bottom) (left) */
}