スタイルシート

構文の記述

  • HTMLページ全体のタグやクラス別の指定
    <STYLE TYPE="text/css">
    <!--
    DIV { color: red; }
    
    .redcolor { color: red; }
    -->
    </STYLE>
  • タグ内のスタイル指定
    <DIV STYLE="color: red;">COLOR</DIV>
  • タグ内のクラス指定
    <DIV CLASS="redcolor">COLOR</DIV>

基本

  • コメント文
    /* コメント */
  • カンマで区切って複数の要素名を同時に指定する
    S, STRIONG { font-weight: bold; }
  • タグにクラス名を付ける。
    タグ名.クラス名
    タグ名を省略するとあらゆるタグに対してクラス名が使える。
    FONT.red { color: red; }
    .red { color: red; }
  • 定義済みクラス。これらはブラウザに依存するが決められている。
    コロンで区切られている。さらに後にクラス名もつけられる。
    A:link { color: green; }                /* リンク先は未閲覧の時 */
    A:visited { color: blue; }              /* リンク先が閲覧済みの時 */
    A:active { color: red; }                /* リンクをクリックした時 */
    A:hover { color: yellow; }              /* リンクにマウスカーソルを乗せた時 */
    P:first-line { font-weight: bold; }     /* 最初の一行目 */
    DIV:first-letter { font-weight: bold; } /* 最初の一文字 */
    SPAN:first-child { font-weight: bold; } /* 最初の一要素 */
  • 状況依存セレクタ。
    スペースで区切ると左から純に入れ子になっている時のみ有効になる
    UL LI { color: blue; }
    UL UL LI { color: green; }

フォント

font-size: 120%;

font-weight: nomal //通常
font-weight: bold //太字

font-style: normal //通常
font-style: italic //斜体
font-style: oblique //これも斜体だけど対応少ない

/* MS ゴシックフォントを使う。フォント名にスペースが含まれるものは "か'で囲む
*/
font-family: 'MS ゴシック'
/* ↓対応するフォントがなければ左から順に試す
*/
font-family: serif, sans-serif, cursive, fantasy, monospace

サイズ指定

指定ソース
相対単位拡大率(割合)font-size: 120%
相対単位ピクセル(画素数)font-size: 20px
相対単位Mの高さ分(ほぼ全角)font-size: 2em
相対単位xの高さ分(ほぼ半角)font-size: 4ex
絶対単位インチ(1in=2.54cm)font-size: 0.5in
絶対単位ミリfont-size: 12.7mm
絶対単位センチ(1cm=10mm)font-size: 1.27cm
絶対単位ポイントfont-size: 24pt
絶対単位パイカ(1pc=12pt)font-size: 2pc
絶対指定極小font-size: xx-small
絶対指定微小font-size: x-small
絶対指定font-size: small
絶対指定font-size: medium
絶対指定font-size: large
絶対指定巨大font-size: x-large
絶対指定極大font-size: xx-large
相対指定今より大きくfont-size: larger
相対指定今より小さくfont-size: smaller
  • 単位は基本的なものしか対応してないブラウザは多い。
    % px pt あたりは使っても問題ないと思われる。

    ptなどの絶対指定とは表示すると固定サイズになるもの。ネスケではならないらしい。
    あまり小さいサイズでptを指定すると(10pt以下とか)非常に見づらい上に
    ブラウザの拡大機能でも大きくしてくれないので不親切である。

    単位はフォントだけでなく、枠のサイズやレイアウトの幅など色々な場面で使う。
    単位を省略して数値だけというのは許されていないのでおかしなことになる。

太さ指定

font-weight: bold;

normal と bold 以外はあまり頼らないほうが対応ブラウザの面でもいいのではないかと。

指定ソース
絶対指定規定値(太くしない)font-weight: normal
絶対指定太いfont-weight: bold
相対指定さらに太くするfont-weight: bolder
相対指定さらに細くするfont-weight: lighter
絶対指定数値指定100font-weight: 100
絶対指定数値指定200font-weight: 200
絶対指定数値指定300font-weight: 300
絶対指定数値指定400font-weight: 400
絶対指定数値指定500font-weight: 500
絶対指定数値指定600font-weight: 600
絶対指定数値指定700font-weight: 700
絶対指定数値指定800font-weight: 800
絶対指定数値指定900font-weight: 900

スタイル指定(斜体)

font-style: italic;

斜体は italic を使ったほうが安心かも

指定ソース
規定値font-style: normal
斜体(イタリック)font-style: italic
斜体font-style: oblique

フォントファイル指定

