スッキリかんたんスタイルシート～ボックス

トップ＞スッキリかんたんスタイルシート

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

まず始めに，個別に指定する方法と，まとめて指定する方法について解説します。

このボックスは，枠線の太さを個別に指定しています。
記述は，ちょっと煩雑です。

このボックスは，枠線の太さをまとめて指定しています。
値の順番（2px 10px 20px 3px）は，top right bottom left

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>個別に指定する方法と，まとめて指定する方法</title>
<style type="text/css">
<!--
p {font-size:13px;}
.text1 {border-style:solid;
	 padding:10px;
	 width:400px;
        border-top-width:2px;
	 border-right-width:10px;
	 border-bottom-width:20px;
	 border-left-width:3px;}

.text2 {border-style:solid;
	 padding:10px;
	 width:400px;
        border-color:#333399;
	 border-width:2px 10px 20px 3px;}
-->
</style>
</head>
<body>
<p class="text1">このボックスは，枠線の太さを個別に指定しています。<br>
記述は，ちょっと煩雑です。</p>
<p class="text2">このボックスは，枠線の太さをまとめて指定しています。<br>
値の順番（2px 10px 20px 3px）は，top right bottom left</p>
</body>
</html>

border-width　枠線の太さの上下左右をまとめて指定する

border-width:2px ←上下左右すべてが2px

border-width:2px 10px ←上下が2px 左右が10px

border-width:2px 10px 20px ←上が2px 左右が10px　下が20px

border-width:2px 10px 20px 2px ←上が2px 右が10px　下が20px　左が2px

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の太さの上下左右をまとめて指定する</title>
<style type="text/css">
<!--
body {font-size:14px;}
.text1 {border-style:solid;
	 padding:5px 5px;
	 width:500px;
        border-color:#ff3366;	
	 border-width:2px;
        margin-bottom:20px}

.text2 {border-style:solid;
	 padding:5px 5px;
	 width:500px;
        border-color:#006666;
	 border-width:2px 10px;
        margin-bottom:20px}
	
.text3 {border-style:solid;
	 padding:5px 5px;
	 width:500px;
        border-color:#990099;
	 border-width:2px 10px 20px;
        margin-bottom:20px}

.text4 {border-style:solid;
	 padding:5px 5px;
	 width:500px;
        border-color:#333399;
	 border-width:2px 10px 20px 2px;}
-->
</style>
</head>
<body>
<div class="text1">border-width:2px ←上下左右すべてが2px</div>
<div class="text2">border-width:2px 10px ←上下が2px 左右が10px</div>
<div class="text3">border-width:2px 10px 20px ←上が2px 左右が10px　下が20px</div>
<div class="text4">border-width:2px 10px 20px 2px ←上が2px 右が10px　下が20px　左が2px</div>
</body>
</html>

枠線の太さを利用した見出しのパターン

耳に残るあの曲。いますぐiTunesでダウンロードしよう。

Adobeのライセンス製品が１つから購入可能に！

ＵＳＥＮの光ファイバ１００Ｍｂｐｓ初期費用がぜ～んぶ無料！

