7日で覚えるHTML ～6日目～
2009年1月23日 金曜日  著者: 烏山菊千代
7日で覚えるHTML ～5日目～7日で覚えるHTML

文字の色を指定する

color
文字の色を指定する時は、「color」を使用します。
値には、カラーコード(例:#FFFFFF)か、カラーネーム(例:red,blue)などを使用します。(参照先：Web Safeカラー 216色【Web制作のインデックスサイト】)

例

PLAIN TEXT
HTML:
  1. <p style="color:#0033FF;">[#0033FF] サンタフェデボゴタ</p>
  2. <p style="color:darkgreen;">[darkgreen] グレートブリテン及び北部アイルランド連合王国</p>

表示結果

[#0033FF] サンタフェデボゴタ

[darkgreen] グレートブリテン及び北部アイルランド連合王国

文字のサイズを指定する

font-size
文字のサイズを指定する時は、「font-size」を使用します。
値は、数値（px,em…）やパーセント(%)、キーワード(xx-small,x-small,small,medium,large,x-large,xx-large)で指定する事ができます。
※IEの場合、pxでサイズ指定された文字は、ブラウザ機能による拡大,縮小が反映されません。

例

PLAIN TEXT
HTML:
  1. <p style="font-size;10px">[10px] Round About Midnight</p>
  2. <p style="font-size:3em;">[3em] Milestones</p>
  3. <p style="font-size:75%;">[75%] Kind Of Blue</p>
  4. <p style="font-size:150%;">[150%] My Funny Valentine</p>
  5. <p style="font-size:x-small;">[x-small] In A Silent Way</p>
  6. <p style="font-size:medium;">[medium] Bitches Brew</p>
  7. <p style="font-size:xx-large;">[xx-large] On The Corner</p>

表示結果

[10px] Round About Midnight

[3em] Milestones

[75%] Kind Of Blue

[150%] My Funny Valentine

[x-small] In A Silent Way

[medium] Bitches Brew

[xx-large] On The Corner

文字の太さを指定する

文字のサイズを指定する時は、「font-weight」を使用します。
値は、数値（100,200,300,400,500,600,700,800,900）か、下のキーワードで指定する事ができます。

値
標準(数値400と同等) normal
太字(数値700と同等) bold
相対的に1段階細くする場合 lighter
相対的に1段階太くする場合 bolder

font-weight
※フォントによっては、9段階で変化しないものもあります。ほとんどの場合は、「nomal」と「bold」の2パターンです。

例

PLAIN TEXT
HTML:
  1. <p style="font-weight:100;">[100] Portrait in Jazz</p>
  2. <p style="font-weight:300;">[300] Sunday at the Village Vanguard</p>
  3. <p style="font-weight:400;">[400] Waltz for Debby</p>
  4. <p style="font-weight:600;">[600] Moonbeams</p>
  5. <p style="font-weight:700;">[700] Alone</p>
  6. <p style="font-weight:900;">[900] Re: Person I Knew</p>
  7. <p style="font-weight:normal;">[normal] I Will Say Goodbye</p>
  8. <p style="font-weight:bold;">[bold] Undercurrent</p>
  9. <p style="font-weight:lighter;">[lighter] You Must Believe In Spring</p>
  10. <p style="font-weight:bolder;">[bolder] Affinity</p>

表示結果

[100] Portrait in Jazz

[300] Sunday at the Village Vanguard

[400] Waltz for Debby

[600] Moonbeams

[700] Alone

[900] Re: Person I Knew

[normal] I Will Say Goodbye

[bold] Undercurrent

[lighter] You Must Believe In Spring

[bolder] Affinity

文字のスタイルを指定する

文字のスタイルを指定する時は、「font-style」を使用します。
日本語では、イタリック体用のフォントが用意されていないので「italic」「oblique」の区別がなく、斜体で表示されます。

  値
標準 normal
イタリック体 italic
斜体 oblique

font-style

例

PLAIN TEXT
HTML:
  1. <p style="font-style:nomal;">[nomal] Giant Steps</p>
  2. <p style="font-style:italic;">[italic] My Favorite Things</p>
  3. <p style="font-style:oblique;">[oblique] Impressions</p>

表示結果

[nomal] Giant Steps

[italic] My Favorite Things

[oblique] Impressions

文字のフォントを指定する

文字のフォントを指定する時は、「font-family」を使用します。
値は、「フォント名」または以下のキーワード(フォントファミリー)で指定することができます。

  値
ゴシック sans-serif
明朝 serif
筆記体 cursive
装飾 fantasy
等幅 monospace

font-family
「,」で区切ることで複数のフォントを指定することができます。フォント名にスペースが入っている場合には、「"」「'」で括るようにします。複数のフォントが指定されている場合は、左側のフォントから優先されていきます。
また、指定したフォントが閲覧者のPCに入っていない場合は、閲覧者のブラウザが指定したフォントで表示されます。

例

PLAIN TEXT
HTML:
  1. <p style="font-family:"ＭＳ ゴシック";">[MS ゴシック] Brilliant Corners</p>
  2. <p style="font-family:'MS 明朝',serif;">[MS 明朝,serif] Misterioso</p>
  3. <p style="font-family:verdana;">[verdana] 5 by Monk by 5</p>
  4. <p style="font-family:sans-serif;">[sans-serif] It's Monk's Time</p>
  5. <p style="font-family:cursive;">[cursive] Solo Monk</p>
  6. <p style="font-family:monospace;">[monospace] Underground</p>

表示結果

[MS ゴシック] Brilliant Corners

[MS 明朝,serif] Misterioso

[verdana] 5 by Monk by 5

[sans-serif] It's Monk's Time

[cursive] Solo Monk

[monospace] Underground

文字をスモールキャップスにする

文字をスモールキャップスにしたい場合は 「font-variant」を使用します。
スモールキャップスとは、小文字と同じ高さで作られた大文字のことです。

  値
普通 nomal
スモールキャップス small-caps

font-variant

例

PLAIN TEXT
HTML:
  1. <p style="font-variant:nomal;">[nomal] Now's the Time</p>
  2. <p style="font-variant:small-caps;">[small-caps] Bird At The High-Hat</p>

表示結果

[nomal] Now's the Time

[small-caps] Bird At The High-Hat

小文字の部分がサイズは変わらずに、大文字の表記になっています。

行の高さを指定する

行の高さを指定したい場合は 「line-height」を使用します。
値は、nomal(標準値),数値（単位なし,px,em…）やパーセント(%)で指定する事ができます。
line-height
例

PLAIN TEXT
HTML:
  1. <p style="line-height:nomal;">[nomal] だだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだ</p>
  2. <p style="line-height:250%;">[250%] おらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおら</p>
  3. <p style="line-height:5em;">[5em] さんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんば</p>

表示結果

[nomal] だだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだだ

[250%] おらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおらおら

[5em] さんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんばさんば

まとめて設定する

「font」を使用すると、「font-size」「font-weight」「font-style」「font-family」「font-variant」」「line-height」をまとめて設定することができます。、「font-size」「font-weight」は必ず記入しなければいけません。(他は省略可能です。)
記述する順番は、「font-style」→「font-variant」→「font-weight」→「font-size」→「line-height」→「font-family」となります。

基本的には半角スペースで区切りますが、「font-size」→「line-height」のみ「/」で区切ります。
font
例

PLAIN TEXT
HTML:
  1. <p style="font:nomal 400 15px "MS 明朝";">[nomal 400 15px "MS 明朝"] 上上下下左右左右ＢＡ</p>
  2. <p style="font:italic 700 150%/20px 'MS ゴシック';">[italic 700 150%/20px 'MS ゴシック'] ふるいけや　かわずとびこむ　みずのおと　ばしや</p>

表示結果

[nomal 400 15px "MS 明朝"] 上上下下左右左右ＢＡ

[italic 700 150%/20px 'MS ゴシック'] ふるいけや　かわずとびこむ　みずのおと　ばしや

7日で覚えるHTML ～5日目～7日で覚えるHTML
人気ブログランキング にほんブログ村 ＩＴ技術ブログへ

関連する投稿

カテゴリー: 7日で覚えるHTML  | タグ: , ,

コメントはまだありません >コメントする

コメントはまだありません。

このコメント欄のRSSフィード
トラックバックURL:

コメントする