タダでインターネットでお小遣いを稼ぎましょう！

タダでインターネットでお小遣いを稼ぎましょう！

スポンサードリンク
はじめての方へ
 

スタイルシート

前のページへ
 
スタイルシート 「ボックス」

 
スタイルシート 「ボックス」
マージンを指定する   ↓

ボックスの枠と他のボックスとのマージン（間隔）を指定します

px 、% 、キーワードなどで指定
margin-top: ★　上のマージン
margin-bottom: ★　下のマージン
margin-right: ★　右のマージン
margin-left: ★　左のマージン

<head>内の<style> 〜 </style>に記述

body	{ margin: 0 }
div	{
	text-align: center;
	padding: 10px;
	border: solid medium #f08080;
	background-color: #ffdead
}
#sample1	{
	margin-top: 30px;
	margin-bottom: 60px
}
#sample2	{
	margin-top: 30px;
	margin-right: 20%;
	margin-bottom: 60px;
	margin-left: 10%
}

<body> 〜 </body>内に記述

<div id="sample1">コメント</div>
<div id="sample2">コメント</div>

サンプル

このページの上へ

パディングを指定する   ↓

ボックスの内容と枠とのパディング（間隔）を指定します

px 、% 、キーワードなどで指定
padding-top: ★　上のパディング
padding-bottom: ★　下パディング
padding-right: ★　右のパディング
padding-left: ★　左パディング
autoはブラウザが自動的に設定

<head>内の<style> 〜 </style>に記述

body	{ margin: 0 }
div	{
	margin: 10px;
	border: solid medium #f08080;
	background-color: #ffdead
}
#sample1	{
	padding-top: 30px;
	padding-bottom: 60px
}
#sample2	{
	padding-top: 30px;
	padding-right: 20%;
	padding-bottom: 60px;
	padding-left: 10%
}

<body> 〜 </body>内に記述

<div id="sample1">コメント</div>
<div id="sample2">コメント</div>

サンプル

このページの上へ

枠線の太さを指定する   ↓

ボックスの上下左右のボーダー（枠線）の太さを指定します

border-top-width: ★　上線
border-bottom-width: ★　下線
border-left-width: ★　左線
border-rigth-width: ★　右線
 
px やキーワードなどで指定
thin→細い線
medium→標準の線
thick→太い線

<head>内の<style> 〜 </style>に記述

p	{
	width: 75%;
	padding: 10px;
	background-color: #ffdead
}
.sample1	{
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 40px;
	border-right-width: 40px;
	border-style: solid;
	border-color: #ffa500
}
.sample2	{
	border-top-width: 5mm;
	border-bottom-width: medium;
	border-left-width: 50px;
	border-right-width: thin;
	border-style: solid;
	border-color: #ffa500
}

<body> 〜 </body>内に記述

<p class="sample1">コメント</p>
<p class="sample2">コメント</p>

サンプル

このページの上へ

枠線の色を指定する   ↓

ボックスの上下左右のボーダー（枠線）の色を指定します

border-top-color: ★　上線
border-bottom-color: ★　下線
border-left-color: ★　左線
border-rigth-color: ★　右線
 
例：#ff0000 や red などで指定

<head>内の<style> 〜 </style>に記述

p	{
	width: 75%;
	padding: 10px;
	border-style: solid;
	text-align: center
}
.sample1	{
	border-top-color: red;
	border-bottom-color: green;
	border-left-color: yellow;
	border-right-color: blue;
}
.sample2	{
	border-top-color: navy;
	border-bottom-color: teal;
}

<body> 〜 </body>内に記述

<p class="sample1">コメント</p>
<p class="sample2">コメント</p>

サンプル

このページの上へ

枠線の種類を指定する   ↓

ボックスの上下左右のボーダー（枠線）の種類を指定します
※Internet Explorer と Netscape では表示のされかたが微妙に違うようです

border-top-style: ★　上線
border-bottom-style: ★　下線
border-left-style: ★　左線
border-rigth-style: ★　右線
 
none→枠線の表示なし
hidden→枠線の表示なし
dotted→点線
dashed→破線
solid→実線
double→二重線
groove→へこんだように見える線
ridge→浮き上がったように見える線
inset→枠線より内側がへこんだように見える線
outset→枠線より内側が浮き上がったように見える線

<head>内の<style> 〜 </style>に記述

p	{
	width: 75%;
	padding: 10px;
	border: 6px #00bfff;
	text-align: center;
	border-top-style: dotted;
	border-bottom-style: solid;
	border-left-style: dashed;
	border-right-style: double;
}

<body> 〜 </body>内に記述

<p>コメント</p>

サンプル

このページの上へ

枠線ごとに一括指定する   ↓

ボックスの上下左右のボーダー（枠線）の指定を枠線ごとに一括指定します

border-top: ★ ★ ★　上線
border-bottom: ★ ★ ★　下線
border-left: ★ ★ ★　左線
border-rigth: ★ ★ ★　右線
 
width（太さ）style（種類）color（色）などを半角スペースで区切って記述します

<head>内の<style> 〜 </style>に記述

p	{ width: 75%; }
#sample1	{
	border-top: 10px dotted #ff1493;
	border-bottom: 7px dashed #ff6600;
	border-left: thick double #00ffff;
	border-right: thin solid #ff0000;
	padding: 10px;
	text-align: center;
	font-weight: bold
}
#sample2	{
	border-bottom: solid #00ffff;
	border-left: 30px solid #ffa500;
	text-align: left
}

<body> 〜 </body>内に記述

<p id="sample1>コメント</p>
<p id="sample2>コメント</p>

サンプル

このページの上へ

幅と高さを指定する   ↓

要素の内容が表示される領域の幅と高さを指定します

width: ★　幅
height: ★　高さ
 
px 、% 、キーワードなどで指定

<head>内の<style> 〜 </style>に記述

p	{ 
	width: 75%; 
	background-color: #ff69b4
}
div	{
	width: 50%;
	height: 70px;
	background-color: orange
}
textarea	{
	width: 50%;
	height: 100px;
	background-color: #ccffff
}

<body> 〜 </body>内に記述

<p>コメント</p>
<div><p>コメント</p></div>
<br>
<textarea>コメント</textarea>

サンプル

 

このページの上へ