HTML 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

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system