esprits top Esprit's Style

    -    エンジニアの足つぼ    -

a

文字

〆 文字に対するさまざまなスタイルを紹介します

1.文字の色(Color)
  color: #?????? ;

@sample.css
p{
    color: #00b000; /* 緑 */ 
}

 GADARA NO BUTA
 File  Edit  Tool  Help

2.文字をまとめて設定 (スタイル,変形,太さ,サイズ/高さ,フォント種別)
  font: font-style font-variant
    font-weight font-size/line-height font-family

※ font-size と font-family以外は省略可能


@sample.css
p{
    font: normal normal bold 14pt/100% 'MS Pゴシック', Osaka;
}
div{
    font: bold 14pt/200% 'MS P明朝', 平成明朝, serif;
}
body{
    font: 12pt/150% 'MS Pゴシック', Osaka, sans-serif;
}

 
 CCS Highest Mountains
 File  Edit  Tool  Help
'MS Pゴシック 14pt' 東証 1,2,マザーズ
'MS P明朝 14pt' 大証 1,2,ヘラクレス
'MS Pゴシック 12pt' 名証 セントレックス
'Impact 11pt' 香港 H レッドチップ(香港$)
'Comic Sans MS 11pt' 上海B(米$) 深センB(香港$)

3.文字のスタイル(Style)
  font-style: normal/italic/oblique ; /* 普通/イタリック/斜め; */

@sample.css
p{
     font-style:normal;  /* 普通 */
}
h2{
     font-style:italic;  /* イタリック */
}
.??{
     font-style:obliquel;  /* 斜め */
}
 CCS unkown
 File  Edit  Tool  Help

薬にも毒にもならない

マニアックなセンチメンタリスト

聖母マリアのヒステリー

4.文字の変形(Variant)
  font-variant: normal/small-caps ; /* 普通/小さめの大文字; */

@sample.css
p{  /* 普通 */
        font-variant:normal;
}
h3{  /* 小さめの大文字 */
        font-variant:small-caps;
}

 CCS Wonderful Movie
 File  Edit  Tool  Help

Life Is Beautiful

Life Is Beautiful

5.文字の太さ(Weight)
  font-weight: normal/bold ; /* 普通/太字; */

文字太さの指定は、数値 400(normal)~900(bold)でも設定可能

@sample.css
p{ /* 普通 */
    font-weight:normal;
}
a{ /* 太字 */
    font-weight:bold;
}

 CCS Watch
 File  Edit  Tool  Help

Patek Philippe

Panerai

6.文字の大きさ(size)
  font-size: 20pt; /* フォントサイズ=20pt; */

文字サイズの指定は、%でも可能

@sample.css
p{ /* エベレスト */
    font-size:    20pt;
}
body{ /* カラコルム第二峰 */
    font-size:    18pt; /* h2 と大体同じサイズ */
}
.??{  font-size:  17pt;  }

.??{  font-size:  16pt;  }
.??{  font-size:  15pt;  }
.??{  font-size:  14pt;  }
.??{  font-size:  13pt;  }
.??{  font-size:  12pt;  }
.??{  font-size:  11pt;  }
.??{  font-size:  10pt;  }
.??{  font-size:   9pt;  }
 CCS Highest Mountains
 File  Edit  Tool  Help

チョモランマ

K2

カンチェンジェンガ

ローツェ
マナスル
アンナプルナ
アコンカグア(南米)
マッキンリー(北米)
キリマンジャロ(アフ)
ビンソン・マシフ(南極)
富士山

※ちなみにデフォルトの文字のサイズは h1は、約24pt

7.文字の高さ (行間を設定します)
  line-height: 130% ;

@sample.css

p{
    line-height:100%;
}

span{
    line-height:140%;
}

div{
    line-height:2.0em;
}
 CCS Imagination
 File  Edit  Tool  Help

アリクイに
似ている私

雨の月曜日の午前中に
一人暮らしの部屋で

張り詰めた冬空と
叡智ある静けさ

8.文字の種類(Family)
  font-family: 'MS ゴシック', 'MS UI Gothic', 'Osaka', sans-serif;

※ここで指定したフォント名'MS ゴシック' はWindows用、 'Osaka' はMac用のフォントです。

※フォント名は、カンマで区切って複数指定することが可能。
複数指定の場合、ユーザの環境で表示可能なものが採用されます。

※また各OS特有のフォントを指定した後、フォントの一般名を指定する
必要があります。
  "sans-serif" はゴシック系のフォントを指定します。
  "serif" は明朝系のフォントを指定します。
  "cursive" は手書き系のフォントを指定します。
  "fantasy" は装飾フォントを指定します。
  "monospace" は等幅フォントを指定します。

@sample.css

p{
    font-family:'MS ゴシック', sans-serif;
}
div{
    font-family:'MS P明朝', serif;
}
.userfont001{
    font-family:cursive;
}
.userfont002{
    font-family:fantasy;
}
.userfont003{
    font-family:monospace;
}
 CCS Buddism
 File  Edit  Tool  Help

