C-4. スタイルを設定しよう

2021.12.17

テキストスタイルの設定を確認してみよう

テキストのスタイルを変える代表的な設定を記述します。以下の内容を理解しておきましょう。

フォントサイズの設定

1
{ font-size: 値px }

px：縦のピクセルの大きさで指定

em：現在のフォントサイズに対する倍率

太字の設定

1
{font-weight: bold}

文字の太字は、font-weightプロパティでboldに指定する

行間を変える

1
{ line-height: 値 }

値を指定することで、文字の行間を設定できます。

文字の左寄せ、右寄せ、中央揃え

1
2
3
4
{text-align: left;}
{text-align: center;}
{text-align: right;}
{text-align: justify;}

テキストの水平方向への配置を指定します。

文字の装飾

1
2
3
4
5
{text-decoration: none;}
{text-decoration: underline;}
{text-decoration: overline;}
{text-decoration: line-through;}
{text-decoration: blink;}

テキストの装飾を指定することができます。

各機能を確認してみてください。

記述例（１）を参考に実際に記述してみてください。

XHTML
1
2
3
4
5
6
7
8
9
10
<p>初期設定のフォントサイズ</p>
<p class="set_px">20pxにした文字</p>
<p class="set_em">2.5emにした文字</p>
<h1>これはboldに設定した太字の例です</h1>
<h2>この値を変更するうと<br>
  行間が変更できます。</h2>
  <h3 class="aligin">text-alignには、left center right jusifyを選択します。<br>
    今際centerを選んでいます。</h3>
  
<p class="decoration">text-decorationの、取り消し線の例です。</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.set_px {
  font-size: 20px;
}
.set_em {
  font-size: 2.5em;
}
 
h1 {
  font-weight: bold;
}
 
h2 { line-height: 15px }
 
.aligin { text-align: center; }
 
.decoration{text-decoration: line-through;}

ブラウザでの表示結果

フォントの指定をしてみよう

CSSでは文字（フォント）の種類を、font-familyというプロパティにより決めることができます。

「font-family:」のあとに指定するフォントを記述するだけです。

1
2
p.self {font-family:serif; } //明朝体の「serif」
p.sample1 {font-family:"Meiryo"; }//「メイリオ」のフォント

閲覧者のPCに該当のフォントがインストールされている必要があります。また、WindowsとMacではインストールされているフォントが異なるため、もしも閲覧者側に該当のフォントがなかった場合のために、あらかじめ次に表示させる候補を用意することができます。

1
2
3
p.sample1 {font-family: "游ゴシック","arial unicode ms",sans-serif;}
// 「游ゴシック」がインストールされていないPCでは、2つ目の「arial unicode ms」
さらにインストールされていなければ、ゴシック体系のフォントで文字列が表示されます。

ウェブページ全体のフォントを指定する方法を理解しておこう。

bodyをセレクタにすることで、ページ全体を同じフォントにできます。

1
2
3
body {
font-family: 'Arial',YuGothic,'Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','メイリオ', Meiryo,'ＭＳ ゴシック',sans-serif;
}

Webサイトで、フォントを選んでみよう

Font-familyメーカー　のページでフォントを選ぶ参考にできます。

課題

記述例（１）にある内容を作成して、更に、ページ全体のフォント利用して、メイリオ、 sans-serif の順に優先したフォントでサイトを作成してください。

作成したファイル名をindex_2_14.htmlにして送ってください。

実行結果

ヒント

フォントの指定は、以下の文を使用します。

1
font-family:

課題・復習用検索キーワード

検索例
🔍CSSとフォント　
🔍CSS　フォントの種類
🔍CSS　行間