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

フォントの設定

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

font-family : フォント名

値（フォント名）は複数指定することができます。コンマで区切って並べます。

日本語フォント名や半角スペースを含むフォント名は、クォーテーションで囲みます。

値として、serif（明朝系），sans-serif（ゴシック系），monospace（等幅フォント）などを指定することもできます。

（例）

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

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

文字色の設定

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

color : カラー名 or RGB値

カラー名は以下のリンクを参照してください。

RGB値は、#RRGGBB，rgb(○,○,○)といった形式で記述します。

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

📖 カラーネーム一覧

（サンプル）

<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>