ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

文字の装飾

文字を斜体、太字、下線などで強調する方法

font-styleやfont-weight、text-decorationを使うことにより、文字に様々な装飾(斜体、太字、下線など)を施すことが可能です。
また、組み合わせにより斜体+太字や、太字に下線、太字に色の変更なども可能となります。

文字を斜体にする

文字を斜体にするには、プロパティにfont-styleを指定します。

.moji {
font-style:値の選択;
}

font-styleでは、「italic」か「oblique」の値を選択することができます。

italicは斜体+続け文字のような表示になり、obliqueはそのまま文字を傾けたような表示になります。

例:italicに指定した場合

[CSSの記述例]
.italic {
font-style:italic;
}
[HTMLの記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>文字の装飾</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<p class="italic">italicの場合:italic font sample</p>

</body>
</html>

[表示サンプル]
italicの場合:italic font sample

文字を太字にする

文字を太字にするには、font-weightプロパティを指定します。

.futomoji {
font-weight:太さの値;
}

太さの値を指定するには、数値もしくはキーワードで指定することができます。

数値で指定する場合

  • 100
  • 200
  • 300
  • 400(標準のサイズ)
  • 500
  • 600
  • 700
  • 800
  • 900
[表示サンプル]
400の太さ(標準):テキストテキスト
700の太さ:テキストテキスト

400が標準の太さとなります。400より値が小さければ細くなり、大きければ太くなります。

キーワードで指定する場合

キーワードで指定するには、値にboldを入力します。

[CSSの記述例]
.futomoji {
font-weight:bold;
}
[表示サンプル]
boldの太さ:テキストテキスト

boldで指定したフォントは、700と同じ太さで表示されます。
なお、値にnomalと入力すると、標準サイズ(400と同じ)太さで表示されます。

文字に様々な線を引く

文字に下線や取り消し線などの線を引く場合は、text-decorationプロパティを使用します。

.sen {
text-decoration:線の種類の値;
}

選択できる値には以下の種類があります。

  • line-through:取り消し線
  • overline:上線
  • underline:下線
[表示サンプル]
取り消し線:テキストテキスト
上線:テキストテキスト
下線:テキストテキスト

なお、値にnoneを指定すると、通常表示へ戻ります。

覚えておきたいポイント

複数の組合せでアピール

特に強調したい文字がある場合、太字+カラーや太字+下線などにすると、目立って強くアピールすることができます。

リンク色の変更と装飾
« 前のページへ フォントの種類を変える

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。