From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../building_blocks/a_cool_looking_box/index.html | 100 +++++++++ .../creating_fancy_letterheaded_paper/index.html | 108 ++++++++++ .../fundamental_css_comprehension/index.html | 133 ++++++++++++ files/ja/learn/css/howto/css_faq/index.html | 231 +++++++++++++++++++++ .../fundamental_css_comprehension/index.html | 133 ------------ .../styling_boxes/a_cool_looking_box/index.html | 100 --------- .../creating_fancy_letterheaded_paper/index.html | 108 ---------- .../ja/learn/css/styling_text/web_fonts/index.html | 219 +++++++++++++++++++ .../index.html" | 219 ------------------- 9 files changed, 791 insertions(+), 560 deletions(-) create mode 100644 files/ja/learn/css/building_blocks/a_cool_looking_box/index.html create mode 100644 files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html create mode 100644 files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ja/learn/css/howto/css_faq/index.html delete mode 100644 files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html delete mode 100644 files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html delete mode 100644 files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html create mode 100644 files/ja/learn/css/styling_text/web_fonts/index.html delete mode 100644 "files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" (limited to 'files/ja/learn/css') diff --git a/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html new file mode 100644 index 0000000000..32aa19ca2e --- /dev/null +++ b/files/ja/learn/css/building_blocks/a_cool_looking_box/index.html @@ -0,0 +1,100 @@ +--- +title: かっこいいボックス +slug: Learn/CSS/Styling_boxes/A_cool_looking_box +tags: + - Assessment + - Beginner + - CSS + - Learn + - backgrounds + - borders + - box + - box model + - effects +translation_of: Learn/CSS/Building_blocks/A_cool_looking_box +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
+ +

この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。

+ + + + + + + + + + + + +
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。
+ +

出発点

+ +

この評価を開始するには、次のことが必要です。

+ + + +
+

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

+
+ +

プロジェクトの概要

+ +

あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。

+ +

一般的なタスク

+ + + +

ボックスの装飾

+ +

提供された {{htmlelement("p")}} に次のように装飾を設定してください。

+ + + +

例

+ +

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

+ +

+ +

評価

+ +

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

+ +

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

+ +

 

+ +

このモジュール内の文書

+ + + +

 

diff --git a/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html new file mode 100644 index 0000000000..6d793d69ff --- /dev/null +++ b/files/ja/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.html @@ -0,0 +1,108 @@ +--- +title: 装飾的なレターヘッド付きの便箋の作成 +slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper +tags: + - Assessment + - Background + - Beginner + - Boxes + - CSS + - CodingScripting + - border + - box + - letter + - letterhead + - letterheaded + - paper +translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
+ +

好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。

+ + + + + + + + + + + + +
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。
+ +

出発点

+ +

この評価を開始するには、次のことが必要です。

+ + + +
+

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

+
+ +

プロジェクトの概要

+ +

レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。

+ +

メインの手紙

+ + + + + + + +

ヒントとコツ

+ + + +

例

+ +

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

+ +

+ +

評価

+ +

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

+ +

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..c8012c9a8a --- /dev/null +++ b/files/ja/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,133 @@ +--- +title: 基本的な CSS の理解 +slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Syntax + - コメント + - スタイル + - セレクタ + - ボックスモデル + - ルール +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。

+ + + + + + + + + + + + +
前提条件:この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。
目的:基本的な CSS 理論、構文、およびメカニズムの理解をテストする。
+ +

出発点

+ +

この評価を開始するには、次のことが必要です。

+ + + +
+

メモ: 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <img> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style> 要素に自由に配置してください。

+
+ +

プロジェクト概要

+ +

生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。

+ +

基本設定:

+ + + +

CSS リソースファイルで提供されているセレクタとルールセットに注意してください。

+ + + +

書く必要がある新しいルールセット：

+ + + +
+