お店で安心！現金決済＆受取りができるセブンドリーム・ドットコム

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の太さを利用した見出しのパターン</title>
<style type="text/css">
<!--
body {font-size:14px;}
a:link {color:#0080C0;text-decoration:none;}
a:hover {color:#ff0000;}
a:visited {color:#0080C0;text-decoration:none;}

.text1 {border-style:solid;
	 padding:3px 10px;
	 width:400px;
        border-color:#C60000;	
 	 border-width:1px 1px 1px 20px;
        margin-bottom:20px}

.text2 {border-style:solid;
	 padding:3px 4px;
	 width:350px;
        border-color:#006666;
   	 border-width:2px 0px;
        margin-bottom:20px}	

.text3 {border-style:solid;
	 padding:3px 10px;
	 width:400px;border-color:#990099;
	 border-width:0px 0px 2px 20px;
        margin-bottom:20px}

.text4 {border-style:solid;
	 padding:3px 10px;
	 width:450px;border-color:#333399;
	 border-width:0em 0em 0em 1.5em;
	 background-color:#D0D0FF;
	 color:white;}
-->
</style>
</head>
<body>
<div class="text1"><a href="aaa.htm">耳に残るあの曲。いますぐiTunesでダウンロードしよう。</a></div>
<div class="text2"><a href="aaa.htm">Adobeのライセンス製品が１つから購入可能に！</a></div>
<div class="text3"><a href="aaa.htm">ＵＳＥＮの光ファイバ１００Ｍｂｐｓ 初期費用がぜ～んぶ無料！</a></div>
<div class="text4"><a href="aaa.htm">お店で安心！現金決済＆受取りができるセブンドリーム・ドットコム</a></div>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

margin　マージンを割合で指定する

マージンを割合で指定する
「preview」から，新しいブラウザでこのファイルを開き，ブラウザの大きさを変えてみると割合で指定する意味が分かります。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>マージンを割合で指定する</title>
<style type="text/css">
<!--
p {margin-top:20%;
   margin-bottom:10%;
   background-color:#808080;
   color:#ffffff;
   border:solid 2px #333333;}
-->
</style>
</head>
<body>
<p>マージンを割合で指定する<br>
「preview」から，新しいブラウザでこのファイルを開き，
ブラウザの大きさを変えてみると割合で指定する意味が分かります。</p>
</body>
</html>

ウィンドウと要素の余白をなくす

ウィンドウと要素の余白をなくす
ウィンドウと要素の余白をなくすには，body要素の値を０に設定します。ｐ要素のマージンの値を０に設定しても，ウィンドウと要素の余白はなくなりません。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ウィンドウと要素の余白をなくす</title>
<style type="text/css">
<!--
body {margin:0px;}
p {background-color:#DFDFDF;
   color:#333333;
   border:solid 2px #666666;}
-->
</style>
</head>
<body>
<p>ウィンドウと要素の余白をなくす<br>
ウィンドウと要素の余白をなくすには，body要素の値を０に設定します。
ｐ要素のマージンの値を０に設定しても，ウィンドウと要素の余白はなくなりません。</p>
</body>
</html>

ブロックをセンタリングする

ブロックをセンタリングする
margin-leftとmargin-rightにautoの値を指定する。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ブロックをセンタリングする</title>
<style type="text/css">
<!--
p {margin-left:auto;
   margin-right:auto;
   width:200px;
   background-color:#808080;
   color:#ffffff;
   border:solid 2px #333333;}
-->
</style>
</head>
<body>
<p>ブロックをセンタリングする<br>
margin-leftとmargin-rightにautoの値を指定する。</p>
</body>
</html>

padding　タイトルと段落のデザイン

Yahoo!ウェブホスティング

Yahoo! JAPANの提供するレンタルサーバーサービス「Yahoo!ウェブホスティング　ライト・コース」のご案内です。7月にスタートした月額980円のライトコースは、容量100MB・メールアドレス5個で、ドメイン（gTLDドメイン：.com/.net/.info/.org/.biz）取得無料、初月無料で提供しているサービスです。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>タイトルと段落のデザイン</title>
<style type="text/css">
<!--
a:link {color:#FFFFFF;text-decoration:none;}
a:hover {color:#FFFF00;}
a:visited {color:#FFFFFF;text-decoration:none;}
h4 {background-color:#FF0000;}
p {background-color:#FFD9D9;
   font-size:13px;}
h4, p {margin:0px 0px 0px 0px;
       width:400px;
	color:#ff0000;
	padding:5px;}	
-->
</style>
</head>
<body>
<h4><a Href="aaa.htm">Yahoo!ウェブホスティング</a></h4>
<p>Yahoo! JAPANの提供するレンタルサーバーサービス
「Yahoo!ウェブホスティング　ライト・コース」のご案内です。
7月にスタートした月額980円のライトコースは、容量100MB・メールアドレス5個で、
ドメイン（gTLDドメイン：.com/.net/.info/.org/.biz）取得無料、初月無料で提供しているサービスです。</p>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

border-style　枠線の種類　太さは指定しない

solid：１本線で表示する。

double：２本線で表示する。

groove：へこんで見えるように表示する。

ridge：飛び出して見えるように表示する。

inset：枠線の内側がへこんで見えるように表示する。

outset：枠線の内側が飛び出して見えるように表示する。

dashed：波線で表示する。（WinIE5.5以下は未対応）

dotted：点線で表示する。（WinIE5.5以下は未対応）

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の種類　太さは指定しない</title>
<style type="text/css">
<!--
body {font-size:14px;}
p {border-color:#808040;
	width:500px;
	background-color:#E1E1F0;
       padding:3px 10px;}
.solid {border-bottom-style:solid;
	border-right-style:solid;}
.double {border-bottom-style:double;
	border-right-style:double;}
.groove {border-bottom-style:groove;
	border-right-style:groove;}
.ridge {border-bottom-style:ridge;
	border-right-style:ridge;}
.inset {border-bottom-style:inset;
	border-right-style:inset;}
.outset {border-bottom-style:outset;
	border-right-style:outset;}
.dashed {border-bottom-style:dashed;
	border-right-style:dashed;}
.dotted {border-bottom-style:dotted;
	border-right-style:dotted;}
-->
</style>
</head>
<body>
<p class="solid">solid：１本線で表示する。</p>
<p class="double">double：２本線で表示する。</p>
<p class="groove">groove：へこんで見えるように表示する。</p>
<p class="ridge">ridge：飛び出して見えるように表示する。</p>
<p class="inset">inset：枠線の内側がへこんで見えるように表示する。</p>
<p class="outset">outset：枠線の内側が飛び出して見えるように表示する。</p>
<p class="dashed">dashed：波線で表示する。（WinIE5.5以下は未対応）</p>
<p class="dotted">dotted：点線で表示する。（WinIE5.5以下は未対応）</p>
</body>
</html>

枠線の種類をまとめて指定する

border-style:dashed　→　border-style:上下左右

border-style:dashed doubl　→　border-style:上下　左右

border-style:dashed double solid　→　border-style:上　左右　下

border-style:dashed double solid groove　→　border-style:上　左　右　下

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の種類をまとめて指定する</title>
<style type="text/css">
<!--
p {border-color:#8080C0;
	padding:10px 10px;
       font-size:14px;}
.atai1 {border-style:dashed;}
.atai2 {border-style:dashed double;}
.atai3 {border-style:dashed double solid ;}
.atai4 {border-style:dashed double solid groove;}
-->
</style>
</head>
<body>
<p class="atai1">border-style:dashed　→　border-style:上下左右</p>
<p class="atai2">border-style:dashed doubl　→　border-style:上下　左右</p>
<p class="atai3">border-style:dashed double solid　→　border-style:上　左右　下</p>
<p class="atai4">border-style:dashed double solid groove　→　border-style:上　左　右　下</p>
</body>
</html>

border-color　枠線の色を指定する

border-color:#ff3366

border-color:#99cc00

border-color:#AE0000

border-color:#008040

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線の色を指定する</title>
<style type="text/css">
<!--
p#tx1-2 {border:solid 1px;
	background-color:#ffffff;
	padding:2px 5px;
	color:#333333;
	width:400px;}
.text1 {border-color:#ff3366;}
.text2 {border-color:#99cc00;}
p#tx3-4 {border:dashed 2px;
	background-color:#ff3366;
	padding:2px 5px;
	color:#ffffff;
	width:400px;}
.text3 {border-color:#AE0000;}
.text4 {border-color:#008040;}
-->
</style>
</head>
<body>
<p id="tx1-2" class="text1">border-color:#ff3366</p>
<p id="tx1-2" class="text2">border-color:#99cc00</p>
<p id="tx3-4" class="text3">border-color:#AE0000</p>
<p id="tx3-4" class="text4">border-color:#008040</p>
</body>
</html>

画像に枠線を指定する

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>画像に枠線を指定する</title>
<style type="text/css">
<!--
body {background-color:#0000A0;}
img {border-style:solid;
	border-width:5px;
	border-color:#ffffff;}
-->
</style>
</head>
<body>
<img src="photo001.jpg">
</body>
</html>

枠線を活用したページデザイン

iTunes 6 Mac + Windows

iTunesは、コンピュータで音楽を整理、共有、聴くための一番簡単な方法です。新しいお気に入りを見つけたり、ますます充実するライブラリを整理できます。また、iTunesはiPodのベストフレンド。MacまたはWindowsに対応する iTunes 6を無料でダウンロードしましょう。
耳に残るあの曲。いますぐiTunesでダウンロードしよう。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線を活用したページデザイン</title>
<style type="text/css">
<!--
body {background-color:#B0B0FF;
	color:#ffffff;
	font-family:serif;}
h3 {border-left:solid 25px;
	border-bottom:solid 2px;
	border-left-color:#408080;
	border-bottom-color:#408080;}
p {margin-left:30px;
	line-height:1.5em;
	border-left:solid 2px;
	border-left-color:#408080;}
.venus {border-bottom:dashed 2px;
	border-bottom-color:#408080;}
h3, p {padding:5px;}
a:link {color:#0080C0;text-decoration:none;}
a:hover {color:#ff0000;}
a:visited {color:#0080C0;text-decoration:none;}
-->
</style>
</head>
<body>
<h3>iTunes 6 Mac + Windows</h3>
<p>iTunesは、コンピュータで音楽を整理、共有、聴くための一番簡単な方法です。
新しいお気に入りを見つけたり、ますます充実するライブラリを整理できます。
また、iTunesはiPodのベストフレンド。MacまたはWindowsに対応する 
iTunes 6を無料でダウンロードしましょう。<br>
<span class="venus"><a href="aaa.htm" >耳に残るあの曲。
いますぐiTunesでダウンロードしよう。</a></span></p>
</body>
</html>

枠線を活用したロールオーバー１

Adobe Illustrator CS2 Adobe Photoshop CS2 Adobe GoLive CS2 Adobe InDesign CS2

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線を活用したロールオーバー１</title>
<style type="text/css">
<!--
div {margin-top:30px;
     font-size:13px;}
a.box013 {padding:10px 15px;
	text-decoration:none;
	font-weight:bold;
       color:#FFB895;
	border-top:solid #FFB895 10px;
	border-bottom:solid #FFB895 1px;
	border-left:solid #FFB895 1px;
	border-right:solid #FFB895 1px;}
a:hover.box013 {padding:10px 15px;
	text-decoration:none;
	font-weight:bold;
       color:#FF8040;
	border-top:solid #FF8040 20px;
	border-bottom:dashed #FF8040 1px;
	border-left:dashed #FF8040 1px;
	border-right:dashed #FF8040 1px;}
-->
</style>
</head>
<DIV>
<a class="box013" href="aaa.htm">Adobe Illustrator CS2</a>
<a class="box013" href="bbb.htm">Adobe Photoshop CS2</a>
<a class="box013" href="ccc.htm">Adobe GoLive CS2</a>
<a class="box013" href="ddd.htm">Adobe InDesign CS2</a>
</DIV><br>
</body>
</html>

枠線を活用したロールオーバー２

ブロードバンドはＮＴＴ BRAOD-GATE 02 【Sony】固定IP付光"bit-drive" サムスンダイレクト

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>枠線を活用したロールオーバー２</title>
<style type="text/css">
<!--
div {margin-top:30px;
     font-size:13px;}
a {text-decoration:none;
	font-weight:bold;
       padding:5px 10px 5px 10px;
	color:#EA0000;
	border:groove #FF8080 3px;
	background-color:#FFBFBF;}
a:hover {text-decoration:none;
	font-weight:bold;
       padding:7px 12px 7px 12px;
	color:#ffffff;
	border:ridge #FF4A4A 3px;
	background-color:#FF4A4A;}
-->
</style>
</head>
<body>
<div>
<a href="aaa.htm">ブロードバンドはＮＴＴ</a>
<a href="bbb.htm">BRAOD-GATE 02</a>
<a href="ccc.htm">【Sony】固定IP付光“bit-drive”</a>
<a href="ddd.htm">サムスンダイレクト</a>
</div><br>
</body>
</html>

width　要素の幅を指定する

width:8em

width:80%

width:80px

width:auto

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素の幅を指定する</title>
<style type="text/css">
<!--
h4 {background-color:#808080;
	color:#ffffff;}
.haba1 {width:8em;}
.haba2 {width:80%;}
.haba3 {width:80px;}
.haba4 {width:auto;}
-->
</style>
</head>
<body>
<h4 class="haba1">width:8em</h4>
<h4 class="haba2">width:80%</h4>
<h4 class="haba3">width:80px</h4>
<h4 class="haba4">width:auto</h4>
</body>
</html>

height　要素の高さを指定する

height:2em

height:100%

height:50px

height:auto

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>要素の高さを指定する</title>
<style type="text/css">
<!--
h3 {background-color:#808040;
	color:#ffffff;}
.takasa1 {height:2em;}
.takasa2 {height:100%;}
.takasa3 {height:50px;}
.takasa4 {height:auto;}
-->
</style>
</head>
<body>
<h3 class="takasa1">height:2em</h3>
<h3 class="takasa2">height:100%</h3>
<h3 class="takasa3">height:50px</h3>
<h3 class="takasa4">height:auto</h3>
</body>
</html>

要素の高さを指定する

このファイルは標準準拠モードなので，60%に指定した画像がうまく表示されていません。[Preview]でご覧ください。

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- 過去互換モードでないとパーセンテージの表示ができません。
DOCTYPE宣言で表示モードを切り替えます。
【標準準拠モード】
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
【過去互換モード】
 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>画像の高さを指定する</title>
<style type="text/css">
<!--
.imghei1 {height:60px;}
.imghei2 {height:60%;}
.imghei3 {height:auto;}
-->
</style>
</head>
<body>
<img src="photo002.jpg" class="imghei1" alt="china">
<img src="photo002.jpg" class="imghei2" alt="china">
<img src="photo002.jpg" class="imghei3" alt="china">
</body>
</html>

消耗品 >>> インク