DIVでボックスを作る。 背景にアニメーションGIFを使いました。 このボックスは縦200Pxで高さ100Pxです。透明度はopacity命令で0.3。
このボックスは縦200Pxで高さ100Pxです。透明度はopacity命令で0.8。
|
<!DOCTYPE html> <HTML lang="ja"> <HEAD> <META charset=UTF-8"> <META NAME="KEYWORDS" CONTENT="HTML5"> <TITLE>DIVについて</TITLE> <link rel="stylesheet" href="ptest.css"> </HEAD>
<body background="lady2.gif"> <p id="p30"><b>DIVでボックスを作る。</b></p> <p><b>背景にアニメーションGIFを使いました。</b></p> <div id="toumeido03">このボックスは縦200Pxで高さ100Pxです。透明度はopacity命令で0.3。</div> <div id="toumeido08">このボックスは縦200Pxで高さ100Pxです。透明度はopacity命令で0.8。</div> </body> </HTML> |
スタイルシート
@charset "UTF-8"
/* 背景の指定 */
body{
/* この記述がないとボックスが表示されない */
}
div {
margin:50px; /* このボックスの周囲の空白範囲 */
padding: 2em; /* ボックス内側の空白2文字分 */
border: 10px solid black; /* 境界の線の太さと色 */
/* ボックスの大きさの指定 */
width: 200px;
height: 100px;
background-color: green;
}
#toumeido03 {
opacity: 0.3;
}
#toumeido08 {
opacity: 0.8;
}
/* ここの記述は前回を参照してくださ。*/
p{
color:black;
}
#p30 {
font-size: 30px;
}