ホームページ作成講座[CSS編]文字スタイルの設定

作成日:2019.08.24
  1. HOME
  2. ホームページ作成講座
  3. 文字スタイルの設定

このページでは主に文字装飾に関連したスタイル設定について見ていきます。

  1. フォントの設定
  2. 文字色の設定
  3. 文字サイズの設定
  4. 太字の設定
  5. 斜体の設定
  6. 下線・打消し線の設定
  7. 影付きの設定
  8. リンクのスタイル

フォントの設定

フォントを設定するには、プロパティと値を以下のように記述します。

font-family : フォント名
値(フォント名)は複数指定することができます。コンマで区切って並べます。
日本語フォント名や半角スペースを含むフォント名は、クォーテーションで囲みます。
値として、serif(明朝系),sans-serif(ゴシック系),monospace(等幅フォント)などを指定することもできます。

(例)

body{
  font-family : "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif ;
}

📖 font-familyで指定できるフォント名一覧

文字色の設定

文字色を指定するには、プロパティと値を以下のように記述します。

color : カラー名 or RGB値
カラー名は以下のリンクを参照してください。
RGB値は、#RRGGBB,rgb(○,○,○)といった形式で記述します。

代表的な色とカラーネーム,RGB値を載せておきます。

color名
RGB値
color名
RGB値
black
#000000
white
#FFFFFF
red
#FF0000
lime
#00FF00
blue
#0000FF
yellow
#FFFF00
fuchsia
#FF00FF
aqua
#00FFFF
maroon
#800000
green
#008000
navy
#000080
olive
#808000
purple
#800080
teal
#008080
gray
#808080
silver
#C0C0C0

📖 カラーネーム一覧

(サンプル)

<style>
strong{ 
  color : red;  //文字色を赤にする
}
em{
  color : #FF00FF;  //文字色をピンクにする
}
</style>

<p>strongタグは大抵のブラウザでは<strong>太字</strong>で表示されます。
一方emタグは<em>斜体</em>で表示されます。</p>
<表示結果>

文字サイズの設定

文字サイズを指定するには、プロパティと値を以下のように記述します。

font-size : 大きさ
値の部分には絶対単位(px,pt)や相対単位(%,em)を使用できます。
他にも、以下のリンクにあるような値を用いることができます。

📖 フォントサイズの値一覧

(サンプル)

<style>
body{
  font-size : 16px;  //ページ全体の文字サイズを16pxにする
}
h1{
  font-size : 180%;  //ページ文字サイズの180%の大きさにする
}
</style>

<h1>文字サイズの指定サンプル</h1>
<p>文字サイズを指定するプロパティはfont-sizeです。
値にはpxやptのような絶対単位、%のような相対単位、
他にもsmallやlargeといった値を使用できます。</p>
<表示結果>

太字の設定

文字の太さを指定するには、プロパティと値を以下のように記述します。

font-weight : bold/normal
boldを指定すると、太字になります。
normalを指定すれば、通常の太さになります。

(サンプル)

<style>
li{
  font-weight : bold;  //太字にする
}
li.nml{
  font-weight:normal;  //通常の太さにする
}
</style>

<ul>
<li>boldを指定すると太字になります。</li>
<li class="nml">normalを指定すると、通常の太さになります。</li>
</ul>
<表示結果>

斜体の設定

文字の傾きを指定するには、プロパティと値を以下のように記述します。

font-style : italic/normal
italicを指定すると斜体になります。
normalを指定すると、傾いていない通常の書体になります。

(サンプル)

<style>
li{
  font-style : italic;  //斜体にする
}
li.nml{
  font-style:normal;  //通常の傾きにする
}
</style>

<ul>
<li>italicを指定すると斜体になります。</li>
<li class="nml">normalを指定すると、通常の傾きになります。</li>
</ul>
<表示結果>

下線・打消し線の設定

文字に下線や打消し線を指定するには、プロパティと値を以下のように記述します。

text-decoration : 値
値にunderlineを指定すると、下線が引かれます。
値にoverlineを指定すると、文字の上に線が引かれます。
値にline-throughを指定すると打消し線が引かれます。
値にnoneを指定すると、線は引かれません。

(サンプル)

<style>
li { text-decoration : underline; }  //下線を引く
.lt { text-decoration : line-through; }  //打消し線を引く
.ov { text-decoration : overline; }  //文字の上に線を引く
.nn { text-decoration : none; }  //線を消す
</style>

<ul>
<li>underlineを指定すると、下線が引かれます。</li>
<li class="lt">line-throughを指定すると、打消し線が引かれます。</li>
<li class="ov">overlineを指定すると、文字の上に線が引かれます。</li>
<li class="nn">noneを指定すると、線は引かれません。</li>
</ul>
<表示結果>

影付きの設定

文字に影を付けるには、プロパティと値を以下のように記述します。

text-shadow : h v b c
hは影の横方向の長さ
vは影の縦方向の長さ
bは影のぼかしの長さ
cは影の
値にnoneを指定することで影を消すことができます。

(サンプル)

<style>
h1{
  text-shadow : 3px 2px 1px lime; //黄緑の影を付ける
  font-size:30px;  //文字サイズを30pxにする
}
</style>

<h1>影付きのサンプル</h1>
<p>このサンプルでは、h1タグに横3px、縦2px、ぼかし1px、色がlimeの影を付けています。</p>
<表示結果>

リンクのスタイル

リンクのスタイルは少し特殊な指定ができます。疑似クラスを付けて、未訪問・訪問済み・アクティブな時、カーソルが乗った時それぞれのスタイルを指定できます。

a:link { スタイル指定 }
未訪問のリンクのスタイルを指定します。
a:visited { スタイル指定 }
訪問済みのリンクのスタイルを指定します。
a:hover { スタイル指定 }
リンクにカーソルが乗った時のスタイルを指定します。
(aタグ以外でも使用することがあります)
a:active { スタイル指定 }
リンクをクリックした時のスタイルを指定します。

注意:記述は上記の順番にしなければ、うまく反映されません。

(サンプル)

<style>
a:link{ color : fuchsia; } //未訪問リンクをピンクに
a:visited{ color : maroon; } //訪問済みリンクを茶色に
a:hover{ color : blue; } //カーソルが乗った時の色を青に
a:active{ color : red; } //リンククリック時の色を赤に
</style>

<p><a href="https://pazru.net/" target="_top">HOMEへ</a></p>
<p>(ページ移動後はブラウザの戻るボタンでこのページに戻って来て下さい)</p>
<表示結果>
data-matched-content-rows-num="4,2" data-matched-content-columns-num="1,3" data-matched-content-ui-type="image_stacked,image_card_sidebyside">