スタイルシートを操作する（CSS基礎知識）
初期コード（以下のようにテキストエディタ：Macならmi で作成します）
ファイル名を「 sample01.html 」として書類ディレクトリなどに保存します。
<html>
<head>
<meta charset=”utf-8″>
<title> </title>
</head>
<body>
<p>この文字列は段落です</p>
<h3>この文字列は見出しレベル３です</h3>
<h4>この文字列は見出しレベル４です</h4>
<ol>
<li>番号付き箇条書き１</li>
<li>番号付き箇条書き２</li>
</ol>
<ul>
<li>記号付き箇条書き１</li>
<li>記号付き箇条書き２</li>
</ul>
</body>
</html>
タグの意味
| ■ | p | 段落 | Paragraph 日本語では段落・節・記事などと訳されています。日本では章見出し・節見出し・項目見出しなどの見出しに対して内容を記述する「本文」を Paragraph を意味します。 |
| ■ | h3 | 見出し レベル３ | Head ３ 見出し |
| ■ | h4 | 見出し レベル４ | Head ４ 見出し |
| ■ | ol | 番号付箇条書きの開始 | Order list 番号付の箇条書きを開始するタグ |
| ■ | ul | 記号付き箇条書きの開始 | Unorder list 記号付の箇条書きを開始するタグ |
| ■ | li | 箇条書きの各項目 |
タグにスタイルシートを付加してみます。ファイル名を「 sanple02.html 」にします。
<html>
<head>
<meta charset=”utf-8″>
<title> </title>
</head>
<body>
<p style=”color:red”>この文字列は段落です</p>
<h3 style=”font-size:4em”>この文字列は見出しレベル３です</h3>
<h4 style=”border:solid 4px green”>この文字列は見出しレベル４です</h4>
<ol style=”background-color:pink”>
<li style=”text-align:center”>番号付き箇条書き１</li>
<li style=”text-align:right”>番号付き箇条書き２</li>
</ol>
<li style=”font-family:serif”>記号付き箇条書き１</li>
<li style=”font-family:suns-serif”>記号付き箇条書き２</li>
</ul>
</body>
</html>
スタイルシート記述の基礎知識
タグの中に記述する style=”font-size:100px” をスタイル属性といいます。
イコール （ ＝ ）に続けて、ダブルクォーテーションで、値を囲みます。
style=”font-size:100px”
属性名 プロパティ名 プロパティ プロパティの値 ダブルクォーテーションで囲む
タグで囲まれた文字が、スタイルシートでコントロールされたスタイルで表示されます。
プロパティを複数利用するときは ;（セミコロン）で区切ります。
style=”font-size:100px;color:red”
文字列内にある、特定の部分的な（インライン）文字のスタイル指定には タグ <span> を利用します。
例えば
竹の中からかぐや姫が生まれました。
かぐや姫は、月に行きました。
<p>竹の中から<span style=”color:red”>かぐや姫</span>が生まれました。</p>
<p><span style=”font-size:xx-large;color:red”>かぐや姫</span>は、月に行きました。</p>
スタイルシートの主なプロパティと値
| 行頭コメント | ||
| background-color | 背景色 | #RGBの16進法表示 色名 |
| border | 境界線 | 線種 線の太さ 線の色 |
| clear | 回り込みの解除 | both right left |
| color | 文字色 | #RGBの16進法表示 色名 |
| float | フロート（浮動化） | right left |
| font-family | フォントの種類 | sans-serif -> ゴシック体系のフォント serif -> 明朝体系のフォント cursive -> 筆記体系のフォント fantasy -> 装飾系のフォント monospace -> 等幅系のフォント |
| font-size | フォントのサイズ | em -> 1em = 1文字分の長さ mm cm in -> 1in = 2.54cm pt -> 72pt = 1in % xx-small x-small small medium large x-large xx-large |
| line-height | 行の高さ | normal em -> 1em = 1文字分の長さ px mm cm in -> 1in = 2.54cm pt -> 72pt = 1in % |
| list-style-type | マーカーの種類 | none -> マーカーを表示しない disc -> 黒丸 circle -> 白丸 square -> 四角 decimal -> 数字 upper-alpha -> 大文字アルファベット lower-alpha -> 小文字アルファベット upper-roman -> 大文字ローマ数字 lower-roman -> 小文字ローマ数字 decimal-leading-zero -> 2桁の数字 lower-greek -> 小文字ギリシャ文字 upper-latin -> 大文字ラテン文字 lower-latin -> 小文字ラテン文字 hebrew -> ヘブライ数字 armenian -> アルメニア数字 georgian -> グルジア数字 cjk-ideographic -> 漢数字 hiragana -> ひらがな katakana -> カタカナ hiragana-iroha -> いろは katakana-iroha -> イロハ |
| margin | マージンをまとめて指定 | 上 右 下 左 |
| text-align | 水平方向の表示位置 | left center right justify |
| vertical-align | 垂直方向の表示位置 | baseline top middle bottom text-top text-bottom |
| width | 内容領域の幅 | |
| height | 内容領域の高さ |
スタイル設定の応用
スタイル記述は、改行してもかまいません。
<html>
<head>
<meta charset=”utf-8″>
<title> </title>
</head>
<body>
<p style=”color:red;
font-size:1.3em;
text-alin:center;
width:400px;
margin:30px auto;
border:solid 6px orange”>
この文字列は段落です</p>
<h3 style=”font-size:2em”>
この文字列は見出しレベル３です</h3>
<h4 style=”border:solid 4px green
width:400px;”>
この文字列は見出しレベル４です</h4>
<ol style=”background-color:pink;
font-size:1.3em;
width:60%;”>
<li style=”text-align:center;
color:yellow;
background-color:brown”>
番号付き箇条書き１</li>
<li style=”text-align:right;
height:80px;
border:dotted pink 6px;”>
番号付き箇条書き２</li>
</ol>
<ul style=”font-size:30px;
height:100px;
border-radius:30px;
border:solid 3px magenta;”>
<li style=”font-family:serif”>
記号付き箇条書き１</li>
<li style=”font-family:suns-serif”>
記号付き箇条書き２</li>
</ul>
</body>
</html>
コメント