■ CSS
・CSSの基本
一般にスタイルシート呼ばれるものです。
・CSS指定の書き方(色々ありますがここでは、3種類)
- 要素名
要素名{プロパティー:値 ; }
※要素名はHTMLのタグの要素です。
※(参考書の記述もあり、)要素名をクラス名やID名に置き換えても設定が有効になる場合があります。
- ドット クラス名
.クラス名{プロパティー:値 ; }
もちろん、要素名.クラス名{プロパティー:値 ; }もOKです。
- シャープ ID名
#ID名{プロパティー:値 ; }
もちろん要素名#ID名{プロパティー:値 ; } もOKです。
- {プロパティー:値 ; }
プロパティーが、文字サイズの設定、色の設定などにあたり、値が実際の文字サイズ(26pxとか)、赤色(#ff0000)とかのことです。
・CSSの適用
- CSSを設定した要素名のタグを記述するだけです。
- <要素 class="クラス名">でCSSを適応できます。
- <要素 id="ID名">でCSSを適応できます。
idはページ内アンカーとしても使うので、CSS適応なのかアンカー設定なのか紛らわしい場合があります。
・CSSの記述場所
・・HTMLファイルhead内head内でstyleタグで囲って設定します。
<html lang="ja">
<head>
<style>
.kyo0 { border :none ;}
.kyo1 { border :1px solid #000000;}
.tal { border: 1px solid #000000;
border-collapse: separate; }
.tbb { border: 1px solid #000000; }
.padx { padding-left:50px ;}
</style>
</head>
<body>
〜
</body>
</html>
・CSSファイルを呼び出す場合(CSSファイルは、はcss。例＝ファイル名.css)
<link rel="stylesheet" href="CSSファイル名など">と記述します。
・CSSファイルの内容の例
/* コメント */
.kyo0 { border :none ;}
.kyo1 { border :1px solid #000000;}
.tal { border: 1px solid #000000;
border-collapse: separate; }
.tbb { border: 1px solid #000000; }
.padx { padding-left:50px ;}
・HTML記述の例
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="CSSファイル名など">
</head>
<body>
〜
</body>
</html>
© KinutaHandicraft
