本文の開始

無料ホームページ作成 CSS(スタイルシート)入門 y-labo - CSSでボックスを設定

無料ホームページCSS作成情報。無料でWeb/HP製作。ホームページ入門から、
HTML・CSS・SEO対策・フリーソフトから無料テンプレートまで。

格安ホームページ制作激安HPWeb製作のy-labo.net(わいらぼ、ワイラボ)

  • ホームページ制作費を安く・格安・激安!
  • ホームページ制作を早く!
  • でもかっこいいホームページにカスタマイズ
  • SEO対策でアクセスアップ
  • ホームページ制作後も安心サポート
  • 自分でもホームページを修正したい

3-7)CSS(スタイルシート)でボックスを設定 CSS(スタイルシート)入門

無料ホームページ作成情報 トップ > CSS(スタイルシート)入門 > 3-7)CSS(スタイルシート)でボックスを設定

 

ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。

CSS(スタイルシート)でボックスを設定について

CSS(スタイルシート)で書式を設定するための、最も基本的な設定の1つにこのボックスの設定があります。これには、HTMLタグにはない設定も多く。これを正しく理解するかどうかで、スタイルシート全体の理解度にも影響する重要な設定です。

ここでは、範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、ボックスのプロパティを設定していますが、<h>タグや<p>タグなどにも設定できます。

このページで最終的に作成するページの見本はこちらです。

ボックスで背景を設定 「background-color」プロパティ / 「background-image」 プロパティ

範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、「background-color」プロパティで設定します。

色の指定方法は「1-4)ホームページ上の色」を参照してください。

背景を色で設定する 「background-color」プロパティ

3-4)CSS(スタイルシート)でページを設定」の「background-color」プロパティと同じ設定です。

ブラウザ別対応表(background-color)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

例)
.box-tokyo {
background-color: #FFFF99;
}


<div class="box-tokyo">・・・</div>

見本画像

背景を画像で設定する 「background-image」プロパティ

サンプル画像範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、「background-image」プロパティで設定します。

背景画像は、そのまま使用すると見本のように、タイルのように並べて表示されます。


ブラウザ別対応表(background-image)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

例)
.box-tokyo {
background-color: #FFFF99;
background-image: url(image/bg_sample1.gif);
}


<div class="box-tokyo">・・・</div>

見本画像

「background-repeat」プロパティで背景を画像の繰り返し方法を設定

サンプル画像範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、「background-repeat」プロパティで設定します。

背景画像は、繰り返し表示されますが、その繰り返し方法を指定します。

値には以下の値を入力します。

repeat-x : 横方向に並べる
repeat-y : 縦方向に並べる
no-repeat :1つだけ表示する
repeat : タイルのように敷き詰める(標準設定)

ブラウザ別対応表(background-repeat)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

例)
.box-tokyo {
background-color: #FFFFCD;
background-image: url(image/bg_sample2.jpg);
background-repeat: repeat-y;
}


<div class="box-tokyo">・・・</div>

見本画像

「background-position」プロパティで背景を画像の表示位置を設定

サンプル画像範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、「bbackground-position」プロパティで設定します。

背景画像は、標準では繰り返し表示されますが、1つだけ表示してそれをどこに表示するかを設定します。

値には以下の値を入力します。

横方向 left(左) center(中央) right(右)
縦方向 top(上) center(中央) bottom(下)

例)
background-position: center center; - 横位置「中央」、縦位置「中央」
background-position: right bottom; - 横位置「右」、縦位置「下」
background-position: center; - 横位置「中央」、縦「位置「中央」
background-position: left; - 横位置「左」、縦位置「中央」(省略すると中央になる)
background-position: bottom; - 横位置「中央」(省略すると中央になる)、縦位置「下」

また、ピクセルやパーセンテージで数値を入力することもできます。数値を指定する場合は、左上を基準とします。

例)
background-position: 100px 200px; - 横位置左から「100px」、縦位置上から「200px」
background-position: 30% 50%; - 横位置左上から「30%」、縦位置上から「50%」

ブラウザ別対応表(background-position)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
×

例)
.box-tokyo {
background-color: #FFFFCC;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
}


<div class="box-tokyo">・・・</div>

見本画像

「background-attachment」プロパティで背景のスクロールを設定

サンプル画像範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、「background-attachment」プロパティで設定します。

表示した背景画像は、ページをスクロールするといっしょにスクロールしていきます。


見本画像

これを固定するための設定を「background-attachment」で行います。

値には以下の値を入力します。

fixed : 固定する
scroll : スクロールする(標準)

ブラウザ別対応表(background-attachment)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

例)
.box-tokyo {
background-color: #FFFFCC;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
background-attachment: fixed;
}


<div class="box-tokyo">・・・</div>

見本画像

このページのTOPへ

ボックスでサイズを設定 「width」プロパティ / 「height」プロパティ

範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、「width」プロパティと「height」プロパティで設定します。

width:横の広さ
height:縦の高さ

ブラウザ別対応表(width/height)
  Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
width
height ×

例)
.box-tokyo {
background-color: #FFFFCC;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
height: 400px;
width: 300px;

}


<div class="box-tokyo">・・・</div>

見本画像

このページのTOPへ

ボックスで余白を設定 「margin」プロパティ / 「padding」プロパティ

範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、余白を設定します。