メモ: 2番目のルールセットは <html> 要素に font-size: 10px; を設定することに注意してください。これは <html> のすべての子孫について、em はデフォルトの16 px ではなく10 px になることを意味します (これはもちろん、階層内で問題の子孫と <html> の間に別の font-size が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。

+
+ +

その他の考慮事項

+ + + +

ヒントとコツ

+ + + +

例

+ +

次のスクリーンショットは、完成したデザインの外観の例を示しています。

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

評価

+ +

組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

このモジュール

+ + diff --git a/files/ja/learn/css/howto/css_faq/index.html b/files/ja/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..4307266923 --- /dev/null +++ b/files/ja/learn/css/howto/css_faq/index.html @@ -0,0 +1,231 @@ +--- +title: CSS の一般的な質問 +slug: Web/CSS/Common_CSS_Questions +tags: + - CSS + - FAQ + - Web + - questions + - ガイド + - 例 +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

この記事には、 CSS に関するいくつかのよくある質問（FAQ）とその解答が見つかり、ウェブ開発者になるための道で役に立つでしょう。

+ +

なぜ CSS が妥当なのに正しくレンダリングされないのか？

+ +

ブラウザーは DOCTYPE 宣言を使用して、文書の表示ににウェブ標準とより互換性があるモードを使用するか、あるいは古いブラウザーのバグに互換性があるモードを使用するかを選択します。正しく新しい DOCTYPE 宣言を HTML の先頭で使用すると、ブラウザーの標準への準拠度が向上します。

+ +

現代のブラウザーは、2つの主要なレンダリングモードを備えています。

+ + + +

Gecko ベースのブラウザーには、いくつかの小さな調整のみを行う第3のモードでありますAlmost Standards Mode があります。

+ +

以下は Standards Mode または Almost Standards Mode になる DOCTYPE 宣言で、もっとも一般的に使用されるものの一覧です:

+ +
<!DOCTYPE html> /* これは HTML5 の doctype です。HTML5 パーサーを使用する新しいブラウザーでは、
+                   この doctype が推奨されます */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

可能な限り、 HTML5 の doctype を使用するべきです。

+ +

なぜ CSS が妥当なのにまったくレンダリングされないのか?

+ +

以下のような可能性があります。

+ + + +

id と class の違いは何か?

+ +

HTML の要素は、 id 属性と class 属性の片方または両方を持つことができます。 id 属性は要素に適用する名前を割り当てます。妥当なマークアップでは、ある名前を持つ要素はひとつだけです。 class 属性は要素にクラス名を割り当てます。一つのクラス名を、ページ内の多数の要素で使用できます。 CSS は特定の id または class 名に対してスタイルを設定できます。

+ + + +

一般的にはできるだけ class を使用し、 id は特定の用途で絶対的に必要な場合（ラベルとフォーム要素を接続したり、スタイルをつける要素が意味的に独自の場合など）に限り使用することが推奨されます。

+ + + +
+

注: 詳しくは Selectors もご覧ください。

+
+ +

プロパティの既定値に戻すにはどうすればよいのか?

+ +

当初 CSS には "default" キーワードがなく、プロパティの既定値を戻す唯一の方法は、そのプロパティを明示的に宣言し直すことでした。

+ +
/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: black; }
+ +

これは CSS 2 で変わり、initial キーワードが CSS プロパティの正当な値になりました。これはプロパティを既定値にリセットします。この既定値は、当該プロパティの CSS 仕様で定義されています。

+ +
/* 見出しの既定の色は黒 */
+h1 { color: red; }
+h1 { color: initial; }
+ +

スタイルを他のスタイルから派生させるにはどうすればよいか?

+ +

CSS では、あるスタイルが他の表現で定義されることを許可していません (Working Group のスタンスに関する、Eric Meyer 氏のコメントをご覧ください)。ただし、ひとつの要素に複数のクラスを割り当てることで、同様の効果を得られます。また、複数の場所で再利用できるスタイル情報を1ヶ所で定義する方法として、 CSS 変数 が導入されました。

+ +

ひとつの要素に複数のクラスを割り当てる方法は?

+ +

HTML の要素は class 属性に空白区切りでクラスを並べることで、複数のクラスを割り当てることができます。

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

同じプロパティが双方の規則内で宣言されている場合は、その競合がまずは詳細度によって、そして CSS 宣言の順序に従って解決されます。class 属性内のクラスの順序は関係がありません。

+ +

なぜ私のスタイル規則は正しく動作しないのか?

