W3.CSS フォント

❮ 前章へ 次章へ ❯

読み易い

W3.CSS ページは、軽い読書障害のある人々にさえ、読み易くなります。

HTML 見出し <h1> - <h6>

デフォルトで、w3.css の HTML 見出しのスタイルは次の通りです：

例

<h1>Heading 1 (36px)</h1>

<h2>Heading 2 (30px)</h2>

<h3>Heading 3 (24px)</h3>

<h4>Heading 4 (20px)</h4>

<h5>Heading 5 (18px)</h5>
<h6>Heading 6 (16px)</h6>
Try It Yourself ❯

フォントサイズ・クラス

見出しは、見出しのために使われなければなりません。

W3.CSS では、フォントサイズは、クラスによって設定することができます：

例

w3-tiny
w3-small
w3-medium (Default)
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
w3-jumbo
Try It Yourself ❯

Wide と Slim クラス

w3-wide クラスは、幅の広いテキストを指定するのに対し、 w3-slim は、幅の狭いテキストを指定します：

例

w3-wide class specifies a wider text.

w3-slim class specifies a slimmer text.

Try It Yourself ❯

標準の無効化

W3.CSS 標準を無効にすることは非常に簡単です。

少なくとも 3 つの簡単なオプションがあります：

  1. ページの <head> セクションで標準を上書きします
  2. W3.CSS の後に、自分の CSS ファイルを追加します
  3. ダウンロードして、W3.CSS ファイルの内容を変更します

<head> での上書き

h1{font-size:64px;}
h2{font-size:48px;}
h3{font-size:36px;}
h4{font-size:24px;}
h5{font-size:20px;}
h6{font-size:18px;}
Try It Yourself ❯

自分の CSS を追加

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="myStyle.css">

W3.CSS を変更

h1{font-size:36px} h2{font-size:30px} h3{font-size:24px} h4{font-size:20px} h5{font-size:18px} h6{font-size:16px}

W3.CSS 外部フォント

Making the web beautiful!

W3.CSS で、Web ページに新しいフォントを追加するのは非常に簡単です。

フォントクラスの使用

Making the Web!

web ページの head に (または、自身のスタイルシート内に)、font クラスを作成します：

例

.w3-myfont {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

web ページの body で、このクラス名を使用します：

例

<body>
  <p class="w3-myfont">Making the Web!</p>
</body>
Try It Yourself ❯

外部フォントの使用

web ページの head 内で、外部のフォントをインクルードし、フォントにクラスを指定します：

In the head of your web page, include an external font, and give the font a class:

例

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

<style>
.w3-tangerine {
  font-family: 'Tangerine', serif;
}
</style>

web ページの body で、クラス名を使用します：

例

<body>
  <p class="w3-tangerine">Making the Web!</p>
</body>
Try It Yourself ❯

その他の例

Making the Web!

例

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Try It Yourself ❯
Making the Web!

例

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=brick-sign">
Try It Yourself ❯
Making the Web!

例

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Try It Yourself ❯

フォントの効果は、Internet Explorer 9 以前のバージョンでは動作しません。

ページフォントの変更

w3.css をロードした後で、web ページの head（または、自身のスタイルシート）で、html と body のスタイルを変更します：

例

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
html, body {
  font-family: "Comic Sans MS", cursive, sans-serif;
}
</style>
Try It Yourself ❯

テキスト・シャドウ

w3-text-shadow は、すべての色で動作するように設計されています：

Text Shadow


Text Shadow


Text Shadow


Text Shadow

例

<div class="w3-container w3-light-grey">
  <h2 class="w3-text-shadow">Text Shadow</h2>
</div>
Try It Yourself ❯

テキストの不透明度

w3-opacity クラスは、すべての色で動作するように設計されています：

Text Opacity


Text Opacity


Text Opacity


Text Opacity


Text Opacity


Text Opacity

例

<div class="w3-container w3-deep-purple">
  <h2 class="w3-opacity">Text Opacity</h2>
</div>
Try It Yourself ❯

特殊効果

不透明度と太字の組合せ：

Text Opacity

色の組合せ：

Yellow + Shadow + Bold

影、太字、不透明度の組合せ：

Shadow + Opacity + Bold

色の組合せ：

Yellow + Shadow + Bold


❮ 前章へ 次章へ ❯