CSS-Styling
メニュー
- トップ
- 掲示板
- リンク
- お気に入りに追加（IEのみ）
CSS
- 基本
- CSSとは？
- 基本
- セレクタの種類
- 記述の仕方
- 単位について
- 色
- カラー指定
- フォント
- フォントの指定
- フォントのサイズ指定
- フォントの太さ指定
- フォントを斜体
- フォントをまとめて指定
- テキスト
- 文字の水平位置
- 文字の垂直位置
- 文字の行間を指定
- 文字の間隔を指定
- 文字のインデントを指定
- 文字の装飾
- リンク
- 未訪問リンク
- 既訪問リンク
- マウスが乗った時
- マウスを押した時
- ボックス
- ボックスの基本
- マージンの指定
- 余白の指定
- 幅と高さの指定
- ボーダー（枠線）
- ボーダーのスタイル指定
- ボーダーのカラー指定
- ボーダーの太さを指定
- ボーダーをまとめて指定
CSSの基本
CSSとは？？？
CSS（カスケーディングスタイルシート）はW3Cによって提唱された規格です。HTMLはHPの基本構造を作成するのに対してCSSはHPのデザイン要素に対して記述するのに使用します。 今後のHPデザインはCSSが主流となっていくでしょう。
まずはCSSの基本からお勉強していきましょう。
複数のセレクタに対して同じスタイルを設定する場合に記述します。
基本
セレクタ { 属性 : 値; ｝
スタイルしたい要素に対して属性に値を設定します。
h1 { color: #FF0000; }
見出し（h1）のフォントの色(color)を赤色(#FF0000)に設定。
複数の属性に対する記述の仕方
セレクタ { 属性A : 値A ; 属性B : 値B; }
属性と属性の間にセミコロンを置きます。
セレクタのグループ化
セレクタA , セレクタB { 属性 : 値; }
セレクタとセレクタの間にカンマ。複数のセレクタに対して同じスタイルを設定する場合に記述します。
セレクタには３通りのパターンがあります。
<p> や <h1> など
.（ピリオド）〜（クラス名）で記述します、基本セレクタと違い適応したい要素にだけ関連付けする事が出来ます。
クラスセレクタと違い、ページ内に一箇所しか使用出来ません。
#（シャープ）〜（ID名）で記述します。
基本セレクタ
HTMLの要素（タグ）にスタイルを設定。<p> や <h1> など
要素（タグ） { 属性 : 値; }
ページ内全ての指定した要素に対してスタイルが適応されます。
クラスセレクタ
.クラス名 { 属性 : 値; }
任意のclass名をつけ、適応したい要素に対して関連付けをします。.（ピリオド）〜（クラス名）で記述します、基本セレクタと違い適応したい要素にだけ関連付けする事が出来ます。
IDセレクタ
#ID名 { 属性 : 値; }
任意のID名をつけ、固有の要素に対して適応します。クラスセレクタと違い、ページ内に一箇所しか使用出来ません。
#（シャープ）〜（ID名）で記述します。
CSSの記述の仕方は３通りあります。
リンクした全てのページにCSSファイルで設定したスタイルが適応されます。
デザインの変更がCSSファイルのみで終わるので更新がとても簡潔化します。
CSSの記述はこの「外部CSSファイルにリンク」がメインになると思います。
HTMLへ記述
<style type="text/css">スタイル</style>
HTML内の<head>〜</head>内に記述します。
特定の要素へ記述
<要素 style="スタイル">〜</要素>
スタイルを設定したい要素に直接記述します。
外部CSSファイルにリンク
<link rel="stylesheet" href="外部CSSファイル" type="text/css">
外部CSSファイル（〜.css形式）へリンクします。リンクした全てのページにCSSファイルで設定したスタイルが適応されます。
デザインの変更がCSSファイルのみで終わるので更新がとても簡潔化します。
CSSの記述はこの「外部CSSファイルにリンク」がメインになると思います。
CSSで使用するポピュラーな単位について説明します。
px
１ピクセルを「１」とします、解像度によって変化しますので注意が必要。
em
そのページで使われているフォントの高さを「１」とします。
%
割合で表します、指定する要素により基準が異なります。