| カラーコード / サイトについて / リンク集 / お問い合わせ |
|
|
|
→ 文字色を指定する
→ 文字を斜体にする
→ 文字を装飾する
→ まとめて指定する
|
文字色を指定する
colorプロパティで文字色を指定することができます。値には前に説明した色の指定方法のどれかを指定します。
下に記述しているspan要素は特に意味はありませんが、下のようにしてスタイルシートを記述して使うことが多いと思います。
<span style="color : red">文字色を指定してます。</span>
-表示結果-
文字色を指定してます。
文字の大きさを指定する
font-sizeプロパティで文字サイズを指定することができます。値には前に説明した単位のどれかを記述します。
このほかにlarger large x-large xx-large smaller small
x-small xx-small mediumのどれかを指定することもできます。詳しくは下の表示結果をご覧ください。 <span style="font-size : 12pt">
文字の大きさ指定してます。</span><br> <span style="font-size : larger">larger</span><br> <span style="font-size : large">large</span><br> <span style="font-size : x-large">x-large</span><br> <span style="font-size : xx-large">xx-large</span><br> <span style="font-size : smaller">smaller</span><br> <span style="font-size : small">small</span><br> <span style="font-size : x-small">x-small</span><br> <span style="font-size : xx-small">xx-small</span><br> <span style="font-size : medium">medium</span> -表示結果-
文字の大きさ指定してます。
larger large x-large xx-large smaller small x-small xx-small medium 文字を斜体にする
font-styleプロパティで文字を斜体にしたりすることができます。値にはnormal italic obliqueのどれかを指定します。表示については下の表示結果をご覧ください。
<span style="font-style : normal">
これは普通の指定（normal）</span><br> <span style="font-style : italic">これは斜体の指定（italic）</span><br> <span style="font-style : oblique">これは斜体の指定（oblique）</span> -表示結果-
これは普通の指定（normal）
これは斜体の指定（italic） これは斜体の指定（oblique） 文字を装飾する
text-decorationプロパティで文字を装飾することができます。指定できる値はnone underline overline line-throughの４つで、noneは何もない状態、underlineは下線、overlineは上線、line-throughは取り消し線になります。詳しくは下の表示結果をご覧ください。
<span style="text-decoration : none">
これは普通の指定（none）</span><br> <span style="text-decoration : underline"> 下線（underline）</span><br> <span style="text-decoration : overline"> 上線（overline）</span><br> <span style="text-decoration : line-through"> 取り消し線（line-through）</span> -表示結果-
これは普通の指定（none）
下線（underline） 上線（overline） 取り消し線（line-through） 文字の太さを指定する
font-weightプロパティで文字の太さを指定することができます。値にはnormal bold bolder lighter 100 200 300
400 500 600 700 800 900のどれかを指定します。詳しくは下の表示結果をご覧ください。 <span style="font-weight : normal">
これは普通の指定（normal）</span><br> <span style="font-weight : bold">bold</span><br> <span style="font-weight : bolder">bolder</span><br> <span style="font-weight : lighter">lighter</span><br> <span style="font-weight : 100">100</span><br> <span style="font-weight : 200">200</span><br> <span style="font-weight : 300">300</span><br> <span style="font-weight : 400">400</span><br> <span style="font-weight : 500">500</span><br> <span style="font-weight : 600">600</span><br> <span style="font-weight : 700">700</span><br> <span style="font-weight : 800">800</span><br> <span style="font-weight : 900">900</span> -表示結果-
これは普通の指定（normal）
bold bolder lighter 100 200 300 400 500 600 700 800 900 フォントを指定する
font-familyプロパティでフォントを指定することができます。複数指定の場合は、カンマで区切ります。
ＨＴＭＬのときと同じように複数指定の場合は、自分のパソコンにインストールされているものから表示されます。Comic Sans MSのように空白を含むフォントを指定する場合は、"か'で囲みます。
<span style="font-family : 'ＭＳ Ｐ明朝'">
フォントを指定してます。</span> -表示結果-
フォントを指定してます。
まとめて指定する
fontプロパティでこれまでに説明したフォント関係のプロパティをまとめて指定することができます。
値には今まで説明したfont-style font-weight font-size font-familyの値を指定します。詳しくは下のサンプルソースをご覧ください。
<span style="font : normal 900 15pt 'ＭＳ Ｐ明朝'">fontプロパティ</span>
-表示結果-
fontプロパティ
|
 |