CSS実践(8) 「利用頻度の高いテキストスタイル設定」

15305 ワード
font-size CSS 初心者 text-decoration color CSS テキストリンク

1. はじめに

本記事では、CSSの
利用頻度の高いテキストスタイル設定」
について記載する。
なお、以下例題に対し、HTMLファイルは共通して以下を使用する。
【サンプル】

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初めてのCSS</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <h1>テキストのスタイル</h1>
    <p>
      残暑きびしい日々が続いておりますが、いかがお過ごしでしょうか。<br />体調に気を配り、お過ごしください。
    </p>
  </body>
</html>

【表示例】

2. color

・文字色を指定する際に使用する。 ・#000000などの記述やカラーネームで色指定する。

背景色を指定する際はbackground-colorなので、colorと混同しないこと。

【サンプル】

styles.css
h1 {
  color: blue;
}
p {
  color: #6495e6;
}

【表示例】

3. font-size

フォントのサイズを指定する際に使用する。

使用凡例

数値で指定 ・数値にpxやemやexなどの単位をつけて指定する。 ・pxとは1ピクセルを1とする単位で、実際に表示されるサイズは72dpiや96dpiといったモニタの解像度により変化する。 ・emとはフォントの高さを1とする単位。 ・exとは小文字の｢x｣の高さを1とする単位。 ・数値には負の値は指定できません。 ％で指定 ％値で指定する。 キーワードで指定 ・xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、mediumが標準サイズ。 ・1段階上がると1.2倍のサイズになる。 ・smaller、largerを指定すると大きさが1段階上下する。

【サンプル】

styles.css
h1 {
  font-size: 64px;
}
p {
  font-size: 20px;
}

【表示例】
<サイズ変更前>

<サイズ変更後>

4. font-weight

フォントの太さを指定する際に使用する。

使用凡例

数値で指定 ・100、200、300、400、500、600、700、800、900でフォントの太さを指定する。 ・太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがある。 ・標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなる。 キーワードで指定 normal …… 標準の太さ。（数値で400を指定した場合と同じ） bold …… 一般的な太字の太さ。（数値で700を指定した場合と同じ） lighter …… 相対的に一段階細くする。 bolder …… 相対的に一段階太くする。

【サンプル】

styles.css
p {
  font-weight: bold;
}

【表示例】
<変更前>

<変更後>

5. text-align

ブロックコンテナ内の行の揃え位置・均等割付を指定する際に使用する。
【サンプル】

styles.css
h1 {
  text-align: right;
}
p {
  text-align: left;
}

【表示例】
<変更前>

<変更後>

中央揃えにしたい際は、text-align: center;とする。

6. text-decoration

テキスト傍線のつけ方・色・スタイルをまとめて指定する際に使用する。

使用凡例

text-decoration-line

テキストに傍線をつける際に使用する。

none 何もしない。テキストへの傍線について生成も禁止もしない（初期値） underline 行に下線を引く。 overline 行に上線を引く。 line-through 行の中央を通る線を引く。 blink テキストが点滅する。

text-decoration-lineのサンプル

※noneは初期値なので省略。また、Chromeではblinkはサポートされていないようなので未記載
【underline】

styles.css
h1 {
  text-decoration-line: underline;
}

【表示例】

【overline】

styles.css
h1 {
  text-decoration-line: overline;
}

【表示例】

【line-through】

styles.css
h1 {
  text-decoration-line: line-through;
}

【表示例】

text-decoration-style

text-decoration-lineプロパティでテキストにつけた傍線のスタイルを指定する際に使用する。

solid:実線（初期値） double:二重線 dotted:点線 dashed:破線 wavy:波線

text-decoration-lineのサンプル

※今回は”text-decoration-lineプロパティ”はunderlineで記載
【solid】

styles.css
h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

【表示例】

【double】

styles.css
h1 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

【表示例】

【dotted】

styles.css
h1 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

【表示例】

【dashed】

styles.css
h1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

【表示例】

【wavy】

styles.css
h1 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

【表示例】

text-decoration-color

text-decoration-lineプロパティでテキストにつけた傍線の色を指定する際に使用する。

#000000（完全な黒）～#ffffff（完全な白）、 カラーネーム、 RGB などで色を指定。

【カラーネーム】

styles.css
h1 {
  text-decoration-line: underline;
  text-decoration-color: red;
}

【表示例】

【RGB】

styles.css
h1 {
  text-decoration-line: underline;
  text-decoration-color: #649564;
}

【表示例】

7. おわりに

本項を以て、HTML・CSSの基本的な概要を完了とする。
これまで記載したことを基に、実際にホームページのトップを作成する。