A.T-MOON

contents

パンくずリスト



   フォントの指定(スタイルシート編)
文字のサイズ

 埋め込み: 要素{font-size:A;}
 インライン: <font style="font-size:A;">ここに文字</font>


Aには指定する値を挿入します。単位はスタイルシートでの単位指定のページで説明していますが
絶対値単位相対値単位で指定します。
相対値指定は表示されるブラウザに依存しますので注意してくださいね。
HTMLタグのみで指定できるものもありますが
HTMLタグよりも細かく指定できたり、一度に複数のスタイルを指定する事ができたりと非常に便利です。

A 単位の種類 サンプル
in = インチ(1in = 2.54cm) 絶対値単位 0.2inの文字
cm = センチメートル 絶対値単位 0.5cmの文字
mm = ミリメートル 絶対値単位 5mmの文字
pt = ポイント(1pt = 1/72in) 絶対値単位 12ptの文字
pc = パイカ(1pc = 12pt) 絶対値単位 1pcの文字
em = その要素のfont-sizeの値を1とする単位 相対値単位 1emの文字
ex = 基準となるフォントの小文字の高さを1とする単位 相対値単位 3exの文字
px = ディスプレイの解像度1ピクセルを1とする単位 相対値単位 15pxの文字
% = 親要素を100%と基準したときの割合 相対値単位 140%の文字
xx-large 相対値単位 サンプルなし
x-large 相対値単位 サンプルなし
large 相対値単位 largeの文字
medium(デフォルト) 相対値単位 mediumの文字
small 相対値単位 smallの文字
x-small 相対値単位 x-smallの文字
xx-small 相対値単位 xx-smallの文字

<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スタイルシートでフォントのサイズを指定</title>
  <style type="text/css">
  <!--
   body {
   font-size: 20pt;
   }
   -->
  </style>
 </head>
 <body>
 <p>
  ここはデフォルトのサイズで表示されますが<br>
  埋め込みスタイルシートで<br>
  Body内のフォントのサイズが20ptに指定されているので<br>
  この場合Body内のフォントのサイズは20ptとなります。
 </p>
 <p>
 <font style="font-size:x-small;">
 これがx-smallのフォントです
 </font>

 </p>
 <p>
 <font style="font-size:15pt;">
 これが15ptのフォントです
 </font>

 </p>
 </body>
</html>
ページTOP
ひとつ前のページに戻る

文字の種類

 埋め込み: 要素{font-family:A;}
 インライン: <font style="font-family:A;">ここに文字</font>

  ※インラインを使用する場合
  通常はHTMLタグで記述することでフォントの種類は指定できますが
  フォントのスタイルを複数一括で行いた場合にスタイルシートを使用して指定します。

Aには指定するフォントの種類を記述します。
様々な種類がありますので色々参考にしてみて下さい。  フォント表→コチラ
フォントの種類は複数指定することができ、<font style="font-family:A,B,C;">という風に
A=第一候補、B=第二候補、C=第三候補という具合にカンマで区切り表記します。

フォントの種類で注意しなくてはいけない事は、指定したフォントが相手のパソコンにあるかどうかです。
自分のパソコンには入っていて表示される文字でも
閲覧する相手のパソコンに入っていないフォントではコチラの指定した文字では表示されません。
フォントを指定しなかったり、指定したフォントが相手にない場合は
使用ブラウザに設定されたデフォルトのフォントで表示されることになります。

<html>
 <head>
  <meta http-equiv="content-style-type" content="text/css">
  <title>スタイルシートでフォントの種類を指定</title>
  <style type="text/css">
  <!--
   body {
   font-family: MSゴシック;
   }
   -->
  </style>
 </head>
 <body>
 <p>
  ここはデフォルトの文字で表示されますが<br>
  埋め込みスタイルシートで<br>
  Body内の文字の種類がMSゴシックに指定されているので<br>
  この場合Body内の文字の種類はMSゴシックとなります。
 </p>
 <p>
 <font style="font-family:Comic Sans MS;">
 これがComic Sans MS文字です
 </font>

 </p>
 <p>
 <font style="font-family:MS P明朝; font-size:18pt;">
 これがサイズ18ptの明朝体文字です
 </font>

 </p>
 </body>
