タダでインターネットでお小遣い稼ぎましょう!

タダでインターネットでお小遣いを稼ぎましょう!

スポンサードリンク
 

スタイルシート

前のページへ
 
スタイルシート 「フォント」

 
フォントを指定する   ↓

使用するフォントを指定します
複数指定するときは、「 , 」(カンマ)で区切ります
その場合、並べた順に優先順位となり、
指定したフォントがユーザー側にない場合は、
次に指定されているフォントで表示されるようになります
※あまり特殊なフォントを使用すると、自分のブラウザでは表示されますが
他のユーザーはそのフォントがインストールされていなければ表示されないので、
出来るだけ標準のフォントを使用しましょう

font-family: ★
serif→明朝系フォント
sans-serif→ゴシック系フォント
cursive→筆記体・草書体系フォント
fantasy→装飾フォント
monospace→等幅フォント

<head></head>内に記述

<style type="text/css">
<!--
body	{ font-size: 25px }
div#sample1	{ font-family: Impact,sans-serif }
div#sample2	{ font-family: Arial,sans-serif }
div#sample3	{ font-family: serif }
div#sample4	{ font-family: 'MS P ゴシック',Osaka,sans-serif }
-->
</style>

<body></body>内に記述

<div id="sample1">フォントを指定する</div>
<div id="sample2">フォントを指定する</div>
<div id="sample3">フォントを指定する</div>
<div id="sample4">フォントを指定する</div>

サンプル

フォントを指定する font-family
フォントを指定する font-family
フォントを指定する font-family
フォントを指定する font-family
 

このページの上へ

 

フォントサイズを指定する   ↓

フォントの大きさを指定します

font-size: ★
(数字)px
(数字)pt
(数字)em
(数字)%
xx-small→非常に小さい
x-small→小さい
small→やや小さい
medium→通常のサイズ
large→やや大きい
x-large→大きい
xx-large→非常に大きい

<head></head>内に記述

<style type="text/css">
<!--
span#sample1	{ font-size: 13px }
span#sample2	{ font-size: 15pt }
span#sample3	{ font-size: 2em }
span#sample4	{ font-size: 120% }
span#sample5	{ font-size: xx-small }
span#sample6	{ font-size: x-small }
span#sample7	{ font-size: small }
span#sample8	{ font-size: medium }
span#sample9	{ font-size: large }
span#sample10	{ font-size: x-large }
span#sample11	{ font-size: xx-large }
-->
</style>

<body></body>内に記述

<span id="sample1">13pxで指定</span>
<span id="sample2">15ptで指定</span>
<span id="sample3">2emで指定</span>
<span id="sample4">120%で指定</span>
<span id="sample5">xx-small</span>
<span id="sample6">x-small</span>
<span id="sample7">small</span>
<span id="sample8">medium</span>
<span id="sample9">large</span>
<span id="sample10">x-large</span>
<span id="sample11">xx-large</span>

サンプル

13pxで指定                               15ptで指定
2emで指定                120%で指定
xx-small         x-small          small          medium
large                   x-large
xx-large

 

このページの上へ

 

フォントを斜体にする   ↓

文字を斜体にします

font-style: ★
normal→通常の表示
italic→斜体
oblique→斜体

<head></head>内に記述

<style type="text/css">
<!--
body	{ font-size: 20px }
p#sample1	{ font-style: normal }
p#sample2	{ font-style: italic }
p#sample3	{ font-style: oblique }
-->
</style>

<body></body>内に記述

<p id="sample1">normalを指定</p>
<p id="sample2">italicを指定</p>
<p id="sample3">obliqueを指定</p>

サンプル

font-style: normalを指定

font-style: italicを指定

font-style: obliqueを指定

 

このページの上へ

 

フォントの太さを指定する   ↓

テキストなどの太さを指定します

font-weight: ★
100,200,300,400,500,600,700,800,900
normal→標準
bold→太字
bolder→一段階太い
lighter→一段階細い

<head></head>内に記述

<style type="text/css">
<!--
body	{
	font-family: Arial,sans-serif;
	font-size: 25px
	}
span#sample1	{ font-weight: 100 }
span#sample2	{ font-weight: 200 }
span#sample3	{ font-weight: 300 }
span#sample4	{ font-weight: 400 }
span#sample5	{ font-weight: 500 }
span#sample6	{ font-weight: 600 }
span#sample7	{ font-weight: 700 }
span#sample8	{ font-weight: 800 }
span#sample9	{ font-weight: 900 }
span#sample10	{ font-weight: bold }
span#sample11	{ font-weight: bolder }
span#sample12	{ font-weight: lighter }
-->
</style>

<body></body>内に記述

<span id="sample1">100</span><span id="sample2">200</span>
<span id="sample3">300</span><span id="sample4">400</span>
<span id="sample5">500</span><span id="sample6">600</span>
<span id="sample7">700</span><span id="sample8">800</span>
<span id="sample9">900</span>
<span>normal</span><span id="sample10">bold</span>
<span id="sample11">bolder</span><span id="sample12">lighter</span>

サンプル

100   200    300   400    500   600    700   800    900


normal   bold    bolder   lighter

 

このページの上へ

 

フォントをまとめて指定する   ↓

フォントの各種説定を一括指定します

font: ★ ★ ★ ★/ ★ ★
font-style→斜体など
font-variant→大文字を小さく表示
font-weight→フォントの太さ
font-size→フォントサイズ
line-height→行の高さ
font-family→フォント名

<head></head>内に記述

<style type="text/css">
<!--
div	{
	background-color: #ffebcd
}
#sample1	{ 
	font: italic 700 50px "Times New Roman",serif;
	color: #ff0000
}
#sample2		{
	font: bold x-small "MS P 明朝",平成明朝,serif;
	color: #008080
}
#sample3	{
	font: small/2em "MS P ゴシック",Osaka,sans-serif
}
-->
</style>

<body></body>内に記述

<span id="sample1">T,N,O</span>
<span id="sample2">〜ホームページを作ろう〜</span>
<p id="sample3">ホームページを作るのはとても簡単です。
コピー&ペーストで楽しく作りながらスキルアップしましょう!</p>

サンプル

T,N,O 〜ホームページを作ろう〜

ホームページを作るのはとても簡単です。コピー&ペーストで楽しく作りながらスキルアップしましょう!

 

このページの上へ