Now is better than never

読者です 読者をやめる 読者になる 読者になる

無糖の日々

The just desserts is also desserts.

CSS基礎編-3 背景編

f:id:Detsch:20160829223944p:plain

背景に色を配置してみる

 

配置の指定には(top,right,bottom,left)の他に値を指定することで位置が決まる(static,relative,absolute,fixed)があります。

 

static :通常の位置

relative :ボックス(要素を生成するもの)の相対的な位置。通常の位置から指定数値分移動する

absolute :位置の基準が包含ブロック

fixed :ウィンドウの表示を基準とする

以下CSS,HTML記述

 ⅠCSS記述

@charset"UTF-8";

body{
margin:0px;}
div{
margin:0px;
width:150px;
height:150px;
color:#ffffff;
font:24px Impact,"sans-serif";

}
#red{
position:static;
top:0px;
left:150px;
background-color:#ff0000;
}
#green{
position:relative;
top:0px;
left:0px;
background-color:#009966;
}
#yellow{
position:absolute;
top:0px;
left:150px;
background-color:#ffcc00;
}
#Light-blue{            後半はfixedで統一
position:fixed;
top:150px;
left:150px;
background-color:#3399ff;
}
#Blue{
position:fixed;
top:300px;
left:0px;
background-color:blue;
}
#Indigo{
position:fixed;
top:300px;
left:150px;
background-color:#165e58;
}
#Black{
position:fixed;
top:300px;

left:300px;
background-color:black;
}
#Purple{
position:fixed;
top:150px;
left:300px;
background-color:#745399;
}
#Yellow-green{
position:fixed;
top:0px;
left:300px;
background-color:#b8d200;
}

Ⅱ HTML記述

<body>
<div id="red">red</div>
<div id="green">green</div>
<div id="yellow">yellow</div>
<div id="Light-blue">Light-blue</div>
<div id="Blue">Blue</div>
<div id="Indigo">Indigo</div>
<div id="Black">Black</div>
<div id="Purple">Purple</div>
<div id="Yellow-green">Yellow-green</div>
<link rel="stylesheet"href="8-1CSS.css"type="text/css">
</body>

 

出力結果

f:id:Detsch:20160829223543p:plain

CSS記述が長くなってしまいますね(^_^;) う~む。

 

<