https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

文字の大きさを変える

{font-size:値;}で文字(テキスト)の大きさを変えることが出来ます。

■ 値の種類

値の種類にはpx、pt、em、%などがあります。他にも以下のような種類があります。

説明
xx-small最小
x-small小さい
smallやや小さい
medium標準サイズ
largeやや大きい
x-large大きい
xx-large最大

【ブラウザ表示】

10px
10pt
5em
xx-small
x-small
small
medium

large

x-large

xx-large


ソース

<span class="smaple1">10px</span>
<span class="smaple2">10pt</span>
<span class="smaple3">5em</span>
<div class="sample4">xx-small</div>
<div class="sample5">x-small</div>
<div class="sample6">small</div>
<div class="sample7">medium</div>
<p class="sample8">large</p>
<p class="sample9">x-large</p>
<p class="sample10">xx-large</p>

外部ファイル

span.sample1{font-size:10px;}
span.sample2{font-size:10pt;}
span.sample3{font-size:5em;}
div.sample4{font-size:xx-small;}
div.sample5{font-size:x-small;}
div.sample6{font-size:small;}
div.sample7{font-size:medium;}
p.sample8{font-size:large;}
p.sample9{font-size:x-large;}
p.sample10{font-size:xx-large;}


<body>~</body>に直接記入する場合

<span style="font-size:10px;">10px</span>
<span style="font-size:10pt;">10pt</span>
<span style="font-size:5em;">5em</span>
<div style="font-size:xx-small;">xx-small</div>
<div style="font-size:x-small;">x-small</div>
<div style="font-size:small;">small</div>
<div style="font-size:medium;">medium</div>
<p style="font-size:large;">large</p>
<p style="font-size:large;">x-large</p>
<p style="font-size:large;">xx-large</p>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

文字の色を変える
文字の太さを指定する
文字の書体を指定する
文字を斜めにする
小文字英字を大文字で表示
文字の表示位置を指定する
字下げをする
行間を指定する
文字、単語の間隔を空ける
文字に線を引く
小文字と大文字を入れ換える
上付き文字と下付き文字

スタイルシート一覧のページに戻る