+ +

構文が正しいスタイル規則が、ある状況下で適用されないことがあります。この種類の問題をデバッグするために DOM Inspector の CSS Style Rules ビューを活用できますが、スタイルが無視される事例でもっとも頻発するものは以下のとおりです。

+ +

HTML 要素の階層

+ +

CSS スタイルを HTML 要素に適用する方法は、要素の階層にも依存します。CSS 規則の詳細度や優先度にかかわらず、子孫に適用された規則は親のスタイルをオーバーライドすることを覚えておくことが重要です。

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- ニュース項目は黒色ですが、社名は赤色かつ太字です -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

複雑な HTML 階層で規則が無視されているように見える場合は、異なるスタイルが設定された別の要素の内部にその要素がないかを確認してください。

+ +

明示的に再定義されたスタイル規則

+ +

CSS スタイルシートでは、順序こそが重要です。ある規則を定義した後に同じ規則を再定義した場合は、最後の定義が使用されます。

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  他の規則             */
+/*  他の規則             */
+/*  他の規則             */
+.stockSymbol { font-weight: normal; }
+
+<!-- ほとんどのテキストは太字ですが、"GE" は赤色で太字ではありません -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

このような誤りを避けるには、あるセレクタに対する規則は 1 回だけ定義するようにして、セレクタに所属するすべての規則をグループ化してください。

+ +

ショートハンドプロパティの使用

+ +

ショートハンドプロパティを使用したスタイル規則の定義は、構文がとてもコンパクトになることからよいことです。一部の属性だけを持つショートハンドプロパティの使用は可能かつ正当ですが、宣言していない属性は自動的に既定値へリセットされることを覚えておくべきです。すなわち、単独の属性に対する以前の規則は暗黙的にオーバーライドされます。

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

前の例では別の要素に属する規則で問題が発生していますが、同一の要素でも問題が起こりえます。これは、規則の順序こそが重要であるためです。

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now set to normal */
+}
+
+ +

* セレクタの使用

+ +

ワイルドカードセレクタ * はすべての要素を参照するものであり、特に注意して使用しなければなりません。

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

この例では、body * セレクタで body 要素内の全要素に対して規則を適用しており、それは .stockUp クラスも含むすべての階層レベルです。よって .corpName クラスに適用した font-weight: bold; は、body 内の全要素に適用した font-weight: normal; にオーバーライドされます。

+ +

特にセレクタの最初の要素として使用しない場合に、* セレクタは遅いセレクタであるため使用は最小限にするべきです。このような使い方はできるだけ避けるべきです。

+ +

CSS の詳細度

+ +

ある要素に複数の規則を適用すると、スタイルの詳細さに従って規則が選ばれます。インラインスタイル（HTML の style 属性）が最上位の詳細さで他のあらゆるセレクタを上書きし、次に ID セレクタ、それからクラスセレクタ、要素名セレクタの順となります。よって、以下の {{htmlelement("div")}} の文字色は赤になります。

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

セレクタが複数の範囲を持つ場合、規則はより複雑になります。セレクタの詳細度がどのように算出されるかについて、詳しくは CSS 2.1 Specification chapter 6.4.3 でご覧いただけます。

+ +

-moz-*、-ms-*、-webkit-*、-o-*、-khtml-* プロパティは何をするものか?

+ +

これらのプロパティは接頭辞付きプロパティと呼ばれ、CSS 標準を拡張したものです。これらは正規の名前空間を乱すことなく実験的で非標準の機能を使用するために用いられ、標準仕様が拡張したときに機能の不整合が発生することを防ぎます。

+ +

本番 Web サイトでこのようなプロパティを使用することはお勧めできません。これらのプロパティは既に Web との互換性に大きな問題を引き起こしています。たとえば、接頭辞のないバージョンがすべてのブラウザでサポートされている場合に、接頭辞のないバージョンがプロパティの -webkit- 接頭辞バージョンのみを使用するということは、Webkit ベースでないブラウザではそのプロパティに依存する機能が完全に不要になるということです。この問題はひどく悪くなったため、Compatibility Living Standard で指定されているように、Webの互換性を向上させるために他のブラウザが -webkit- プレフィックスエイリアスを実装し始めました。

