TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / 枠付きボックス(CSS)
枠付きボックス(CSS)


スタイルシートを使用して、枠付きのボックスを作成してみます。

※ここで使用しているスタイルシートについての詳細は、「ボックス」「テキスト・フォント」カテゴリーをご覧ください。

※スタイルシートの設定方法については、「スタイルシートの基本」をご覧ください。


 作り方
ボックスを作成して、その周囲に枠線を指定します。

枠線の色や太さは border で、ボックス内の背景色は background-color で指定します。また、ボックスの幅を指定する場合は、width で指定します。

Pタグを使って作成すると、次のようになります。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.box1 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<P CLASS="box1">

Webサイト作成情報!
<BR>
ここに内容を入れていきます。



</P>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報!
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。


上記の例では、枠線の太さを 1px に指定しています。


内容と枠線の間に余裕を持たせたい場合は、padding を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.box2 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
padding: 10px; /* ボックス内の余白 */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<P CLASS="box2">

Webサイト作成情報!
<BR>
ここに内容を入れていきます。



</P>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報!
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。



内容を中央に配置したい場合は、text-align を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.box3 {
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
padding: 10px; /* ボックス内の余白 */
text-align: center; /* 文字の位置 */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<P CLASS="box3">

Webサイト作成情報!
<BR>
ここに内容を入れていきます。ここに内容を入れていきます。



</P>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報!
ここに内容を入れていきます。ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。




 ボックスの背景に画像を使う
ボックスの背景に画像を使いたいときは、background-image を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.box4 {
width: 350px; /* ボックスの横幅 */
background-image: url(image/back.gif); /* 背景画像 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
padding: 10px; /* ボックス内の余白 */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<P CLASS="box4">

Webサイト作成情報!
<BR>
ここに内容を入れていきます。



</P>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報!
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。

← 背景に使用した画像(back.gif



 色々な枠線
枠線の種類や太さを変更することで、色々なタイプのボックスを作成できます。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.box5 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 dotted; /* 枠線(太さ・色・スタイル) */
padding: 10px; /* ボックス内の余白 */
}


.box6 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 4px #1C79C6 dotted; /* 枠線(太さ・色・スタイル) */
padding: 10px; /* ボックス内の余白 */
}


.box7 {
width: 350px; /* ボックスの横幅 */
background-color: #E3F0FB; /* 背景色 */
border: 4px #1C79C6 outset; /* 枠線(太さ・色・スタイル) */
padding: 10px; /* ボックス内の余白 */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<P CLASS="box5">

Webサイト作成情報!
<BR>
ここに内容を入れていきます。



</P>

<P CLASS="box6">

Webデザイン情報!
<BR>
ここに内容を入れていきます。



</P>

<P CLASS="box7">

Webプログラミング情報!
<BR>
ここに内容を入れていきます。



</P>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報!
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。

Webデザイン情報!
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。

Webプログラミング情報!
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。




 ボックスの上下にマージンを入れる
ボックスの上下にマージンを入れたいときは、margin を指定します。

【 <HEAD> 〜 </HEAD> 】


<STYLE TYPE="text/css">
<!--

.box8 {
background-color: #E3F0FB; /* 背景色 */
border: 1px #1C79C6 solid; /* 枠線(太さ・色・スタイル) */
margin-top: 30px; /* ボックス上部の余白 */
margin-bottom: 10px; /* ボックス下部の余白 */
}


-->
</STYLE>




【 <BODY> 〜 </BODY> 】


<DIV CLASS="box8">

Webサイト作成情報!
<BR>
ここに内容を入れていきます。



</DIV>

・これをブラウザで見ると次のように表示されます

Webサイト作成情報!
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。
ここに内容を入れていきます。

上記の例では、ボックスの上部に 30px、下部に 10px のマージンを入れています。


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