
1.文字の色を指定する
color:色指定
<色指定>
#RRGGBB・・・・・R(赤)、G(緑)、B(青)の部分に2桁ずつの英数字(1からF)を指定。
#RGB・・・・・・・・ 上の方法で2桁が同じ場合に省略して指定。
例: #11aa66 → #1a6 、#0055ff → #05f
rgb(R,G,B)・・・ ・R(赤)、G(緑)、B(青)の部分に
0〜255 の数字を指定。
rgb(R%,G%,B%)・・R(赤)、G(緑)、B(青)の部分に
0〜100 の数字で%指定。
カラーネーム・・るカラーネームを記入する。
例: red blue green yellow orange purple pink black white
色指定に関しては
HTML講座_色も参照してみてください
(例)
<div style="color:#11aa66;">文字の色サンプル1</div>
<div style="color:#05f;">文字の色サンプル2</div>
<div style="color:rgb(256,256,0);">文字の色サンプル3</div>
<div style="color:rgb(30%,30%,30%);">文字の色サンプル4</div>
<div style="color:pink;">文字の色サンプル5</div>
(結果)
文字の色サンプル1
文字の色サンプル2
文字の色サンプル3
文字の色サンプル4
文字の色サンプル5
2.書体(フォント)を指定する
font-family : "フォント名" 又は
(フォントファミリー名);
<フォント名>
HTML講座_フォントの種類を参照ください。
全角半角の区別、スペースなど正確に指定する必要があります。
<フォントファミリー名>(そのフォントファミリー名ないからフォントが選択されます)
serif : 明朝体やTimesなど
sans-serif : ゴシック体風やHelveticaなど
cursive : 筆記体的なフォント
fantasy : 装飾フォント
monospace : 等幅のフォント
○閲覧者の環境(ブラウザ)によっては指定したフォントが指定どおりに表示されないことがあります。
○フォント名で設定する場合は["]を使って囲みます。ファミリー名の場合はなくても良いです。
○複数設定しておくと、第1候補のフォントが閲覧者の環境で表示出来ない場合に次の候補場表示されます。候補間は[,]で区切って並べます。
(例)
<div style="font-family :cursive;">フォントファミリー名(cursive)</div>
<div style="font-family :"studz"
,"Comic Sans MS","MS
明朝">フォント名(studz、Comic
Sans MS、MS 明朝)</div>
(結果)
フォントファミリー名(cursive)
フォント名(studz、Comic Sans MS、MS 明朝)
3.文字の大きさを指定する
font-size : 数値指定又は %指定は キーワード
<数値指定>
サイズを表す数値と単位で表示
単位
pt ポイント (フォントサイズを示す一般的な単位です)
mm ミリメートル
cm センチメートル
in インチ(1インチ=フ・5mm)
pc パイカ(1pc=12pt)
em 大文字のMの高さを基準にした1文字の大きさ
ex 小文字のxの高さを基準にした1文字の大きさ
px ピクセ・・BR>
<%指定>
パーセントを表す数値と%で表示。
親要素で指定されているサイズに対しての相対的なサイズとなります
<キーワード指定>
xx-small : 極めて小さい
x-small : 小さい
small : やや小さい
medium : 標準(デフォルト)
large : やや大きい
x-large : 大きい
xx-large : 極めて大きい
smaller : 親要素のサイズより1段階小さい
larger : 親要素のサイズより1段階大きい
(例)
<div style="font-size : x-large;">x-largeはこんなに大きい文字です</div>
(結果)
x-largeはこんなに大きい文字です
(例)
<div style="font-size : 12px;">12ピクセの文字です</div>
(結果)
12ピクセの文字です
4.文字の太さを変更する
font-weight : キーワード
<キーワード>
normal : 標準(デフォルト)
bold : 標準的な太字
lighter : 親要素より細くする
bolder : 親要素より太くする
<数値指定。・BR>
数値は100、200、300、400、500、600、700、800、900で指定します。
これ以外の数値を指定しても効果がありません
さらに、フォントによっては数値に応じた太さが用意されていない場合があります
400がnormal、700がboldと同じ太さです。
(例)
<div style="font-weight : bold;">標準的な太字にしてみま
した</div>
(結果)
標準的な太字にしてみました
(例)
<div style="font-weight : 100;">数値で100にしてみまし
た</div>
(結果)
数値で100にしてみまし た
5.文字の行間を設定する
line-height : 数値指底又は %指定 又は 倍率指定
又はキーワード指定
<数値指定>
サイズを表す数値と単位で表示
単位
pt ポイント (フォントサイズを示す一般的な単位です)
mm ミリメートル
cm センチメートル
in インチ(1インチ=フ・5mm)
pc パイカ(1pc=12pt)
em 大文字のMの高さを基準にした1文字の大きさ
ex 小文字のxの高さを基準にした1文字の大きさ
px ピクセ・・BR>
<%指定>
パーセントを表す数値と%で表示。
親要素で指定されているサイズに対しての相対的なサイズとなります
<キーワード>
キーワード normal(デフォルト)
(例)
<div style="line-height:2;">
倍率指定で2を設定してみました。<BR>
こんな感じの表示になります。</div>
(結果)
倍率指定で2を設定してみました。
こんな感じの表示になります。
(例)
<div style="line-height:50%;">
行間50%で設定してみまし た。<BR>
こんな感じの表示になります。</div>
(結果)
行間50%で設定してみました。
こんな感じの表示になります。
6.文字を斜体にする
font-style : キーワード;
<キーワード>
normal : 通常
italic : 斜体
oblique : 斜体 (italicとobliqueは厳密には違うようですが、結果はほぼ同じです)
(例)
<div style="font-style : italic;">文字を斜体にしてみました</div>
(結果)
文字を斜体 にしてみました
7.font設定をまとめて指定する
font : font-styleの値 font-weightの値
font-sizeの値/line-heightの値
font-familyの値;
指定したい属性を半角スペースで区切って記述します。
font-style : 斜体・・省略可能
font-weight : 文字の太さ・・省略可能
font-size : 文字の大きさ・・省略不可
line-height : 行送り・・省略可能、記述するさいはfont-sizeの後に/をつけて指定します
font-family : フォント名・・省略不可
(例)
<DIV style="font:normal normal bold
20px/30px "MS ゴシック";">フォントの設定をまとめて行っちゃいました!</DIV>
(結果)
フォントの設定をまとめて行っちゃいました!
初心者による初心者のためのCSS講座_TOPに戻る