★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★

テーマ６．文章を枠で囲む

文章を枠で囲んで視覚的に他の部分と区別したいという場合があります。
そこで今回は、文章を枠で囲む方法を紹介します。
このページでも何度も使われていますね。

＜htmlの記述例１＞

＜htmlの説明１＞
対象となる文章のすぐ外側にclassを指定しています。
この例ではlayout2というclassの指定です。
layout2のスタイルはcssファイルに書かれています。
記述例１の実際の表示はサンプルページのアをご覧下さい。
なお、<br>は改行タグで、これがないと三行にはなりません。

＜cssファイルの記述例＞

＜cssファイルの説明＞
padding: 5px 15px;
　枠の内側の余白を上下は5px、左右は15px
　（これはテーマ４で出てきましたね）
margin: 3px 0px;
　枠の外側の余白を上下は3px、左右は0px
　（これもテーマ４で出てきましたね）
border: 1px solid #191970;
　枠線の太さ、種類、色を指定
background-color: #b0e0e6;
　枠内の背景色を指定

＜追加説明＞
これまで div class="layout2" のように、divタグを頻繁に使っています。
似たようなものとして、spanというタグがあります。
記述の仕方は span class="layout2" のように書きます。
ここで、divとspanの使い分けについて説明しておく必要があります。
divはまとまった対象に対してスタイルを指定する場合に使います。
divタグの前後では自動的に改行されます。
spanは文章の一部分のみにスタイルを指定する場合に使います。
spanタグの前後では改行されません。

＜htmlの記述例２－Ａ＞

＜htmlの記述例２－Ｂ＞

＜htmlの説明２＞
Ａはdivを使う場合の例、Ｂはspanを使う場合の例です。
実際の表示はサンプルページのイとウをご覧下さい。

以上のような方法で、文章を枠で囲むことができます。