★ ホームページを作ってみよう
�� ★
スタイルシート（ＣＳＳ）・フ ォ ン ト（文字）の 指 定 方 法 |
管理人が勉強するためのページです よかったら参考にしてね♪ ★ ホームページを作ってみよう
�� ★
お
知 ら せ ・・・ 一度に覚えるのは無理・・・（^_^;）なので、少しずつ勉強しながら追加していきたいと思ってます
英文字のスタイル（スモールキャピタル・・・小文字部分を大文字が小さくなった状態に表示）の指定方法を追加で〜っす♪
☆ 07/11/18 ページの一番下から、表のＴＯＰの行へジャンプするようにしてみました。。ＣＳＳのお勉強とは関係ないんだけど (^ー^ゞ
※ ＨＴＭＬの本を参考にしています
|
Ｆ ｏ ｎ ｔ （ 文 字 ） |
内 容 |
|
◆ このページでは、スタイルシート（ＣＳＳ）のフォント関係の指定方法を勉強しています ＰＲＯＰＥＲＴＹ （ プロパティ … 何を ） ： ＶＡＬＵＥ （ バリュー … どうするか ） を 具体的に指定する方法です
|
|
|
★ スタイル指定の基本 |
Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ： Ｖ Ａ Ｌ Ｕ Ｅ
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ 何を （ 色、大きさ、書体、段落、余白、背景など ）
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ どうするか （ ＰＲＯＰＥＲＴＹの具体的な数値など ）
|
|
★ 記述に使う記号と読み方 |
「 ｛ 」 ・・・ 左中括弧 「 ｝ 」 ・・・ 右中括弧 「 ： 」 ・・・ コロン 「 ； 」 ・・・ セミコロン 「 ．」 ・・・ ピリオド 「 ，」 ・・・ コンマ または カンマ 「 ’」 ・・・ アポストロフィー |
|
★ ≪ Ｆｏｎｔ− 〜 ≫が 使える有効な要素タグ |
＜ Ｐ ＞、＜ ＤＩＶ ＞、＜ Ａ ＞、＜ ＦＯＮＴ ＞、＜ ＴＤ ＞、＜ ＳＥＬＥＣＴ ＞ ＜ ＩＮＰＵＴ ＞、＜ ＴＥＸＴＡＲＥＡ ＞ など
|
|
フ ォ ン ト （文字）関 係 の Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ （ プロパティ ） |
◎ サ イ ズ （大きさ） ・・・ ｆ ｏ ｎ ｔ − ｓ ｉ ｚ ｅ ： 文 字 の サ イ ズ |
|
◎ 書 体 （文字の形） ・・・ ｆ ｏ ｎ ｔ − ｆ ａ ｍ ｉ ｌ ｙ ： フォント名 または 系列別の総称 |
|
|
◎ ウエイト （太さ） ・・・ ｆ ｏ ｎ ｔ − ｗ ｅ ｉ ｇ ｈ ｔ ： 文 字 の 太 さ |
|
|
◎ 形 状 （斜体など） ・・・ ｆ ｏ ｎ ｔ − ｓ ｔ ｙ ｌ ｅ ： イ タ リ ッ ク または 斜 体 |
|
|
◎ 英 文 字 （スモールキャピタル） ・・・ ｆ ｏ ｎ ｔ − ｖ ａ ｒ ｉ ａ ｎ ｔ ： 英文字のスタイル |
|
|
◎ 装 飾 （下線、、取り消し線など） ・・・ ｔ ｅ ｘ ｔ − ｄ ｅ ｃ ｏ ｒ ａ ｔ ｉ ｏ ｎ ： 装 飾 の 種 類 |
|
|
◎ 色 ・・・ ｃ ｏ ｌ ｏ ｒ ： 文 字 の 色 |
|
|
フ ォ ン ト （文字）関 係 の Ｖ Ａ Ｌ Ｕ Ｅ （ Ｖ Ａ Ｌ Ｕ Ｅ 値 ・ 数 値 ） |
◎ サ イ ズ （大きさ） ・・・ 下記の「文字のサイズを指定する方法」の欄を見てね♪ |
|
◎ 書 体 （文字の形） ・・・ フォント名 または、系列別の総称（ｃｕｒｓｉｖｅ、ｓｅｒｉｆ、ｓａｎｓ−ｓｅｒｉｆ、ｆａｎｔａｓｙなど） |
|
|
◎ ウエイト （太さ） ・・・ ｎｏｒｍａｌ（標準）、ｂｏｌｄ（太字）、ｂｏｌｄｅｒ（より太く）、ｌｉｇｈｔｅｒ（より細く） |
|
|
◎ 形 状 （斜体など） ・・・ ｎｏｒｍａｌ（標準）、ｉｔａｌｉｃ（イタリック体）、ｏｂｌｉｑｕｅ（斜体） |
|
|
◎ 英 文 字 （スモールキャピタル） ・・・ ｎｏｒｍａｌ（標準）、ｓｍａｌｌ−ｃａｐｓ（スモールキャピタル） |
|
|
◎ 装 飾 （下線、、取り消し線など） ・・・ ｎｏｎｅ（標準）、ｕｎｄｅｒｌｉｎｅ（下線）、ｏｖｅｒｌｉｎｅ（上線） ｌｉｎｅ−ｔｈｒｏｕｇｈ（取り消し線）、ｂｌｉｎｋ（点滅） |
|
|
◎ 色 ・・・ カラーネーム または ＃****** （１６進数値） |
|
|
◆ 文 字 の サ イ ズ
|
◆ 文字のサイズ（大きさ）を指定する方法
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ ｆ ｏ ｎ ｔ − ｓ ｉ ｚ ｅ
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ 下記の単位を使った数値
≪ 記述例 ≫
Ｓ Ｔ Ｙ Ｌ Ｅ ＝ ” ｆ ｏ ｎ ｔ − ｓ ｉ ｚ ｅ ： 1 4 ｐ ｔ ”
★ ＶＡＬＵＥのサイズ指定に使える単位 ◎ 具体的な数値を指定する方法 ｉｎ （インチ）、ｃｍ （センチメートル）、ｍｍ （ミリメートル）、ｐｔ （ポイント） ｐｘ （ピクセル）、ｐｃ （パイカ）
◎ ＶＡＬＵＥ値で指定する方法 ｘｘ−ｓｍａｌｌ （超極小）、ｘ−ｓｍａｌｌ （極小）、ｓｍａｌｌ （小） ｍｅｄｉｕｍ （標準） ｌａｒｇｅ （大）、ｘ−ｌａｒｇｅ （特大）、ｘｘ−ｌａｒｇｅ （超特大） ｓｍａｌｌｅｒ （より小さく） ｌａｒｇｅｒ （より大きく）
◎ 基準フォントで指定する方法 ｅｍ （基準フォントの高さ）、ｅｘ （基準フォントのｘの高さ） ％ （基準フォントのサイズに対する比率）
|
|
◆ 書 体 （文字の形）
|
◆ 書体（文字の形）を指定する方法
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ ｆ ｏ ｎ ｔ − ｆ ａ ｍ ｉ ｌ ｙ
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ フォント名 または 系列別の総称
≪ 記述例 ≫
Ｓ Ｔ Ｙ Ｌ Ｅ ＝ ” ｆ ｏ ｎ ｔ − ｆ ａ ｍ ｉ ｌ ｙ ： HG丸コ゛シックM-PRO ”
★ ＶＡＬＵＥの書体指定に使える値
◎ フォント名 ＭＳ ゴシック、ＭＳ 明朝、 HG丸コ゛シックM-PRO などなど、他にもたくさんあります ◎ 系列別の総称 cursive （ カーシヴ ・ 草書体 ）、serif （ セリフ ・ 明朝体 ） sans-serif （ サンセリフ ・ ゴシック体 ） fantasy （ ファンタジー ・ 装飾的な文字 )
★ フォント名で指定する場合の注意点
見る側で対応していないフォントの場合のことを考えて、表示する書体を 複数指定しておくと良いとの事です
ｆ ｏ ｎ ｔ − ｆ ａ ｍ ｉ ｌ ｙ ： HG丸コ゛シックM-PRO，’Times New Roman’，・・・
※ 複数の書体を指定する時は、「 ， 」（コンマ）で区切って続けて記述し 「 Times New Roman 」のようにフォント名の中にスペースを含む場合は 「 ’ 」（アポロストフィー）で囲んで記述します
|
|
◆ 色 （文字の色） |
◆ 文字の色を指定する方法
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ ｃ ｏ ｌ ｏ ｒ
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ 文 字 の 色
※ カラーネーム または ＃****** （１６進数値）で指定します
≪ 記述例 ≫
文字の色を、「 白 」に指定する場合
Ｓ Ｔ Ｙ Ｌ Ｅ ＝ ” ｃ ｏ ｌ ｏ ｒ ： w h i t e （ または ＃ ｆ ｆ ｆ ｆ ｆ ｆ ） ”
|
|
◆ ウエイト （文字の太さ） |
◆ 文字の太さ（ウエイト）を指定する方法
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ ｆ ｏ ｎ ｔ − ｗ ｅ ｉ ｇ ｈ ｔ
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ 文 字 の 太 さ
※ ｎｏｒｍａｌ（標準）、ｂｏｌｄ（太字）、ｂｏｌｄｅｒ（より太く）、ｌｉｇｈｔｅｒ（より細く）の ４つで指定できます
≪ 記述例 ≫
Ｓ Ｔ Ｙ Ｌ Ｅ ＝ ” ｆ ｏ ｎ ｔ − ｗ ｅ ｉ ｇ ｈ ｔ ： ｂ ｏ ｌ ｄ ”
|
|
◆ 形 状 （斜体文字など） |
◆ 文字の太さ（ウエイト）を指定する方法
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ ｆ ｏ ｎ ｔ − ｓ ｔ ｙ ｌ ｅ
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ イ タ リ ッ ク または 斜 体
※ ｎｏｒｍａｌ（標準）、ｉｔａｌｉｃ（イタリック体）、ｏｂｌｉｑｕｅ（斜体）の３つで指定できます
≪ 記述例 ≫
文字の形状を、「 イタリック体 」に指定する場合
Ｓ Ｔ Ｙ Ｌ Ｅ ＝ ” ｆ ｏ ｎ ｔ − ｓ ｔ ｙ ｌ ｅ ： ｉ ｔ ａ ｌ ｉ ｃ ”
|
|
◆ 英 文 字 （スモールキャピタル表示） |
◆ 英文字のスタイルを指定する方法
● Ｐ Ｒ Ｏ Ｐ Ｅ Ｒ Ｔ Ｙ ・・・ ｆ ｏ ｎ ｔ − ｖ ａ ｒ ｉ ａ ｎ ｔ
● Ｖ Ａ Ｌ Ｕ Ｅ ・・・ 英文字のスタイル
※ ｎｏｒｍａｌ（標準）、ｓｍａｌｌ−ｃａｐｓ（スモールキャピタル）の２つで指定できます
★ スモールキャピタル ・・・ 英文字の小文字部分を、大文字を小さくした形で表示する 例えば、 F o n t ⇒ F O N T というふうに表示
※ 書体がスモールキャピタルで表示できないフォントの場合は、大文字表示になります
≪ 記述例 ≫
英文字のスタイルを、「 スモールキャピタル表示 」に指定する場合
Ｓ Ｔ Ｙ Ｌ Ｅ ＝ ” ｆ ｏ ｎ ｔ − ｖ ａ ｒ ｉ ａ ｎ ｔ ： ｓ ｍ ａ ｌ ｌ − ｃ ａ ｐ ｓ ”
|
|
|