タグにスタイルシート

ノウハウ, パソコン操作

スタイルシートを操作する(CSS基礎知識)

初期コード(以下のようにテキストエディタ:Macならmi で作成します)

ファイル名を「 sample01.html 」として書類ディレクトリなどに保存します。

<html>

<head>

  <meta charset=”utf-8″>

  <title> </title>

</head>

<body>

  <p>この文字列は段落です</p>

  <h3>この文字列は見出しレベル3です</h3>

  <h4>この文字列は見出しレベル4です</h4>

  <ol>

    <li>番号付き箇条書き1</li>

    <li>番号付き箇条書き2</li>

  </ol>

  <ul>

    <li>記号付き箇条書き1</li>

    <li>記号付き箇条書き2</li>

  </ul>

</body>

</html>

タグの意味

p 段落Paragraph 日本語では段落・節・記事などと訳されています。日本では章見出し・節見出し・項目見出しなどの見出しに対して内容を記述する「本文」を Paragraph を意味します。
h3 見出し レベル3Head 3 見出し
h4 見出し レベル4Head 4 見出し
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”>この文字列は見出しレベル3です</h3>

  <h4 style=”border:solid 4px green”>この文字列は見出しレベル4です</h4>

  <ol style=”background-color:pink”>

    <li style=”text-align:center”>番号付き箇条書き1</li>

    <li style=”text-align:right”>番号付き箇条書き2</li>

  </ol>

  <ul style=”font-size:100px”>

    <li style=”font-family:serif”>記号付き箇条書き1</li>

    <li style=”font-family:suns-serif”>記号付き箇条書き2</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”>

                この文字列は見出しレベル3です</h3>

  <h4 style=”border:solid 4px green

                width:400px;”>

                この文字列は見出しレベル4です</h4>

  <ol style=”background-color:pink;

                font-size:1.3em;

                width:60%;”>

    <li style=”text-align:center;

               color:yellow;

               background-color:brown”>

               番号付き箇条書き1</li>

    <li style=”text-align:right;

               height:80px;

               border:dotted pink 6px;”>

               番号付き箇条書き2</li>

  </ol>

  <ul style=”font-size:30px;

             height:100px;

             border-radius:30px;

             border:solid 3px magenta;”>

    <li style=”font-family:serif”>

                記号付き箇条書き1</li>

    <li style=”font-family:suns-serif”>

                記号付き箇条書き2</li>

  </ul>

</body>

</html>