見出しをCSSで装飾する(文字サイズ)

見出しをCSSで装飾する(文字サイズ)見出しをCSSで装飾する(文字サイズ)の表示例

見出しのテキストサイズ(文字の大きさ)をスタイルシートで変更してみましょう。文字サイズの単位は様々ですが、閲覧する人が自分にあった文字サイズに出来るようパーセントやemなどの相対的な値にすることが望ましいです。

また、文字のサイズは<font size=”★”> ~ </font>でも指定できますが、スタイルシートを使うことが望ましいとされています。

長さ、パーセントで指定

font-size: 1.4em;
font-size: 90%;

パーセントで指定がオススメ

キーワードで指定(相対サイズ)

font-size: smaller; /*一段階小さいサイズ*/
font-size: larger; /*一段階大きいサイズ*/

キーワードで指定(絶対サイズ)

font-size: xx-large; /*最大サイズ*/
font-size: x-large;
font-size: large;
font-size: medium; /*標準サイズ*/
font-size: small;
font-size: x-small;
font-size: xx-small;/*最小サイズ*/

CSS記述例

見出しを記述する」の<head> ~ </head>内に以下を記述します。

<style type="text/css">  
<!-- 
h1 { font-size: 150%; }
h2 { font-size: 80%; }
h3 { font-size: 30px; }
h4 { font-size: xx-large; }
h5 { font-size: larger; }
h6 { font-size: 5em; }
-->  
</style>

見出しをCSSで装飾する(文字サイズ)の表示例

はてなブックマーク数 このエントリーをはてなブックマークに追加 Yahoo!ブックマークに登録