ホームページ作成ビギナーズガイド：CSS(スタイルシート)

[PR]

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

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

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

.block {
margin-left:20px;
}

-->
</style>
</head>

h2、h3、h4タグ部分にborder(枠線)をつけてみます。
サンプルページ3のstyle部分に下記のように書き加えます。

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

h2 {
font-size:130%;
border-left:10px solid #000099;
border-bottom:1px solid #000099;
margin:0 0 5px 0;
padding:0 0 0 10px;
}

h3 {
font-size:120%;
border-left:10px solid #3333cc;
margin:0 0 5px 0;
padding:0 0 0 5px;
}

h4 {
font-size:110%;
border-bottom:1px solid #3333ff;
margin:0 0 5px 0;
padding:0;
}

-->
</style>
</head>

h1タグ部分の背景の色と文字の色を指定してみます。
サンプルページ2のstyle部分に下記のように書き加えます。

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

h1 {
font-size:150%;
background-color:#000066;
color:#ffffff;
margin:0 0 10px 0;
padding:20px;
}

-->
</style>
</head>