font-family: serif;
CSS1標準
serifABC012xyzABC012xyzあいう伊呂波
sans-serifABC012xyzABC012xyzあいう伊呂波
cursiveABC012xyzABC012xyzあいう伊呂波
monospaceABC012xyzABC012xyzあいう伊呂波
fantasyABC012xyzABC012xyzあいう伊呂波
英文フォント
CenturyABC012xyzABC012xyzあいう伊呂波
Win英文フォント
ArialABC012xyzABC012xyzあいう伊呂波
Times New RomanABC012xyzABC012xyzあいう伊呂波
Courier NewABC012xyzABC012xyzあいう伊呂波
TerminalABC012xyzABC012xyzあいう伊呂波
Win日本語フォント
MS ゴシックABC012xyzABC012xyzあいう伊呂波
MS 明朝ABC012xyzABC012xyzあいう伊呂波
MS PゴシックABC012xyzABC012xyzあいう伊呂波
MS P明朝ABC012xyzABC012xyzあいう伊呂波
SymbolABC012xyzABC012xyzあいう伊呂波
Mac英文フォント
HelveticaABC012xyzABC012xyzあいう伊呂波
TimesABC012xyzABC012xyzあいう伊呂波
ChicagoABC012xyzABC012xyzあいう伊呂波
GenevaABC012xyzABC012xyzあいう伊呂波
CourierABC012xyzABC012xyzあいう伊呂波
MonacoABC012xyzABC012xyzあいう伊呂波
Mac日本語フォント
OsakaABC012xyzABC012xyzあいう伊呂波
Osaka−等幅ABC012xyzABC012xyzあいう伊呂波
細明朝体ABC012xyzABC012xyzあいう伊呂波
中ゴシック体ABC012xyzABC012xyzあいう伊呂波
平成角ゴシックABC012xyzABC012xyzあいう伊呂波
平成明朝ABC012xyzABC012xyzあいう伊呂波

テキスト配置

line-height: 120%;   /* テキストの上下の余白を空ける */
text-align: left;    /* 右寄せ */
text-align: center;  /* 中央寄せ */
text-align: right;   /* 左寄せ */
text-align: justify; /* 両端揃え(ややこしい)*/

テキスト装飾

text-decoration: none;		/* 何もなし */
text-decoration: underline;	/* 下線 */
text-decoration: overline;		/* 上線 */
text-decoration: line-through;	/* 打ち消し線 */
text-decoration: blink;		/* 点滅 */

ボーダー/マージン/パディング

border: none;		/* 枠無し(幅0 無色) */
border: solid 2px #ff0000;	/* 実線 */
border: dashed;		/* 点線 */
border: dotted;		/* 破線 */

border-top: solid 2px #ff0000;	/* 上枠 */
border-left: 
border-bottom: 
border-right: 

アンカー

A { text-decoration: none; } /* アンカータグの下線を消す */
A:link { color: green; }     /* 未見のページ */
A:visited { color: blue; }   /* 移動済みのページ */
A:active { color: red; }     /* 移動直後 */
A:hover {                    /* カーソルが乗った時 */
  color: red;
  text-decoration: underline; /* この時だけ下線を出す */
}

リスト

  • OL UL LI タグなどで表現する一覧 マーカーの形を指定する。OL ULで指定しておけば一括になる
    <UL>
    <LI STYLE="list-style-type: disc">disc 黒丸
    <LI STYLE="list-style-type: circle">circle 白丸
    <LI STYLE="list-style-type: square">square 四角
    <LI STYLE="list-style-type: decimal">decimal 数字(1,2,3)
    <LI STYLE="list-style-type: lower-roman">lower-roman ローマ数字(i,ii,iii)
    <LI STYLE="list-style-type: upper-roman">upper-roman ローマ数字(I,II,III)
    <LI STYLE="list-style-type: lower-alpha">lower-alpha アルファベット・小文字
    <LI STYLE="list-style-type: upper-alpha">upper-alpha アルファベット・大文字
    <LI STYLE="list-style-type: decimal-leading-zero">decimal-leading-zero 0付き数字(01,02,03)
    <LI STYLE="list-style-type: lower-greek">lower-greek ギリシャ文字・小文字
    <LI STYLE="list-style-type: upper-greek">upper-greek ギリシャ文字・大文字
    <LI STYLE="list-style-type: lower-latin">lower-latin ラテン文字・小文字
    <LI STYLE="list-style-type: upper-latin">upper-latin ラテン文字・大文字
    <LI STYLE="list-style-type: hebrew">hebrew ヘブライ数字
    <LI STYLE="list-style-type: armenian">armenian アルメニア数字
    <LI STYLE="list-style-type: georgian">georgian グルジア数字
    <LI STYLE="list-style-type: cjk-ideographic">cjk-ideographic 漢数字(一,二,三)
    <LI STYLE="list-style-type: hiragana">hiragana ひらがな
    <LI STYLE="list-style-type: katakana">katakana カタカナ
    <LI STYLE="list-style-type: hiragana-iroha">hiragana-iroha いろは
    <LI STYLE="list-style-type: katakana-iroha">katakana-iroha イロハ
    <LI STYLE="list-style-type: none">none 無し
    <LI STYLE="list-style-type: inhermit">inhermit 上位からの継承
    </UL>
  • マーカーの位置を外側・内側で指定する
    デフォルトでは字下げが自動的に行われる。

    list-style-position: inside;
    list-style-position: outside; /* デフォルト */
  • マーカーの画像を指定する
    list-style-image: url(image/marker.gif);
    list-style-image: none;        /* 無し */
    list-style-image: inhermit;    /* 継承 */

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規新規下位 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-11-19 (土) 18:41:31 (2214d)