CSS(スタイルシート)入門講座5／ホームページ作成ビギナーズガイド

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

divタグを使って左に余白をとる部分を作ってみます。
サンプルページ4のstyle部分に下記のように書き加えます。

<head>
（省略）
<style type="text/css">
<!--
（省略）

.block {
margin-left:20px;
}

-->
</style>
</head>

「.block」でblockというclassを作りました。
(このclass名はあまり好ましくないかもしれませんが、便宜上。 divタグご参照)

そして、class="block"の部分は左側の余白が20ピクセル、と指定しました。

<body>～</body>内に

と書いて、divタグにblockというclassを指定すると、divタグで囲われた部分の左側に20ピクセルの余白ができることになります。

サンプルページ4のbody内に下記のように書き加えます。

　　　<h2>HTMLについて</h2>

　　　　　　<h3>HTMLとは</h3>
　　　　　　（省略）

　　　　　　</div>

　　　<h2>CSSについて</h2>

　　　　　　<h3>CSSとは</h3>
　　　　　　（省略）
　　　　　　　　　<li>クロスサイトスクリプティング・・・（省略）</li>
　　　　　　　　　</ul>

　　　　　　</div>

そうすると見た目はこうなります。→サンプルページ5