+ +

実際のところ、ほとんどのブラウザは実験的機能を実装するときに CSS プレフィックスを使用せず、代わりに Nightly ブラウザバージョンなどでのみそれらの機能を実装しています。

+ +

作業でプレフィックスを使用する必要がある場合は、最初にプレフィックス付きのバージョンを使用するようにコードを書くことをお勧めします。ただし、サポートされている場合はプレフィックス付きのバージョンを自動的に上書きできます。 例えば：

+ +
-ms-transform: rotate(90deg);
+-webkit-transform: rotate(90deg);
+transform: rotate(90deg);
+ +
+

メモ: 接頭辞付きプロパティの処理の詳細については、クロスブラウザテストモジュールの一般的な HTML および CSS の問題の処理 - CSS プレフィックスの処理を参照してください。

+
+ +
+

メモ: Mozilla をプレフィックスとする CSS プロパティの詳細については、CSS の Mozilla 拡張ページを参照してください。

+
+ +

z-index は位置指定へどのように関係するのか?

+ +

z-index プロパティは、要素を積み重ねる順序を指定します。

+ +

z-index/stack の順序が高い要素は、常に z-index/stack の順序が低い要素の前に表示されます。z-index は指定された位置 (position:absolute、position:relative、または  position:fixed) を持つ要素に対してのみ機能します。

+ +
+

メモ: 詳細については、ポジショニング学習の記事、特に z-index の紹介セクションを参照してください。

+
diff --git a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html b/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html deleted file mode 100644 index c8012c9a8a..0000000000 --- a/files/ja/learn/css/introduction_to_css/fundamental_css_comprehension/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: 基本的な CSS の理解 -slug: Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension -tags: - - Assessment - - Beginner - - CSS - - CodingScripting - - Syntax - - コメント - - スタイル - - セレクタ - - ボックスモデル - - ルール -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

このモジュールで多くをカバーしてきました、最後まで来て気分が良いでしょう！ 次に進む前の最後のステップは、モジュールの評価を試みることです。これには、最終的なデザイン (名刺/ゲーマーカード/ソーシャルメディアプロファイル) を作成するために完了しなければならないいくつかの関連演習が含まれます。

- - - - - - - - - - - - -
前提条件:この評価を実施する前に、すでにこのモジュールのすべての記事を通して作業しているはずです。
目的:基本的な CSS 理論、構文、およびメカニズムの理解をテストする。
- -

出発点

- -

この評価を開始するには、次のことが必要です。

- - - -
-

メモ: 代わりとして、JSBin や Thimble のようなサイトを使って評価することもできます。HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、この URL を使用して <img> 要素を画像ファイルに向けることができます。使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style> 要素に自由に配置してください。

-
- -

プロジェクト概要

- -

生の HTML と画像が提供されているので、これにスタイルを設定するのに必要な CSS を気の利いた小さなオンライン名刺に書く必要があります。これは、おそらくゲーマーカードやソーシャルメディアのプロファイルを兼ねるでしょう。次のセクションではする必要があることについて説明します。

- -

基本設定:

- - - -

CSS リソースファイルで提供されているセレクタとルールセットに注意してください。

- - - -

書く必要がある新しいルールセット：

- - - -
-

メモ: 2番目のルールセットは <html> 要素に font-size: 10px; を設定することに注意してください。これは <html> のすべての子孫について、em はデフォルトの16 px ではなく10 px になることを意味します (これはもちろん、階層内で問題の子孫と <html> の間に別の font-size が設定されている先祖がいない場合に限ります。これは必要な値に影響を与える可能性がありますが、この単純な例では問題にはなりません)。

-
- -

その他の考慮事項

- - - -

ヒントとコツ

- - - -

例

- -

次のスクリーンショットは、完成したデザインの外観の例を示しています。

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

評価

- -

組織的な研修の一部としてこの評価に従っているなら、あなたは採点のためにあなたの教師/メンターに作業結果を提出できるはずです。もし自己学習しているのであれば、この練習問題についてのディスカッションスレッド、または Mozilla IRC の #mdn IRC チャンネルで尋ねることで、非常に簡単に採点ガイドを入手できます。最初にエクササイズをしてみてください — 不正をすることによって得られるものは何もありません！

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

