ＤＩＶについてその２

使用した写真
使用した写真
　ついでに試しに＜ＤＩＶ＞の中に文字や画像それから＜ｐ＞を入れてみました。結果は・・・
■もどる
これは椿です。春の日の陽光を受けて静かに咲いていました。
















これは椿です。春の日の陽光を受けて静かに咲いていました。

これは椿です。春の日の陽光を受けて静かに咲いていました。

　
<!DOCTYPE html>
<HTML lang="ja">
<HEAD>
<META charset=UTF-8">
<META NAME="KEYWORDS" CONTENT="HTML5">
<TITLE>ＤＩＶについてその２</TITLE>
<link rel="stylesheet" href="divtest2.css">
</HEAD>
　
<BODY STYLE="font-size:1em">
　
<DIV id="box1"><IMG SRC="SANY0392.jpg" ALIGN="LEFT" WIDTH="239" HEIGHT="185">これは椿です。春の日の陽光を受けて静かに咲いていました。
</DIV>
　
<DIV id="box2"><IMG SRC="SANY0392.jpg" ALIGN="LEFT" WIDTH="239" HEIGHT="185"><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
これは椿です。春の日の陽光を受けて静かに咲いていました。
</DIV>
　
<DIV id="box3"><IMG SRC="SANY0392.jpg" ALIGN="RIGHT" WIDTH="239" HEIGHT="185">
<p>これは椿です。春の日の陽光を受けて静かに咲いていました。</p>
</DIV>
　
</BODY>
</HTML>
　

ＣＳＳの内容

@charset "UTF-8"
/*　背景の指定　*/
body{
/* この記述がないとボックスが表示されない　*/
}
　
div {
font-size: 12px;
}
　
#box1 {
margin-left: 50px;
padding: 2em; /* ボックス内側の空白２文字分 */
border: 10px solid black; /*　境界の線の太さと色 */
/* ボックスの大きさの指定　*/
width: 259px;
height: 205px;
background-color: green;
}
　
#box2 {
margin-left:100px; /* このボックスの周囲の空白範囲　*/
padding: 2em; /* ボックス内側の空白２文字分 */
border: 10px solid black; /*　境界の線の太さと色 */
/* ボックスの大きさの指定　*/
width: 259px;
height: 205px;
background-color: green;
}
　
#box3 {
margin-left:150px; /* このボックスの周囲の空白範囲　*/
padding: 2em; /* ボックス内側の空白２文字分 */
border: 10px solid black; /*　境界の線の太さと色 */
/* ボックスの大きさの指定　*/
width: 259px;
height: 205px;
background-color: green;
}
/* ここの記述は前回を参照してくださ。*/
p{
color:black;
}
　
#p30 {
font-size: 30px;
}
　
inserted by FC2 system