DIVでボックス表示

■もどる

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;

}

 

inserted by FC2 system