styleHTML META head META httpeqiuvContentType contenttexthtml META httpeqiuvContentStyleType

（５）スタイル属性を使ったことを指定 ■最後にstyle属性をHTML文書中に直接記述したことを <META>タグ中に記述しておこう!! <head> <META http-eqiuv="Content-Type" content="text/html"> <META http-eqiuv="Content-Style-Type" content="text/css"> </head>

（２）リンクの確認【 0450107. htmlの内容】 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0//EN"> <html

（２）枠線を消す HTML <head> <META http-eqiuv="Content-Type" content="text/html"> <META http-eqiuv="Content-Style-Type" content="text/css"> <link href="040108. css" rel="stylesheet" type="text/css">

4. 1. 5 背景に画像を表示する（１）指定方法 ■スタイルシートで背景画像を指定する body{ background-image: url(img 005. gif); } <head> <META

（２）背景画像の繰返しの指定（background-repeat）値 repeat-x repeat-y no-repeat 説明要素の背景一面に敷き詰める（デフォルト）横一列に敷き詰める縦一列に敷き詰める繰り返さない body{ background-image: url(img 005.

（３）背景画像の位置指定（background-position）値 top right bottom left center 説明上寄せ右寄せ下寄席左寄せ中央寄せ body{

4. 2. 3 テーブルの枠線（１）枠線（border） ■borderプロパティを利用する table { border: solid 2 px green; }

（２）枠線の余分な隙間をなくす（border-collapse） ■border-collapse(つぶすという意味) table { border: solid 2 px green; border-collapse: collapse; } th {

（３）セル間の隙間を調整する（border-spacing） ■border-collapseをseparateにしてスペースを指定 table { border: solid 2 px green; border-collapse: separate; border-spacing: 20 px；}

4. 2. 4 セル内余白と表示位置（１）セル内余白（padding） ■paddingプロパティを使う table { border: solid 2 px green; border-collapse:

（２）縦方向位置（vertical-align） ■vertical-alignプロパティを使う table { border: solid 2 px green; border-collapse: collapse; } th {

（３）テキストの折り返しをなくす（white-space） ■white-spaceプロパティを使う table { border: solid 2 px green; border-collapse: collapse; } th {

4. 2. 5 行や列の連結（１）縦方向の連結（rowspan） ■rowspan 属性を使用する <table border="1" summary="縦方向連結"> <tr><td rowspan="2">セル 11と 21</td><td>セル

（２）横方向の連結（colspan） ■ colspan 属性を使用する <table border="1" summary="横方向連結"> <tr><td colspan="3">セル 11と 12と 13</td></tr> <tr><td>セル 21</td><td>セル

（３）横方向と縦方向連結 ■ colspan と rowspan 両方とも使用する <table border="1" summary="横方向と縦方向連結"> <tr><td>セル 11</td><td>セル 12</td><td>セル 13</td></tr> <tr><td

4. 2. 6 背景色・背景画像 ■background-color, background-imageを使用する table { border: solid th { border: solid

（３）リストの背景色 ■以下はInternet Exploreの場合。Firefoxでは背景色のマーカ部分にも背景色が表示される。 ul { list-style-image: url(mark 002. gif); margin-left: 100 px; padding-left:

（４）マーク部分も背景色 ■list-style-positionプロパティでinsideを指定する ul { list-style-image: url(mark 002. gif); margin-left: 100 px; padding-left: 0 px;

（５）背景色の左側に余裕を持たせる ■liのmargin-leftを指定する. ul { list-style-image: url(mark 002. gif); margin-left: 100 px; padding-left: 0 px;

（６）スタイルの別の表現 ■list-style-position, list-style-image, list-style-typeは list-styleで一括して指定できる. list-style-type : circle; list-style-image : url(mark 002. gif); list-style-position:

スタイルの指定 ■子孫セレクタを，それぞれ指定する。 ol li{list-style-type: upper-alpha; } ol ol li{list-style-type: upper-roman; } ol ol ol

Slides: 55

Download presentation

（５）スタイル属性を使ったことを指定 ■最後にstyle属性をHTML文書中に直接記述したことを <META>タグ中に記述しておこう!! <head> <META http-eqiuv="Content-Type" content="text/html"> <META http-eqiuv="Content-Style-Type" content="text/css"> </head>

（２）リンクの確認【 0450107. htmlの内容】 <!DOCTYPE HTML PUBLIC "-//W 3 C//DTD HTML 4. 0//EN"> <html lang="ja"> <head> <META http-eqiuv="Content-Type" content="text/html"> </head> <body> <p> <img src="img 004. gif" alt="シダ" width=80 height=100></p> <p>反復関数をExcelで定義してシダの葉の絵を描いてみました。</p> </body> </html> 画像をクリック

（２）枠線を消す HTML <head> <META http-eqiuv="Content-Type" content="text/html"> <META http-eqiuv="Content-Style-Type" content="text/css"> <link href="040108. css" rel="stylesheet" type="text/css"> </head> 040108. cssの内容 img{ border: none; } 枠線が消えている！！

4. 1. 5 背景に画像を表示する（１）指定方法 ■スタイルシートで背景画像を指定する body{ background-image: url(img 005. gif); } <head> <META http-eqiuv="Content-Type" content="text/html"> <META http-eqiuv="Content-Style-Type" content="text/css"> <link href="040109. css" rel="stylesheet" type="text/css"> </head> <body>

（２）背景画像の繰返しの指定（background-repeat）値 repeat-x repeat-y no-repeat 説明要素の背景一面に敷き詰める（デフォルト）横一列に敷き詰める縦一列に敷き詰める繰り返さない body{ background-image: url(img 005. gif); background-repeat: repeat-x; } body{ background-image: url(img 005. gif); background-repeat: repeat-y; }

（３）背景画像の位置指定（background-position）値 top right bottom left center 説明上寄せ右寄せ下寄席左寄せ中央寄せ body{ background-image: url(img 005. gif); background-repeat: no-repeat; background-position: center bottom; }

4. 2. 3 テーブルの枠線（１）枠線（border） ■borderプロパティを利用する table { border: solid 2 px green; } th { border: solid 2 px green; } td { border: solid 2 px green; }

（２）枠線の余分な隙間をなくす（border-collapse） ■border-collapse(つぶすという意味) table { border: solid 2 px green; border-collapse: collapse; } th { border: solid 2 px green; border-collapse: collapse; } td { border: solid 2 px green; border-collapse: collapse; }

（３）セル間の隙間を調整する（border-spacing） ■border-collapseをseparateにしてスペースを指定 table { border: solid 2 px green; border-collapse: separate; border-spacing: 20 px；} th { border: solid 2 px green; border-collapse: separate; border-spacing: 20 px；} td { border: solid 2 px green; border-collapse: separate; border-spacing: 20 px；}

4. 2. 4 セル内余白と表示位置（１）セル内余白（padding） ■paddingプロパティを使う table { border: solid 2 px green; border-collapse: collapse; } th { border: solid 2 px green; border-collapse: collapse; padding: 10 px; } td { border: solid 2 px green; border-collapse: collapse; padding: 10 px; }

（２）縦方向位置（vertical-align） ■vertical-alignプロパティを使う table { border: solid 2 px green; border-collapse: collapse; } th { border: solid 2 px green; border-collapse: collapse; padding: 10 px; } td { border: solid 2 px green; border-collapse: collapse; padding: 10 px; }

（３）テキストの折り返しをなくす（white-space） ■white-spaceプロパティを使う table { border: solid 2 px green; border-collapse: collapse; } th { border: solid 2 px green; border-collapse: collapse; padding: 10 px; } td { border: solid 2 px green; border-collapse: collapse; padding: 10 px; vertical-align: top; white-space: nowrap; }

4. 2. 5 行や列の連結（１）縦方向の連結（rowspan） ■rowspan 属性を使用する <table border="1" summary="縦方向連結"> <tr><td rowspan="2">セル 11と 21</td><td>セル 12</td><td>セル 13</td></tr> <tr><td> セル 22</td><td>セル 23</td></tr> <td>セル 31</td> <td>セル 32</td><td>セル 33</td></tr> </table>

（２）横方向の連結（colspan） ■ colspan 属性を使用する <table border="1" summary="横方向連結"> <tr><td colspan="3">セル 11と 12と 13</td></tr> <tr><td>セル 21</td><td>セル 22</td><td>セル 23</td></tr> <tr><td>セル 31</td><td>セル 32</td><td>セル 33</td></tr> </table>

（３）横方向と縦方向連結 ■ colspan と rowspan 両方とも使用する <table border="1" summary="横方向と縦方向連結"> <tr><td>セル 11</td><td>セル 12</td><td>セル 13</td></tr> <tr><td colspan="2" rowspan="2">セル 21, 22, 31, 32</td> <td>セル 23</td></tr> <tr><td>セル 33</td></tr> </table>

4. 2. 6 背景色・背景画像 ■background-color, background-imageを使用する table { border: solid th { border: solid padding: 10 px; td { border: solid padding: 10 px; 2 px green; border-collapse: collapse; } 2 px green; border-collapse: collapse; background-color : #CDCDCD; } 2 px green; border-collapse: collapse; background-image : url(img 005. gif); }

（３）リストの背景色 ■以下はInternet Exploreの場合。Firefoxでは背景色のマーカ部分にも背景色が表示される。 ul { list-style-image: url(mark 002. gif); margin-left: 100 px; padding-left: 0 px; background-color: #FFFF 00; }

（４）マーク部分も背景色 ■list-style-positionプロパティでinsideを指定する ul { list-style-image: url(mark 002. gif); margin-left: 100 px; padding-left: 0 px; background-color: #FFFF 00; list-style-position: inside; } 【insideを指定しない場合】

（５）背景色の左側に余裕を持たせる ■liのmargin-leftを指定する. ul { list-style-image: url(mark 002. gif); margin-left: 100 px; padding-left: 0 px; background-color: #FFFF 00; list-style-position: inside; } li { margin-left: 30 px; } 【liのマージンを指定しない場合】

（６）スタイルの別の表現 ■list-style-position, list-style-image, list-style-typeは list-styleで一括して指定できる. list-style-type : circle; list-style-image : url(mark 002. gif); list-style-position: inside; 以下は，上記と同じ list-style: circle url(mark 002. gif) inside;

スタイルの指定 ■子孫セレクタを，それぞれ指定する。 ol li{list-style-type: upper-alpha; } ol ol li{list-style-type: upper-roman; } ol ol ol li{list-style-type: decimal; }