# 背景と草と地面のcss装飾

この左画面を左クリックすれば以下の赤字のスクリプト全部がクリップボードにコピーされるので、右の画面の赤い矢印の右側に貼り付けてください。

    	<style>
    html,
    body {
    	height: 100%;
    	min-height: 100%;
    	background-color: #006;
    	margin: 0;
    	padding: 0;
    }
    div#grass,
    div#ground {
    	position: absolute;
    	bottom: 30px;
    	width: 100%;
    	height: 30px;
    	background-color: #070;
    }
    div#ground {
    	bottom: 0;
    	background-color: #a73;
    }
    	</style>

では「制御」→「実行」メニューを実行してください。
背景が暗闇になり、草と地面が表示されました。
htmlとbodyを高さを画面一杯に背景色をダークブルーにしました。
草と地面はposition:absoluteにすることで底から30pxの位置にセットしました。
幅を100%、高さを30ピクセルにしました。
草の背景色を緑に、地面の背景色を茶色で、底から0ピクセルの位置にセットしました。

### 次へ