</html>
ページTOP
ひとつ前のページに戻る

文字の色

 埋め込み: {color:A;}
 インライン: <font style="color:A;">ここに文字</font>


Aにはカラーコードかカラーネームが入ります。
カラーコード
#≠ノ続けて、赤(r)、緑(g)、青(b)の値を00〜ffの16進数計6桁で表します。
例えば白なら#ffffff=A黒なら#000000≠ニいうふうに記述します。
全て覚えるのは大変ですのでカラーチャートなどを参考にするとよいでしょう。

カラーネーム
文字通り色の名前≠ナ表します。
例えば白ならwhite=A黒ならblack≠ニいうふうに記述します。
大文字小文字の区別はありません。

ブラック
レッド
ブルー
グレイ
ピンク

<html>
 <head>
  <title>ココにタイトル</title>
  <style type="text/css">
  <!--
   body {
   color: blue;
   }
   -->
  </style>
 </head>
 <body>
 <p>
 ここはデフォルトの文字で表示されますが<br>
 埋め込みスタイルシートで<br>
 Body内の文字の種類がMSゴシックに指定されているので<br>
 この場合Body内の文字の種類はMSゴシックとなります。
 </p>
 <p>
 <font color="#000000">
 黒の文字です
 </font>

 </p>
 <p>
 <font color="pink">
 ピンクの文字です
 </font>

 </p>
 </body>
</html>
ページTOP
ひとつ前のページに戻る

文字をまとめて指定

 埋め込み: 要素{font-size:A; font-family:B; color:C;}
 インライン: <font style="font-size:A; font-family:B; color:C;>〜</font>


ABCにはそれぞれの属性の値が入ります。

サイズ16px、明朝体、緑色の文字です

<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font style="font-size:16px; font-family:MS P明朝; color:green;">
 サイズ16px、明朝体、緑色の文字です
 </font>

 </body>
</html>

文字の指定にはスタイルシートでの他にHTMLタグでも指定することができます。
HTMLタグの章も参考にしてみて下さい。

ページTOP
ひとつ前のページに戻る

文字の間隔の指定

 埋め込み: 要素{letter-spacing:A;}
 インライン: <font style="letter-spacing:A;">〜</font>


Aにはそれぞれの間隔を指定する値が入ります。

間隔15pxの文字です

<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font style="letter-spacing:15px;">
 間隔15pxの文字です
 </font>

 </body>
</html>

ページTOP
ひとつ前のページに戻る

文字の行間の指定

 埋め込み: 要素{line-height:A;}
 インライン: <font style="line-height:A;">〜</font>


テキストが数行にわたる時の行間を指定します。
Aにはそれぞれの間隔を指定する値が入ります。
ボックスの領域の高さ(1行の上端から下端までの幅)を数値に単位をつけて設定します。

※注意
フォントサイズに対して行間がフォントサイズより小さい数値で指定してはいけません。
フォントサイズより行間のサイズが小さくなると、テキストが次の行にはみ出してしまい
文字が重なってしまうので注意して設定して下さい。
また、改行タグ<br>を使う場合
ひとつの改行で指定された行間の分しか改行されませんので、これも注意が必要です。

行間30pxの文字です
一行目と二行目との間隔が30pxとなってます


<html>
 <head>
  <title>ココにタイトル</title>
 </head>
 <body>
 <font style="line-height:30px;">
 行間30pxの文字です<br>
 一行目と二行目との間隔が30pxとなってます
 </font>

 </body>
</html>

ページTOP
ひとつ前のページに戻る
スタイルシートindex フォントの装飾 1(スタイルシート編)