ホームページ |
まず、枠のあるタグを含む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(全体)の定義 おわり ***/ |
枠線の種類を変えるには、ここを書き換えます。 ただし、枠線の太さが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; /* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */ } |
枠線の太さを変えるには、ここを書き換えます。 ただし、枠線の種類が「なし」だと表示されません。 |
---|
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div { /*** 枠線の設定 ***/ border:solid 1px blue; /* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */ } /* 中略 body { 〜 }*/ /*** 見出し1の設定 ***************************** */ h1 { /*** 枠線の設定 ***/ border:dotted 10px blue; /* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */ } |
枠線の色を変えるには、ここを書き換えます。 ただし、枠線の太さが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; /* 数値+単位 */ |
上下左右の余裕の大きさを別々に設定するには、数値+単位を、上 右 下 左の順番に、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; /* 数値+単位 */ |
上下左右の余裕の大きさを別々に設定するには、数値+単位を、上 右 下 左の順番に、4つ並べて書きます。 padding:20px 10px 5px 0px; /* 上:数値+単位 右:数値+単位 下:数値+単位 左:数値+単位 */ |
ブロック要素の幅を決めます。 幅の値には、外側の余裕、枠線、内側の余裕が含まれます。 |
---|
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div { /*** 枠線の設定 ***/ border:solid 1px blue; /* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */ } /* 中略 body { 〜 }*/ /*** 見出し1の設定 ***************************** */ h1 { } |
幅の大きさを変えるには、この部分を、書き換えます。 width:50%; /* 数値+単位 */ |
ブロック要素の高さを決めます。 幅の値には、外側の余裕、枠線、内側の余裕が含まれます。 |
---|
body,h1,h2,h3,h4,h5,h6,hr,p,table,th,td,div { /*** 枠線の設定 ***/ border:solid 1px blue; /* 枠の種類 太さ(数値+単位) 色(色名ないし、色コード) */ } /* 中略 body { 〜 }*/ /*** 見出し1の設定 ***************************** */ h1 { } |
高さを変えるには、この部分を、書き換えます。 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)のタグに設定します。 例では、普通のセルの高さの設定と共に、上下の設定をしています。
| |||
画像と文字の上下位置を変える場合には、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 同じ行で設定を混在させられないブラウザも、多いようです。 |