■昨日の復習■

え～と、今はスタイルシートで段落の回りに枠をつけて、背景色を指定するなどということをやりました。

たとえば、こんなもの。

こんなみだし～～。

ソースはこう。

<p style="border:solid 1px #000000; border-left-width: 15px; padding: 3px; padding-left:15px; background-color:#FFCCFF">こんなみだし～～。</p>

んん。復習といいつつちょっぴり応用編も含まれてます。

まず
・border: solid 1px #000000;
で、枠線全部を指定。黒い直線の枠を1pxで引く。

そのあと
・border-left-width:15px;
と、左側の枠線の幅だけを上書きしてます。

どうように
・padding:3px;
で、全体のパディング（枠から文字までの距離）を指定してから

・padding-left: 15px;
と、左側だけあけてます。

paddingの場合他の書き方もあるけれど、ちょっとまた今度。

これだけが正解というわけじゃなくて、ほかにも同じ表示になるような書き方はいろいろあります。が、いっぺんに色々言うと混乱するかもなので、徐々に小出しにしていきます！

さらに応用編としてこんなのは？

■見出し～～

どうやって書くかは考えてみてね！　線の種類は doubleだよ。ちなみにdoubleにして1pxだと二重線にできなくてsolidと同じになっちゃうので注意。

---

■今日の講義■

いままで、枠をつけるのを全部<p>タグでやってきました。複数の行にまとめて枠をつけるのは、「楽天日記」のなかで使えるタグは<p>タグだけ。

日記以外のページとトップページはテーブルタグも使えるのでまたいつか。

ですが、見出しを表すのには、本当は<p>タグではなくて、<h1>タグを使います。見出しの初めに、<h1>、終わりに、</h1>。

で実際に書いてみましょう。すると。

こんなかんじ

うわ！ぶさいく！　ブラウザで字がでっかくされてます。そういうわけなんで、これもスタイルシートで自分の好きな大きさにしてみましょう。

書き方はいままでとおんなじです。

<h1 style="">

の中に指示を書きます。フォントの大きさはfont-sizeで指定します。いろいろ書き方はあるんですけど。ここはとりあえず

font-size:14pt;

14ポイントと指定しましょう。（pxピクセルでもいいけど…）

<h1 style="font-size: 14pt;">こんなかんじで</h1>

こんなかんじで

でこれだけだと寂しいので、今まで習った枠などをつけてみたりしてください。

たとえばこんなかんじで

じゃ～、今日はこの辺で～。