HTML、CSS で遊ぼう

HTMLや、CSSを理解をするには、いろいろと使ってみて、その動きを理解することが欠かせません。

<div>を使ってボックスを作成します。

そしてCSS を使って、ボックスを動かしてみましょう。

是非、あなたも一緒に 同じことをやってみてください。
理解することよりも、手が自動的に動くようになるまで鍛錬してください。
そうしないと 実践では役に立ちませんよ!

使用した HTML

<html>
<head>
<link rel="stylesheet" href="aisatsu.css" type="text/css" media="screen" />
</head>

<body>

<div id="box">
   <p> HTML/CSS基礎講座 </p>

   <div class="hako">
         <p> 箱 1 です</p>
   </div>

   <div class="hako2">
         <p> 箱 2 です</p>
   </div>

</div>

</body>
</html>

使用した CSS

body {
	background-color: #e5e5e5;
	text-align:center;
}

#box {
	margin: 20px auto;
	padding: 100px 0px 0 0px;
	width: 400px;
	height: 400px;
	border: solid 5px #ff0000;
	text-align:right;
	background: #ff00ff;
}

.hako {
	width: 300px;
	height: 100px;
	background: #0000ff;
	 text-align:left;
}

コメントを残す

*