HTMLとCSSで作るウェブサイト作成入門

CSS(8)文字とフォントのスタイル

 ウェブページ上での文字は、CSSでかなり自在にスタイルを設定することができます。例えば、以下のサンプルをご覧下さい。

[CSSサンプル]
p {                            /*段落タグに設定*/
    text-indent: 20px;    /*20ピクセル字下げ*/
    color: orange;          /*色をオレンジに*/
    text-decoration: underline;  /*下線を引く*/
    font-size: 12px;       /*文字サイズ12ピクセル*/
    font-weight: bold;    /*太字に*/
}

[HTMLサンプル] ※基本タグは省略
<p>ここは段落内</p>ここは段落外

[サンプルのブラウザ表示結果]
CSSで文字装飾

 このサンプルでは、段落を指定する<p>タグに、CSSでスタイルを適用しています。CSSのサンプルは、コメントの通りですが、セレクタで「p」タグを指定した上で、20ピクセルのインデント、文字色をオレンジに、下線を引く、文字サイズ12ピクセル、太字を同時に指定しています。結果、<p>〜</p>の間の文字は、確かに指定通りのスタイルが適用されています。<p>〜</p>の外の文字(「ここは段落外」)にはスタイルは適用されていません。
 文字関連のスタイル適用は、他にも様々なものがあります。もちろん、すべて覚える必要はありませんので、「どんなことができるか」だけ確認しておいて、必要に応じて探して使えるようにしておきましょう。

●文字関連のスタイル

 文字のスタイルは様々な形で指定できます。上記のサンプルでも登場した「color」や「text-decoration」などが最初にありますが、それらプロパティの概要と、セレクタに設定できる対象、設定値の内容と意味が順に記載されています。全要素とは、あらゆるタグに指定できる、ということです。

プロパティ

概要

対象

設定値

color 文字色の指定 全要素 カラーコード(#FFFFFF等)、色名(red、blue等)
text-decoration 文字の装飾 全要素 none スタイルなし
underline 下線
overline 上線
line-through 取消線
text-align 横方向の表示位置 ブロックレベル要素 left 左寄せ
center 中央寄せ
right 右寄せ
vertical-align 縦方向の表示位置 インライン要素、th、td要素 top セル上寄せ
middle セル中段寄せ
bottom セル下寄せ
baseline ベースライン揃え
sub 上付き文字
super 下付き文字
text-top 文字上端揃え
text-bottom 文字下端揃え
text-indent インデント ブロックレベル要素 20pxや80%など
text-transform 大文字、小文字 全要素 none スタイルなし
capitalize 単語先頭1文字を大文字
uppercase 全て大文字
lowercase 全て小文字
white-space ソース中の半角スペース、タブ、改行の扱い 全要素 normal 通常表示
pre 改行等もソースの通り表示
nowrap ひとつの半角空白・自動改行なし
letter-spacing 文字間隔 全要素 5pxなど、normal
line-height 行送りの調整

●フォント関連のスタイル

 フォントの指定も可能です。見方は先と同様です。対象欄の全要素とは、あらゆるタグに指定できる、という意味です。

プロパティ

概要

対象

設定値

font 文字属性の一括指定 全要素 font-style、font-weight、font-size、line-height、font-family (スペース区切り)
font-family フォント 全要素 フォント名
font-size フォントサイズ 全要素 12pxや80%など
xx-large x-largeより1段大きく
x-large largeより1段大きく
large mediumより1段大きく
medium smallより1段大きく、largeより1段小さく
small mediumより1段小さく
x-small smallより1段小さく
xx-small x-smallより1段小さく
larger 現状より1段大きく
smaller 現状より1段小さく
font-weight 太字 全要素 normal 通常表示
bold 太字
bolder 現状より1段階太く
lighter 現状より1段階細く
font-style 斜体文字 全要素 normal 通常表示
oblique 斜体
italic イタリック

   
 
 
 
SPONSORED LINK


 

SPONSORED LINK