文章を入れる
タイトルの次は、ホームページに書く文章を、contentのboxの中に入れていきましょう。
index.htmlへコピー→<div id="content">
<h2>私の節約に対する考え</h2>
<p>ここに、あなたの考えを記入して下さい</p>
<p>ここに、あなたの考えを記入して下さい</p>
</div>
この様に<div id="content">とcontentのboxの終了タグの</div>の間に コピーペーストして下さい。キーボードのEnterキーで<div id="content">と</div>間を改行させると見やすいですよ。
このままでは、見にくいのでindex.cssで装飾しましょう。
index.cssの#contentの{かっこ}内にコピー→
width:420px; height:400px; float:left;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
border-top: 10px dotted #ffe4b5;
border-left: 10px dotted #ffe4b5;
border-right: 10px dotted #ffe4b5;
border-bottom: 10px dotted #ffe4b5;
background:#ffffff; margin-right:10px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
border-top: 10px dotted #ffe4b5;
border-left: 10px dotted #ffe4b5;
border-right: 10px dotted #ffe4b5;
border-bottom: 10px dotted #ffe4b5;
background:#ffffff; margin-right:10px;
#contentの記述を全部消してから、このソースを丸々コピーして下さい。
背景色を白に、大きい点線で枠を作り文字の位置を10pxずつ余白を作るというスタイル変更です。
合計:
 |