釈迦如来 sans-serif

阿弥陀如来 serif

弥勒菩薩 (cursive)

観音菩薩 (fantasy)

不動明王 (monospace)

9.文字の装飾
  text-decoration : underline / line-through / overline ;
             none / blink ; /* なし / 点滅 */

@sample.css

p{
    text-decoration:underline;
}
span{
    text-decoration:line-through;
}
div{
    text-decoration:overline
}
 CCS Imagination
 File  Edit  Tool  Help

良く躾られた
 犬みたいなもの

新雪を踏みつける
 心地よい音

空の青さに気づくほど
 大人はヒマじゃない

10.特定の位置への書式設定
   要素名:first-letter{ ~ };   /* 1文字目に書式を設定 */
   要素名:first-line{ ~ };    /* 1行目に書式を設定 */

@sample.css

/* 一文字目に書式を設定する */
p:first-letter{
    font-size: 28pt;
    color: #ff8000;  /* オレンジ */
    font-weight: bold;/* 太字 */
    font-family: 'MS ゴシック';
    float: left; /* 文字を回りこませる */
}
 The Sputnik Sweetheart
 File  Edit  Tool  Help

11.文字間隔・単語間隔
   letter-spacing: 0.5em;    /* 文字間隔 */
   word-spacing: 1.0em;     /* 単語間隔 */

@sample.css
div{
    letter-spaceing:0.5em
}
span{
    word-spaceing:0.2em
}
 Sample CSS
 File  Edit  Tool  Help
間隔0.5em

(0.2em) Get that out of your mouth!

12.1行目インデント
   text-indent: 1.0em

@sample.css
p{
    text-indent:1.0em;
}
 チャップリンの殺人狂時代
 File  Edit  Tool  Help
一人を殺せば犯罪者だが、百万人を殺せば英雄となる。たくさん殺したほうが勝ちなのか。

13.スペース、改行のそのまま表示
   white-space: pre       /* そのまま表示 */
            nowrap      /* 改行しないで表示 */

 ※注意:
  IEの互換モードだとうまく表示されません。
NSで参照してください。
  IEの標準準拠・互換モードがわからない方は、HTMLのおまけを参照してね。
@sample.css
/* 自動改行しない。空白をそのまま表示 */
p{
    white-space:pre; 
}
/* 自動改行しない。空白をつめる */
div{
    white-space:norap; 
}
 Sample CSS
 File  Edit  Tool  Help

い ろ は に ほ へ と

14.大文字、小文字の指定
   text-transform:lowercase / uppercase / capitalize
             /* 大文字,小文字,先頭のみ大文字 */

@sample.css
p{
    text-transform:lowercase;
}
div{
    text-transform:uppercase;
}
span{
    text-transform:capitalize;
}
 Sample CSS
 File  Edit  Tool  Help
that was many moons ago.

that was many moons ago.

that was many moons ago.

15.はみ出る部分の処理
  overflow : visible / hidden / scroll / auto;
  /* はみ出して表示 / はみ出したら隠す / スクロール / 必要に応じてスクロール */

@sample.css
p{
    overflow:scroll;
}
div{
    overflow:auto;
}
 Over Flow
 File  Edit  Tool  Help
        文の途中でとぎれます。

16.縦書き / 横書き (IE独自タグ)
   writing-mode : tb-rl / lr-tb; /* 縦書き 横書き */

※半角の英数字は横向きで表示されます。
英数字も縦書きにしたい場合は全角文字を使います。

@sample.css
p{
    writing-mode:tb-rl;
}
div{
    writing-mode:lr-tb;
}
 Magurebu Three Country
 File  Edit  Tool  Help
1. Vertical 2. Horizontal
3. Horizontal 4. Vertical 5. Horizontal


6. Horizontal 7 .Vertical 8. Horizontal

17.均等割付(両端揃え・IE独自タグ)
   text-justify: auto / newspaper /* 自動 */
   newspaper /* 英字 */
   inter-word /* 単語間による調整 */
   distribute-all-lines /* 最後の行も調整 */
   inter-ideograph /* 単語間と文字間による調整*/
   inter-cluster /* アジア語 */
   distribute /* タイ語 */
   kashida ;/* アラビア語 */

※text-align:justifyのみでは均等割付できない?!ため
 IE 独自拡張を用いておこないます。
※ 必ず text-align: justify; と組み合わせて利用すること

@sample.css
div{
    text-align:justify;
    text-justify:distribute-all-lines;
}
 Magurebu Three Country
 File  Edit  Tool  Help

均等割付
The link to this site is free.   /   Last Updated : 28.May.2012   
Copyright © ESPRITS STYLE. 2008   /   ご意見、感想、苦情は、 こちらへ...
counter