- -

このモジュール

- - diff --git a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html b/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html deleted file mode 100644 index 32aa19ca2e..0000000000 --- a/files/ja/learn/css/styling_boxes/a_cool_looking_box/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: かっこいいボックス -slug: Learn/CSS/Styling_boxes/A_cool_looking_box -tags: - - Assessment - - Beginner - - CSS - - Learn - - backgrounds - - borders - - box - - box model - - effects -translation_of: Learn/CSS/Building_blocks/A_cool_looking_box ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}
- -

この評価では、人目を引くボックスを作成しようとすることで、かっこいいボックスを作成する方法をさらに習得できます。

- - - - - - - - - - - - -
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルと、境界線や背景などの他のボックス関連機能の理解をテストすること。
- -

出発点

- -

この評価を開始するには、次のことが必要です。

- - - -
-

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

-
- -

プロジェクトの概要

- -

あなたの仕事は、かっこよくて装飾的な箱を作り、私たちが CSS で持つことができる楽しみを探ることです。

- -

一般的なタスク

- - - -

ボックスの装飾

- -

提供された {{htmlelement("p")}} に次のように装飾を設定してください。

- - - -

例

- -

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

- -

- -

評価

- -

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

- -

{{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}

- -

 

- -

このモジュール内の文書

- - - -

 

diff --git a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html b/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html deleted file mode 100644 index 6d793d69ff..0000000000 --- a/files/ja/learn/css/styling_boxes/creating_fancy_letterheaded_paper/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: 装飾的なレターヘッド付きの便箋の作成 -slug: Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper -tags: - - Assessment - - Background - - Beginner - - Boxes - - CSS - - CodingScripting - - border - - box - - letter - - letterhead - - letterheaded - - paper -translation_of: Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}
- -

好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。

- - - - - - - - - - - - -
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストします。
- -

出発点

- -

この評価を開始するには、次のことが必要です。

- - - -
-

注: あるいは、JSBin や Thimble などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力できます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <style>  要素に自由に配置してください。

-
- -

プロジェクトの概要

- -

レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。

- -

メインの手紙

- - - - - - - -

ヒントとコツ

- - - -

例

- -

次のスクリーンショットは、完成したデザインがどのように見えるかの例を示しています。

- -

- -

評価

- -

組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、この演習についてのディスカッションスレッドや Mozilla IRC の #mdn IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！

- -

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}}

- -

このモジュール内の文書

- - diff --git a/files/ja/learn/css/styling_text/web_fonts/index.html b/files/ja/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..d96b610029 --- /dev/null +++ b/files/ja/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,219 @@ +--- +title: ウェブフォント +slug: Learn/CSS/Styling_text/ウェブフォント +tags: + - '@font-face' + - Article + - Beginner + - CSS + - CSS Fonts + - Fonts + - Guide + - Learn + - Web Development + - Web Fonts Article + - Web fonts documentation + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
+ +

このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。

+ + + + + + + + + + + + +
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。
学習目標:サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。
+ +

フォントファミリーの復習

+ +

基本的なテキストとフォントの装飾で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。

+ +
p {
+  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+}
+ +

このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆるウェブセーフフォントです。 フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。（訳注：日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）

+ +

ウェブフォント

+ +

しかし、IE バージョン 6 でも非常にうまく動作する代替手段があります。 ウェブフォントは、ウェブサイトにアクセスした時に一緒にダウンロードするフォントファイルを指定できる CSS の機能です。 つまり、ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。 すばらしい！ 必要な構文は次のようになります。

+ +

まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。

+ +
@font-face {
+  font-family: "myFont";
+  src: url("myFont.woff");
+}
+ +

これより下では、@font-face の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。

+ +
html {
+  font-family: "myFont", "Bitstream Vera Serif", serif;
+}
+ +

構文はこれより少し複雑になります。 以下で詳しく説明します。

+ +

ウェブフォントに関して留意すべき重要な点が2つあります。

