ホームページ

コピーして作る、HTML+CSS

枠の設定


枠線の種類 solid
枠線の太さ 3px
枠線の色 blue(青)

単純な枠線を引く

 まず、枠のあるタグを含むHTMLファイルの例です。
<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>見出しセル1</th><th>見出しセル2</th>
</tr> <!-- 列の終わり -->
<tr> <!-- 列の始まり -->
<td>セル1</td><td>セル2</td>
</tr> <!-- 列の終わり -->
</table> <!-- テーブルの終わり -->

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

/*** ******************************************************** ***/
/*** body(全体) */
body {

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

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

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

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

/*** 文字の字体 ***/
font-family:hg創英角ポップ体; /* フォント名 */
/* ms pゴシック */
/* ms 明朝 */
/* hg創英角ポップ体 など */

} /*** body(全体)の定義 おわり ***/

枠線の設定

枠線の種類を変える


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


/* 中略 body { 〜 }*/


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

枠線の太さを変える


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


/* 中略 body { 〜 }*/


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

枠線の色を変える


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


/* 中略 body { 〜 }*/


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

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

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


/* 中略 body { 〜 }*/


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

枠線の外側の余裕

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


/* 中略 body { 〜 }*/


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

枠線の内側の余裕

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


/* 中略 body { 〜 }*/


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


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


/* 中略 body { 〜 }*/


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

高さ


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


/* 中略 body { 〜 }*/


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

上下の位置

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


/* 中略 body { 〜 }*/


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

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

上:top

中:middle

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

HTMLファイル
<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
同じ行で設定を混在させられないブラウザも、多いようです。