ホームページ

コピーして作る、HTML+CSS

枠の設定


枠線の種類　solid
枠線の太さ 3px
枠線の色　blue（青）

単純な枠線を引く

　まず、枠のあるタグを含むＨＴＭＬファイルの例です。
<html>
<head>
<title>タイトル</title>
<link rel="stylesheet" href="test.css" type="text/css">
<meta name="description" content="コメント">
</head>
<body>
<!-- 表示内容↓-->
<h1>見出し</h1>
<p>文章段落</p>

<table> <!-- テーブルの始まり -->
<tr> <!-- 列の始まり -->
<th>見出しセル１</th><th>見出しセル２</th>
</tr> <!-- 列の終わり -->
<tr> <!-- 列の始まり -->
<td>セル１</td><td>セル２</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

<!-- 表示内容↑ -->
</body>
</html>
　これらのタグに、スタイルシートで、単純な青い枠線を設定します。
（便宜上、上のＨＴＭＬファイルでは使っていないタグも、含んでいます。）
　ちなみに、スタイルシートの設定は、後だし優先です。
　これを先頭に書いておいても、後ろに正式な設定があれば、そちらが有効になります。
　ですからＨＴＭＬタグを書いている途中は、最初にこの設定を入れておくと、どこに何があるか、わかりやすくなりますし、不要になったらこの設定を削除すればいいので、便利です。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 3px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}

/*** ******************************************************** ***/
/*** ｂｏｄｙ（全体） */
body {

/*** 内容の左右の位置 ***/
text-align:left; /* 左寄せ:left , 中央:center , 右寄せ:right */

/*** 行間 ***/
line-height:170%; /* 数値＋単位 */

/*** 背景の色 ***/
background-color:#ffe0e0; /* 色名ないし、色コード */

/*** 文字の色 ***/
color:MAROON; /* 色名ないし、色コード */

/*** 文字の字体 ***/
font-family:hg創英角ﾎﾟｯﾌﾟ体; /* フォント名 */
/* ｍｓ ｐゴシック */
/* ｍｓ 明朝 */
/* hg創英角ﾎﾟｯﾌﾟ体 など */

} /*** ｂｏｄｙ（全体）の定義 おわり ***/

枠線の設定

枠線の種類を変える


dotted
見出し１の枠線を、点線に
　枠線の種類を変えるには、ここを書き換えます。
　ただし、枠線の太さが０だと線は表示されませんし、あまり細すぎると、一本線にしかみえなかったりします。
　例では、見出し１に、追加設定をしています。
　見出し１の設定は二重になりますが、後だし優先で設定されます。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 枠線の設定 ***/
border:dotted 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}

枠線の太さを変える


見出し１の枠線の太さを変える
　枠線の太さを変えるには、ここを書き換えます。
　ただし、枠線の種類が「なし」だと表示されません。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 枠線の設定 ***/
border:dotted 10px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}

枠線の色を変える


見出し１の枠線の色を変える
　枠線の色を変えるには、ここを書き換えます。
　ただし、枠線の太さが０であったり、種類が「なし」だと表示されません。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 枠線の設定 ***/
border:dotted 10px red; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}

上下左右の枠線を、別々に変える

　上下左右の線は、それぞれ別々に設定することができます。
　それぞれの枠線の設定方法は、全部一緒に設定するときと、同じです。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 枠線の設定 ***/
/* 枠線上 */
border-top:double 5px RED;
/* 枠線左 */
border-left:double 10px WHITE;
/* 枠線右 */
border-right:solid 5px BLUE;
/* 枠線下 */
border-bottom:solid 10px GREEN;
/* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}

枠線の外側の余裕

　枠線の外側（上下左右）に、余裕をもたせるには、これを追加します。
　例では、見出し１に、追加設定をしています。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 枠の外側の余裕 ***/
margin:20px; /* 数値＋単位 */
}
余裕の大きさを変えるには、この部分を、書き換えます。
margin:20px; /* 数値＋単位 */
上下左右の余裕の大きさを別々に設定するには、数値＋単位を、上　右　下　左の順番に、４つ並べて書きます。
margin:20px 10px 5px 0px; /* 上:数値＋単位 右:数値＋単位 下:数値＋単位 左:数値＋単位 */

枠線の内側の余裕

　枠線の内側（上下左右）に、余裕をもたせるには、これを追加します。 　例では、見出し１に、追加設定をしています。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 枠の内側の余裕 ***/
padding:20px; /* 数値＋単位 */
}
余裕の大きさを変えるには、この部分を、書き換えます。
padding:20px; /* 数値＋単位 */
上下左右の余裕の大きさを別々に設定するには、数値＋単位を、上　右　下　左の順番に、４つ並べて書きます。
padding:20px 10px 5px 0px; /* 上:数値＋単位 右:数値＋単位 下:数値＋単位 左:数値＋単位 */

幅


外側の５０％の幅の見出し
　ブロック要素の幅を決めます。
　幅の値には、外側の余裕、枠線、内側の余裕が含まれます。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 幅 ***/
width:50%; /* 数値＋単位 */
}
幅の大きさを変えるには、この部分を、書き換えます。
width:50%; /* 数値＋単位 */

高さ


周囲の５０％の高さの見出し
　ブロック要素の高さを決めます。
　幅の値には、外側の余裕、枠線、内側の余裕が含まれます。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
h1 {
/*** 高さ ***/
height:50%; /* 数値＋単位 */
}
高さを変えるには、この部分を、書き換えます。
height:50%; /* 数値＋単位 */

上下の位置

１　テーブルのセルの内容の、上下の位置を設定します。
２　画像と文字の位置関係を設定します。
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div {
/*** 枠線の設定 ***/
border:solid 1px blue; /* 枠の種類 太さ(数値＋単位) 色(色名ないし、色コード) */
}


/* 中略 body { 〜 }*/


/***　見出し１の設定　***************************** */
td {
/*** 高さ ***/
height:100px; /* 数値＋単位 */
/*** 内容の上下の位置 ***/
vertical-align:top; /* 上:top 中:middle 下:bottom */
}
位置を変えるには、この部分を、書き換えます。
vertical-align:top; /* 上:top 中:middle 下:bottom */

セル内の内容の上下位置を変える場合は、セル（td か th)のタグに設定します。
例では、普通のセルの高さの設定と共に、上下の設定をしています。

上:top

中:middle

上:bottom
左右の位置の設定と、一緒に使うこともできます。
画像と文字の上下位置を変える場合には、imgのタグに設定します。
以下の例では、スタイルシートの、それぞれの設定に名前をつけています。
（名前をつけなかった場合、全イメージファイルにその設定が適用されます。）
ＨＴＭＬファイルでは、各画像のタグにその設定を定義しますが、同じ行は同じ設定になりますので、 スタイルシート
/*** 画像と文字の上下の位置 ***/
img.t {vertical-align:top;}
img.m {vertical-align:middle;}
img.b {vertical-align:bottom;}

ＨＴＭＬファイル
<img class="t" src="h1.gif" border="1">上:top
<img class="m" src="h1.gif" border="1">中:middle文字
<img class="b" src="h1.gif" border="1">下:bottom文字
上:top
中:middle
下:bottom　 ただし、bottom は、無効となるブラウザが多いようです。
上:top　 中:middle　 下:bottom
同じ行で設定を混在させられないブラウザも、多いようです。