ひなこの楽天web制作研究所

■昨日までの復習■

1＞段落を表すのに<p>タグを使います。段落の初めに<p>と書き、段落のおわりに</p>と書きます。

2＞段落の回りに枠線を付けるのに、スタイルシートで指定します。指定の仕方は、上の<p>タグのところに <p style="">のように書いて、""の中に指示を書きます。

3＞枠線の指示は　border:(ボーダー　コロン）と記述し、そのあとに、枠線の種類、枠線の太さ、枠線の色　と記述します。たとえば　border: solid 2px #336633;です。指示の終わりにはセミコロン(;)をつけます。

4＞枠線から枠線内の文字までの距離は padding: 5px;のように記述します。（これも終わりにセミコロン。）

5＞枠線から、枠線の外側の文字などの要素までの距離は margin: 5px;のように記述します。（これも終わりにセミコロン。）

以上まとめて書くと

<p style="border: solid 2px #336633; padding: 5px; margin: 5px;">こんなかんじです</p>

表示すると

こんなかんじです

---

■今日の講義■

枠線についてですが、全体的に枠線をつけたいときは、いままでのとおりですが、下だけ枠線をつけたいとき、右だけ枠線をつけたいとき、それぞれ別に指示することができます。

そのばあいは
border
とかかずに

border-top：上
border-bottom：下
border-left：左
border-right：右

を記述することができます。

たとえば
<p style="border-bottom: solid 2px #336633; solid 2px #336633; padding: 5px; margin: 5px;">このようにかくと</p>

このようにかくと

このようになります。

これを応用して、左と下だけとか指定してみたりするとどうでしょうか。

見出しの飾りになりますね？

色とか工夫すると結構おしゃれな感じにもできますよね？

では、本日はこの辺で～～。

---

よかったら、感想とか質問とか、もっとこういう事が知りたいとか合ったらお知らせください。