+ +
    +
  1. ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。 例えば、最近のほとんどのブラウザーは最も効率的な形式である WOFF / WOFF2（Web Open Font Format バージョン 1 および 2）をサポートしていますが、古いバージョンの IE は EOT（Embedded Open Type）フォントしかサポートしていないし、古いバージョンの iPhone や Android のブラウザーをサポートするには、SVG 版のフォントを含める必要があるかもしれません。 必要なコードの生成方法を下の方で示します。
    2. +
  2. フォントは一般に自由に使用できません。 それらの代金を払わなければなりません、そして/またはコードの中で（またはサイトで）フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。 フォントを盗み、適切なクレジットを与えずに使用するべきではありません。
    3. +
+ +
+

注: テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer でサポートされています！

+
+ +

能動的学習: ウェブフォントの例

+ +

この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。

+ +

コードを追加するための出発点として、web-font-start.html ファイルと web-font-start.css ファイルを使用する必要があります（ライブの例を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。 web-font-start.css ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。

+ +

フォントを探す

+ +

この例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に3種類あります。

+ + + +

いくつかのフォントを見つけましょう！ Font Squirrel に行き、2つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリ内にファイルを保存します。 TTF（True Type Fonts）か OTF（Open Type Fonts）かは関係ありません。

+ +

いずれの場合も、フォントパッケージを解凍します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1つのフォントファイルを使用することを考慮してください。

+ +
+

注: 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）

+
+ +

必要なコードの生成

+ +

今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。

+ +
    +
  1. 商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。
    2. +
  2. Font Squirrel の Webfont Generator（ウェブフォントジェネレータ）に行きます。
    3. +
  3. Upload Fonts（フォントのアップロード）ボタンを使って2つのフォントファイルをアップロードします。
    4. +
  4. "Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。
    5. +
  5. Download your kit（キットをダウンロードする）をクリックします。
    6. +
+ +

ジェネレータの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリに保存してください。

+ +

デモでのコードの実装

+ +

この時点で、生成したばかりのウェブフォントのキットを解凍します。 解凍したディレクトリ内には、3つの便利なアイテムがあります。

+ + + +

デモにこれらのフォントを実装するには、次の手順に従います。

+ +
    +
  1. 解凍したディレクトリの名前を fonts のように簡単でシンプルなものに変更します。
    2. +
  2. stylesheet.css ファイルを開き、その中に含まれている両方の @font-face ブロックを web-font-start.css ファイルにコピーします — フォントはサイトで使用する前にインポートする必要があるため、CSS のどれよりも前の一番上に配置する必要があります。
    3. +
  3. 各 url() 関数は CSS にインポートしたいフォントファイルを指しています — ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に fonts/ を追加します（必要に応じて調整します）。
    4. +
  4. これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば、 + 
    font-family: 'zantrokeregular', serif;
    +
    5. +
+ +

いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルック・アンド・フィールを調整する必要があります。

+ +

+ +
+

注: これがうまくいかない場合は、あなたのバージョンと完成したファイルとを比較してみてください — web-font-finished.html と web-font-finished.css を見てください（完成した例をライブで実行してください）。

+
+ +

オンラインフォントサービスの使用

+ +

オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、@font-face コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。例としては、Adobe Fonts や Cloud.typography などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである Google Fonts は例外です。

+ +

これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として web-font-start.html と web-font-start.css のコピーを使用してください。

+ +
    +
  1. Google Fonts に行きます。
    2. +
  2. 左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。 （訳注：Languages（言語）に Japanese（日本語）を選んでも、中国語のフォントも表示されます。 フォントによっては、存在しない文字があるようなので注意しましょう。 日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。）
    3. +
  3. フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。
    4. +
  4. フォントファミリーを選択したら、ページ下部の [選択数] Families Selected バーを押します。
    5. +
  5. 表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。 （訳注：{{cssxref("@import")}} を選択すれば、CSS ファイルに貼り付けることもできます。）
    6. +
  6. 次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。
    7. +
+ +
+

注: あなたの作品を私たちの作品と照合する必要がある場合は、完成版を google-font.html および google-font.css で見ることができます（それをライブで見る）。

+
+ +

@font-face の詳細

+ +

Font Squirrel によって生成された @font-face 構文を調べてみましょう。 これは、ブロックの1つがどのように見えるかです。