余白には、「margin」プロパティと「padding」プロパティの2種類あります。「margin」プロパティは外側の余白(下記の例でいうと水色の部分)、「padding」プロパティは内側の余白(下記の例で黄色い部分)になります。

余白見本画像

例)
margin: 1px; - 上下左右「1px」
margin: 1px 2px; - 上下「1px」、左右「2px」
margin: 1px 2px 3px; - 上「1px」、左右「2px」、下「3px」
margin: 1px 2px 3px 4px; - 上「1px」、右「2px」、下「3px」、左「4px」

ブラウザ別対応表(margin)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
ブラウザ別対応表(padding)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

例)
.box-tokyo {
background-color: #FFFFCC;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
height: 400px;
width: 300px;
margin: 10px;
padding: 20px;

}

見本画像

上下左右の余白を個別に指定

「margin」と「padding」は、それぞれ「-top」「-right」「-bottom」「-left」で個別に指定することもできます。

ブラウザ別対応表(margin)
  Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top
-right
-bottom
-left
ブラウザ別対応表(padding)
  Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top
-right
-bottom
-left

例)
.box-tokyo {
background-color: #FFFFCC;
background-image: url(image/bg_sample1.gif);
background-repeat: no-repeat;
background-position: center 100px;
height: 400px;
width: 300px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;

padding: 10px;
}

見本画像

このページのTOPへ

ボックスで枠線を設定 「border」プロパティ

範囲を設定する<div>タグに「.box-tokyo」というクラスを作成して、枠線を設定します。

枠線の太さを設定 「border-width」プロパティ

「border-width」プロパティで枠線の太さを設定します。

枠線は、「px」で設定する他に、「thin」で細線、「medium」で中太線、「thick」で太線を設定できます。

例)

border-width: 1px;

border-width: 5px;

border-width: thin; - 細線

border-width: medium; - 中太線

border-width: thick; - 太線

ブラウザ別対応表(border-width)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

枠線の太さを設定 「border-color」プロパティ

「border-color」プロパティで枠線の色を設定します。

例)

border-color: #FF9900;

border-color: pink;

ブラウザ別対応表(border-color)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

枠線の太さを設定 「border-style」プロパティ

「border-style」プロパティで枠線のスタイルを設定します。

枠線は、「px」で設定する他に、「solid」で実線、「double」で二重線など設定できます。

例)

border-style: solid; - 実線

border-style: double; - 二重線

border-style: dotted; - 点線

border-style: dashed; - 点線(破線)

border-style: groove; - 谷型

border-style: ridge; - 山型

border-style: inset; - 凹型

border-style: outset; - 凸型

ブラウザ別対応表(border-style)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5

例)
iframe {
height: 200px;
width: 250px;
border-width: 2px;
border-color: #FF9900;
border-style: dotted;

}

見本画像

上下左右をそれぞれ一括して設定する

「border-width」プロパティ・「border-color」プロパティ「border-style」プロパティで枠線を上下左右それぞれ指定します。

例)

「上」「右」「下」「左」をそれぞれ指定する
border-width: 2px 5px 10px 1px;
border-color: lightblue blue darkblue lightskyblue;
border-style: dotted double solid dashed;

「上」「左右」「下」を指定する
border-width: 2px 5px 10px;
border-color: lightblue blue darkblue;
border-style: dotted double solid;

「上下」「左右」を指定する
border-width: 2px10px;
border-color: lightblue darkblue;
border-style: dotted solid;

上下左右の枠線を一括して指定 「border」プロパティ

「border」プロパティは上下左右の枠線を一括して指定します。

それぞれの値は半角のスペースで区切って入力します。また、順序の自由に入力でき、省略することもできます。但し、省略した値は、標準の値に置き換えられますが、枠線のスタイルを省略すると「none」(枠線なし)になってしまいますので、枠線のスタイルは省略できません。

ブラウザ別対応表(border)
Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
border: 10px solid #FF6600;

10px
枠線の太さ

solid
枠線のスタイル

#FF6600
枠線の色


例)

border: 10px solid #FF6600;

上下左右の枠線を個別に指定 「border-*-width」/「border-*-color」/「border-*-style」プロパティ

「border-*-width」/「border-*-color」/「border-*-style」は、それぞれ「-top」「-right」「-bottom」「-left」で個別に指定することもできます。

ブラウザ別対応表(border-*-width)
  Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top
-right
-bottom
-left
ブラウザ別対応表(border-*-color)
  Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top ×
-right ×
-bottom ×
-left ×
ブラウザ別対応表(border-*-style)
  Windows Mac
Internet Explorer Fire
Fox
Netscape Opera Safari IE
6 5.5 5 4 1 8 4 8 6 1 5
-top ×
-right ×
-bottom ×
-left ×

例)
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #003366;
border-left-width: 10px;
border-left-style: solid;
border-left-color: #0066CC;
}

見本画像

このページのTOPへ

このページのTOPへ

格安です!ホームページ制作をご依頼ください!!

ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ(SEO対策)などわかりにくいことがあればお気軽にお問い合わせください。

このページのTOPへ

格安ホームページ制作依頼

メールでご相談

メールでのお問い合わせは365日24時間受付中です。

お電話でのご相談

090-3401-6229(直通)

【対応時間】

平日のみ(土日祝日はお休み)
午前11時〜午後7時頃

※留守番電話にメッセージを残して頂ければ、対応時間内にこちらより折り返します。

ページの終了