Esprit's Style

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

１．文字の色（Color）
　　color: #?????? ;

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

GADARA NO BUTA 　File　　Edit　　Tool　　Help

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

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

p{
    font: normal normal bold 14pt/100% 'ＭＳ Ｐゴシック', Osaka;
}
div{
    font: bold 14pt/200% 'ＭＳ Ｐ明朝', 平成明朝, serif;
}
body{
    font: 12pt/150% 'ＭＳ Ｐゴシック', Osaka, sans-serif;
}

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

３．文字のスタイル（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 薬にも毒にもならない マニアックなセンチメンタリスト 聖母マリアのヒステリー

４．文字の変形（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

５．文字の太さ（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

６．文字の大きさ（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 チョモランマ Ｋ２ カンチェンジェンガ ローツェ マナスル アンナプルナ アコンカグア（南米） マッキンリー（北米） キリマンジャロ（アフ） ビンソン・マシフ（南極） 富士山

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

７．文字の高さ （行間を設定します）
　　line-height: 130% ;

@sample.css p{ line-height:100%; } span{ line-height:140%; } div{ line-height:2.0em; }

CCS Imagination 　File　　Edit　　Tool　　Help アリクイに 似ている私 雨の月曜日の午前中に 一人暮らしの部屋で 張り詰めた冬空と 叡智ある静けさ

８．文字の種類（Family）
　　font-family: 'ＭＳ ゴシック', 'MS UI Gothic', 'Osaka', sans-serif;

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

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

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

@sample.css p{ font-family:'ＭＳ ゴシック', sans-serif; } div{ font-family:'ＭＳ Ｐ明朝', 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)

９．文字の装飾
　　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 良く躾られた 　犬みたいなもの 新雪を踏みつける 　心地よい音 空の青さに気づくほど 　大人はヒマじゃない

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

@sample.css /* 一文字目に書式を設定する */ p:first-letter{ font-size: 28pt; color: #ff8000; /* オレンジ */ font-weight: bold;/* 太字 */ font-family: 'ＭＳ ゴシック'; float: left; /* 文字を回りこませる */ }

The Sputnik Sweetheart 　File　　Edit　　Tool　　Help

１１．文字間隔・単語間隔
　　 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!

１２．１行目インデント
　　 text-indent: 1.0em

@sample.css p{ text-indent:1.0em; }

チャップリンの殺人狂時代 　File　　Edit　　Tool　　Help 一人を殺せば犯罪者だが、百万人を殺せば英雄となる。たくさん殺したほうが勝ちなのか。

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

@sample.css /* 自動改行しない。空白をそのまま表示 */ p{ white-space:pre; } /* 自動改行しない。空白をつめる */ div{ white-space:norap; }

Sample CSS 　File　　Edit　　Tool　　Help い ろ は に ほ へ と

１４．大文字、小文字の指定
　　 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.

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

@sample.css p{ overflow:scroll; } div{ overflow:auto; }

Over Flow 　File　　Edit　　Tool　　Help 　　　　　　　　文の途中でとぎれます。

１６．縦書き / 横書き （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. Ｖｅｒｔｉｃａｌ 5. Horizontal 6. Horizontal 7 .Vertical 8. Horizontal

１７．均等割付（両端揃え・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 均等割付