webサイトの見出しと本文作成
#12 見出しと本文を作ってみよう
http://dotinstall.com/lessons/website_html/9012
を参考に
ウェブサイトの見出しと本文を作成してCSSでレイアウトを決める
まずは、HTMLの編集
<div id="contents">
のところに
<h2>見出し</h2> <p> 内容、コンテンツなどなど</p> <h2>見出し</h2> <p> 内容、コンテンツなどなど</p>
というようにコンテンツを追加して
<div id="sidebar">
のところに
<h3>見出し</h3> <p>サイドバー </p> <h3>見出し</h3> <p>サイドバー </p>
というようにサイドバーの内容を追加しておく
これで
コンテンツとサイドバーができたので
CSSで設定していく
まず、見出しは太文字にしたいので
h2,h3{
font-weight:bold;
}
とする
これで、 h2 h3 両方に適用される
次に、h2 はコンテンツの見出しなので
それらしく設定していく
h2{
}
で設定をしていく
font-size:15px;
でフォントを15 にして
border-left:5px solid #ccc;
で見出しの左に線をつける
padding: 3px 0 3px 10px;
で余白をつける
margin-bottom:10px;
で下にも余白を設定
次に サイドバーの見出し h3 のスタイル
h3{
}
で設定する
内容は
border-bottom:1px solid #ccc;
で下線を引く
padding:3px 0;
で上下に余白設定
margin:bottom:10px;
で下にも余白設定
記事ごとに余白をつけたいので
p{
margin-bottom:1px;
}
とする