+ +
@font-face {
+  font-family: 'ciclefina';
+  src: url('fonts/cicle_fina-webfont.eot');
+  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
+         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
+         url('fonts/cicle_fina-webfont.woff') format('woff'),
+         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
+         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+ +

@font-face が普及し始めた頃の Paul Irish による投稿（Bulletproof @font-face Syntax）の後、これは "bulletproof  @font-face 構文" と呼ばれています。 それを見て、それが何をするのか見てみましょう。

+ + + +
+

注: ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、unicode-range の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による unicode-range を使ったカスタムフォントスタックの作成（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。

+
+ +

可変フォント

+ +

これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。

+ +

ブラウザでは、可変フォントと呼ばれる新しいフォントテクノロジーがあります。これらは、幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるフォントです。 初心者コースでは多少上級ですが、調べてみたい場合は、Variable フォントガイドをお読みください。

+ +

あなたのスキルをテストしてください！

+ +

あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？あなたがこの情報を保持していることを確認するための評価をモジュールの最後に見つけることができます。コミュニティスクールのホームページの組版を参照してください。

+ +

まとめ

+ +

テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

+ + + +

このモジュール内の文書

+ + diff --git "a/files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" "b/files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" deleted file mode 100644 index d96b610029..0000000000 --- "a/files/ja/learn/css/styling_text/\343\202\246\343\202\247\343\203\226\343\203\225\343\202\251\343\203\263\343\203\210/index.html" +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: ウェブフォント -slug: Learn/CSS/Styling_text/ウェブフォント -tags: - - '@font-face' - - Article - - Beginner - - CSS - - CSS Fonts - - Fonts - - Guide - - Learn - - Web Development - - Web Fonts Article - - Web fonts documentation - - font-family - - web fonts -translation_of: Learn/CSS/Styling_text/Web_fonts ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
- -

このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。

- - - - - - - - - - - - -
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。
学習目標:サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。
- -

フォントファミリーの復習

- -

基本的なテキストとフォントの装飾で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。

- -
p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}
- -

このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆるウェブセーフフォントです。 フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。（訳注：日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）

- -

ウェブフォント

- -

しかし、IE バージョン 6 でも非常にうまく動作する代替手段があります。 ウェブフォントは、ウェブサイトにアクセスした時に一緒にダウンロードするフォントファイルを指定できる CSS の機能です。 つまり、ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。 すばらしい！ 必要な構文は次のようになります。

- -

まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。

- -
@font-face {
-  font-family: "myFont";
-  src: url("myFont.woff");
-}
- -

これより下では、@font-face の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。

- -
html {
-  font-family: "myFont", "Bitstream Vera Serif", serif;
-}
- -

構文はこれより少し複雑になります。 以下で詳しく説明します。

- -

ウェブフォントに関して留意すべき重要な点が2つあります。

- -
    -
  1. ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。 例えば、最近のほとんどのブラウザーは最も効率的な形式である WOFF / WOFF2（Web Open Font Format バージョン 1 および 2）をサポートしていますが、古いバージョンの IE は EOT（Embedded Open Type）フォントしかサポートしていないし、古いバージョンの iPhone や Android のブラウザーをサポートするには、SVG 版のフォントを含める必要があるかもしれません。 必要なコードの生成方法を下の方で示します。
    2. -
  2. フォントは一般に自由に使用できません。 それらの代金を払わなければなりません、そして/またはコードの中で（またはサイトで）フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。 フォントを盗み、適切なクレジットを与えずに使用するべきではありません。
    3. -
- -
-

注: テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer でサポートされています！

-
- -

能動的学習: ウェブフォントの例

- -

この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。

- -

コードを追加するための出発点として、web-font-start.html ファイルと web-font-start.css ファイルを使用する必要があります（ライブの例を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。 web-font-start.css ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。

- -

フォントを探す

- -

この例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に3種類あります。

- - - -

いくつかのフォントを見つけましょう！ Font Squirrel に行き、2つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリ内にファイルを保存します。 TTF（True Type Fonts）か OTF（Open Type Fonts）かは関係ありません。

- -

いずれの場合も、フォントパッケージを解凍します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1つのフォントファイルを使用することを考慮してください。

- -
-

注: 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）

-
- -

必要なコードの生成

- -

今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。

- -
    -
  1. 商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。
    2. -
  2. Font Squirrel の Webfont Generator（ウェブフォントジェネレータ）に行きます。
    3. -
  3. Upload Fonts（フォントのアップロード）ボタンを使って2つのフォントファイルをアップロードします。
    4. -
  4. "Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。
    5. -
  5. Download your kit（キットをダウンロードする）をクリックします。
    6. -
- -

ジェネレータの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリに保存してください。

- -

デモでのコードの実装

- -

この時点で、生成したばかりのウェブフォントのキットを解凍します。 解凍したディレクトリ内には、3つの便利なアイテムがあります。

- - - -

デモにこれらのフォントを実装するには、次の手順に従います。

- -
    -
  1. 解凍したディレクトリの名前を fonts のように簡単でシンプルなものに変更します。
    2. -
  2. stylesheet.css ファイルを開き、その中に含まれている両方の @font-face ブロックを web-font-start.css ファイルにコピーします — フォントはサイトで使用する前にインポートする必要があるため、CSS のどれよりも前の一番上に配置する必要があります。
    3. -
  3. 各 url() 関数は CSS にインポートしたいフォントファイルを指しています — ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に fonts/ を追加します（必要に応じて調整します）。
    4. -
  4. これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば、 - 
    font-family: 'zantrokeregular', serif;
    -
    5. -
- -

いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルック・アンド・フィールを調整する必要があります。

- -

- -
-

注: これがうまくいかない場合は、あなたのバージョンと完成したファイルとを比較してみてください — web-font-finished.html と web-font-finished.css を見てください（完成した例をライブで実行してください）。

-
- -

オンラインフォントサービスの使用

- -

オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、@font-face コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。例としては、Adobe Fonts や Cloud.typography などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである Google Fonts は例外です。

- -

これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として web-font-start.html と web-font-start.css のコピーを使用してください。

- -
    -
  1. Google Fonts に行きます。
    2. -
  2. 左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。 （訳注：Languages（言語）に Japanese（日本語）を選んでも、中国語のフォントも表示されます。 フォントによっては、存在しない文字があるようなので注意しましょう。 日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。）
    3. -
  3. フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。
    4. -
  4. フォントファミリーを選択したら、ページ下部の [選択数] Families Selected バーを押します。
    5. -
  5. 表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。 （訳注：{{cssxref("@import")}} を選択すれば、CSS ファイルに貼り付けることもできます。）
    6. -
  6. 次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。
    7. -
- -
-

注: あなたの作品を私たちの作品と照合する必要がある場合は、完成版を google-font.html および google-font.css で見ることができます（それをライブで見る）。

-
- -

@font-face の詳細

- -

Font Squirrel によって生成された @font-face 構文を調べてみましょう。 これは、ブロックの1つがどのように見えるかです。

- -
@font-face {
-  font-family: 'ciclefina';
-  src: url('fonts/cicle_fina-webfont.eot');
-  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
-         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
-         url('fonts/cicle_fina-webfont.woff') format('woff'),
-         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
-         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
- -

@font-face が普及し始めた頃の Paul Irish による投稿（Bulletproof @font-face Syntax）の後、これは "bulletproof  @font-face 構文" と呼ばれています。 それを見て、それが何をするのか見てみましょう。

- - - -
-

注: ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、unicode-range の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による unicode-range を使ったカスタムフォントスタックの作成（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。

-
- -

可変フォント

- -

これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。

- -

ブラウザでは、可変フォントと呼ばれる新しいフォントテクノロジーがあります。これらは、幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるフォントです。 初心者コースでは多少上級ですが、調べてみたい場合は、Variable フォントガイドをお読みください。

- -

あなたのスキルをテストしてください！

- -

あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？あなたがこの情報を保持していることを確認するための評価をモジュールの最後に見つけることができます。コミュニティスクールのホームページの組版を参照してください。

- -

まとめ

- -

テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。

- -

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}

- - - -

このモジュール内の文書

- - -- cgit v1.2.3-54-g00ecf