From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../learn/css/styling_text/fundamentals/index.html | 748 +++++++++++++++++++++ files/ja/learn/css/styling_text/index.html | 55 ++ .../css/styling_text/styling_links/index.html | 453 +++++++++++++ .../css/styling_text/styling_lists/index.html | 398 +++++++++++ .../styling_text/typesetting_a_homepage/index.html | 126 ++++ .../index.html" | 219 ++++++ 6 files changed, 1999 insertions(+) create mode 100644 files/ja/learn/css/styling_text/fundamentals/index.html create mode 100644 files/ja/learn/css/styling_text/index.html create mode 100644 files/ja/learn/css/styling_text/styling_links/index.html create mode 100644 files/ja/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ja/learn/css/styling_text/typesetting_a_homepage/index.html create 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/styling_text') diff --git a/files/ja/learn/css/styling_text/fundamentals/index.html b/files/ja/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..163dd945ee --- /dev/null +++ b/files/ja/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,748 @@ +--- +title: 基本的なテキストとフォントの装飾 +slug: Learn/CSS/Styling_text/Fundamentals +tags: + - Article + - Beginner + - CSS + - Guide + - Style + - Text + - alignment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
+ +

この記事では、{{glossary("CSS")}} によるテキストの装飾の習得に向けて旅を始めましょう。 ここでは、フォントの太さ、ファミリーそしてスタイルの設定、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔などを含んだ、テキストやフォントの装飾の基本について詳しく説明します。

+ + + + + + + + + + + + +
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）。
学習目標:ウェブページのテキストを装飾するために必要な基本的なプロパティとテクニックを学ぶこと。
+ +

CSS においてテキストの装飾には何が関係していますか？

+ +

HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素のコンテンツボックス内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、{{htmlelement("br")}} 要素を使用して手動で改行を強制しない限り改行を作成しません。

+ +
+

注: 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、ボックスモデルの記事に戻って見直してください。

+
+ +

テキストを装飾するために使用される CSS プロパティは、一般的に次の2つのカテゴリに分類されます。 この記事では、これらのプロパティを個別に説明します。

+ + + +
+

注: 要素内のテキストはすべて単一の実体として影響を受けることに注意してください。 テキストの一部分を（{{htmlelement("span")}} や {{htmlelement("strong")}} など）適切な要素でラップしたり、{{cssxref("::first-letter")}}（要素のテキストの最初の文字を選択）、{{cssxref("::first-line")}}（要素のテキストの最初の行を選択）、{{cssxref("::selection")}}（現在カーソルで強調表示されているテキストを選択）のようなテキスト固有の疑似要素を使用しない限り、テキストの一部分を選択して装飾することはできません。

+
+ +

フォント

+ +

フォントを装飾するためのプロパティを見るためにまっすぐに進みましょう。 この例では、次のような同じ HTML サンプルにいくつかの異なる CSS プロパティを適用します。

+ +
<h1>Tommy the cat</h1>
+
+<p>I remember as if it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
+ may have nestled its way into his mighty throat. Many a fat alley rat
+had met its demise while staring point blank down the cavernous barrel of
+ this awesome prowling machine. Truly a wonder of nature this urban
+predator — Tommy the cat had many a story to tell. But it was a rare
+occasion such as this that he did.</p>
+ +

完成した例は Github にあります（ソースコードも参照してください）。

+ +

色

+ +

{{cssxref("color")}} プロパティは、選択された要素の前景のコンテンツの色を設定します（通常はテキストですが、{{cssxref("text-decoration")}} プロパティを使用してテキストに下線や上線を配置するなど、他のいくつかの要素を含めることもできます）。

+ +

color は次のように任意の CSS カラー単位を受け入れることができます。

+ +
p {
+  color: red;
+}
+ +

これにより、次のように段落は標準のブラウザーのデフォルトの黒ではなく赤になります。

+ + + +

{{ EmbedLiveSample('Color', '100%', 220) }}

+ +

フォントファミリー

+ +

テキストに別のフォントを設定するには、{{cssxref("font-family")}} プロパティを使用します — これにより、選択した要素に適用するブラウザーのフォント（またはフォントのリスト）を指定できます。 ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。 そうでない場合は、ブラウザーの{{anch("Default fonts", "デフォルトフォント")}}を使用するだけです。 簡単な例はこんな感じです。

+ +
p {
+  font-family: arial;
+}
+ +

これにより、ページ上のすべての段落に、どのコンピュータでも見られる arial フォントが採用されます。

+ +

ウェブセーフフォント

+ +

フォントの入手可能性と言えば、すべてのシステムで一般的に利用でき、したがってそれほど心配することなく使用できるフォントの数は限られています。これらはいわゆるウェブセーフフォント (web safe fonts) です。

+ +

ほとんどの場合、ウェブ開発者は、テキストコンテンツの表示に使用されるフォントをより具体的に制御したいと考えています。 問題は、ウェブページを見るために使用されているコンピュータでどのフォントが利用可能かを知る方法を見つけることです。 あらゆる場合にこれを知る方法はありませんが、ウェブセーフフォントは最も使用されているオペレーティングシステム（Windows、Mac、最も一般的な Linux ディストリビューション、Android、および iOS）のほぼすべての実例で使用可能です。

+ +

実際のウェブセーフフォントのリストは、オペレーティングシステムが進化するにつれて変わりますが、少なくとも現時点では次のフォントをウェブセーフと見なすことをお勧めします（それらの多くは90年代後半から2000年代初頭にかけての Microsoft の Core fonts for the Web の先鞭のおかげで普及しました）。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
名前総称タイプ注
Arialsans-serifArial に好ましい代替として Helvetica を追加するのがベストプラクティスと考えられることがよくあります。 それらのフォントフェースはほぼ同じですが、Arial の方が広く入手可能であっても Helvetica はより良い形状をしていると考えられます。
Courier Newmonospaceいくつかの OS は Courier と呼ばれる Courier New フォントの代替（おそらく古い）バージョンを持っています。 Courier New と一緒に両方を使用することを推奨します。
Georgiaserif
Times New Romanserifいくつかの OS は Times と呼ばれる Times New Roman フォントの代替（おそらく古い）バージョンを持っています。 Times New Roman と一緒に両方を使用することを推奨します。
Trebuchet MSsans-serifこのフォントの使用には注意が必要です — モバイル OS では広く使用されていません。
Verdanasans-serif
+ +
+

注: さまざまなリソースの中で、cssfontstack.com ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。

+
+ +
+

注: ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、ウェブフォント（web fonts）です。 これはもう少し複雑で、このモジュールの後の別の記事でこれを議論するでしょう。

+
+ +

デフォルトフォント

+ +

CSS はフォントの5つの総称名を定義しています: セリフ（serif）、サンセリフ（sans-serif）、等幅（monospace）、筆記体（cursive）、ファンタジー（fantasy）。 これらは非常に一般的なものであり、それらの総称名を使用するときに使用される正確なフォントは各ブラウザー次第であり、それらが実行されているオペレーティングシステムごとに異なります。 これは、ブラウザーが最低限適切なフォントを提供するように最善を尽くそうとする場合の最悪のシナリオを表します。 serif、sans-serif、および monospace はかなり予測可能であり、妥当なものを提供するはずです。 その一方で、cursive や fantasy はそれほど予測できないので、慎重に使用してテストすることをお勧めします。

+ +

5つの名前は次のように定義されています。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用語定義例
serifセリフ（いくつかの書体のストロークの終わりに見られる隆起やその他の細部）を持つフォントです。My big red elephant
sans-serifセリフがないフォントです。My big red elephant
monospaceすべての文字が同じ幅を持つフォントで、通常はコードリストで使用されます。My big red elephant
cursive流れるような連続したストロークで、手書き文字を模倣することを目的としたフォントです。My big red elephant
fantasy装飾的なフォントです。My big red elephant
+ +

フォントスタック

+ +

ウェブページで使用したいフォントの可用性を保証することはできないため（ウェブフォントでさえ何らかの理由で失敗する可能性もあります）、ブラウザーに複数のフォントから選択できるようにフォントスタック（font stack）を指定できます。 これは単に、次のようにカンマで区切られた複数のフォント名からなる font-family の値です。

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

そのような場合、ブラウザーはリストの先頭から始めて、そのフォントがマシンで利用可能かどうかを確認します。 そうであれば、そのフォントを選択した要素に適用します。 そうでない場合は、次のフォントに移動します。

+ +

リストされているフォントがどれも利用できない場合、ブラウザーが少なくともほぼ適切なものを提供できるように、スタックの最後に適切な総称フォント名を指定することをお勧めします。 この点を強調するために、他のオプションが利用できない場合、段落にはブラウザーのデフォルトの serif フォントを使用します — これは通常は Times New Roman です — これは sans-serif フォントには不適切です！

+ +
+

注: Trebuchet MS のように、複数の単語を含むフォント名は "Trebuchet MS" のように引用符で囲む必要があります。

+
+ +

font-family の例

+ +

前の例に追加して、次のように段落に sans-serif フォントを付けます。

+ +
p {
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

これにより、次のような結果が得られます。

+ + + +

{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}

+ +

フォントサイズ

+ +

前のモジュールの CSS の値と単位の記事で、長さとサイズの単位を確認しました。 フォントサイズ（{{cssxref("font-size")}} プロパティで設定）は、これらの単位のほとんど（およびパーセントなどの他の単位）で測定された値を取ることができますが、テキストのサイズを設定するために使用する最も一般的な単位は次のとおりです。

+ + + +

要素の font-size は、その要素の親要素から継承されます。 これはすべてドキュメント全体のルート要素 — {{htmlelement("html")}} — で始まり、font-size はブラウザー間で標準で 16px に設定されています。 ルート要素内の段落（またはブラウザーによって設定された異なるサイズを持たない他の要素）は、最終サイズが 16px になります。 他の要素はデフォルトサイズが異なる場合があります。 例えば、{{htmlelement("h1")}} 要素のサイズはデフォルトで 2em に設定されているため、最終的なサイズは 32px になります。

+ +

入れ子になった要素のフォントサイズを変更し始めると、物事はより複雑になります。 例えば、ページに {{htmlelement("article")}} 要素があり、その font-size を 1.5em（これは計算すると 24px の最終的なサイズになります）に設定し、次に <article> 要素内の段落に 20px で計算したフォントサイズを使用するようにしたい場合に、あなたは何 em の値を使用しますか？

+ +
<!-- ドキュメントのベースフォントサイズは 16px です -->
+<article> <!-- ここのフォントサイズが 1.5em の場合 -->
+  <p>My paragraph</p> <!-- 20px のフォントサイズにするにはどう計算しますか？ -->
+</article>
+ +

その em 値を 20 / 24 、つまり 0.83333333em に設定する必要があります。 数学は複雑になる可能性があるため、装飾方法には注意が必要です。 可能な限り rem を使用して、物事を単純にし、可能な限りコンテナ要素のフォントサイズを設定しないようにするのが最善です。

+ +

簡単なサイズ設定の例

+ +

テキストのサイズを変更するときは、通常、ドキュメントのベース font-size を 10px に設定することをお勧めします。 そうすれば、数学の計算がはるかに簡単になります — その場合、必要な (r)em 値は、16 ではなく、10 で割ったピクセルフォントサイズです。 これで、ドキュメント内のさまざまな種類のテキストのサイズを簡単に変更できます。 スタイルシートの指定された領域にすべての font-size の規則セットをリストすることをお勧めします。 そうすれば、それらは簡単に見つけられます。

+ +

新しい結果はこんな感じです。

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('A_simple_sizing_example', '100%', 220) }}

+ +

フォントスタイル、フォントの太さ、テキスト変換、テキスト飾り

+ +

CSS は、テキストの視覚的な太さや強調を変更するために次の4つの共通のプロパティを提供します。

+ + + +

例にこれらのプロパティをいくつか追加してみましょう。

+ +

新しい結果はこんな感じです。

+ + + +
html {
+  font-size: 10px;
+}
+
+h1 {
+  font-size: 2.6rem;
+  text-transform: capitalize;
+}
+
+h1 + p {
+  font-weight: bold;
+}
+
+p {
+  font-size: 1.4rem;
+  color: red;
+  font-family: Helvetica, Arial, sans-serif;
+}
+ +

{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 220) }}

+ +

テキストのドロップシャドウ

+ +

{{cssxref("text-shadow")}} プロパティを使ってテキストにドロップシャドウを付けることができます。 次の例に示すように、これは最大4つの値を取ります。

+ +
text-shadow: 4px 4px 5px red;
+ +

4つのプロパティは次のとおりです。

+ +
    +
  1. 元のテキストからの影の水平方向のオフセット — これは、ほとんどの CSS の長さとサイズの単位を取ることができますが、最も一般的には px を使用します。 この値を含める必要があります。
    2. +
  2. 元のテキストからの影の垂直方向のオフセット — 基本的に水平方向のオフセットと同じようにふるまいますが、影を左右に移動するのではなく上下に移動する点が異なります。 この値を含める必要があります。
    3. +
  3. ぼかし半径 — 値が大きいほど、影はより広く分散されます。 この値が含まれていない場合、デフォルトは 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の長さとサイズの単位を取ることができます。
    4. +
  4. 影のベースカラー — 任意の CSS カラー単位を取ります。 含まれていない場合、デフォルトは black です。
    5. +
+ +
+

注: 正のオフセット値は影を右下に移動させますが、-1px -1px のように負のオフセット値を使用して影を左上に移動させることもできます。

+
+ +

複数の影

+ +

複数の影の値をコンマで区切って含めることで、次のように同じテキストに複数の影を付けることができます。

+ +
text-shadow: -1px -1px 1px #aaa,
+             0px 4px 1px rgba(0,0,0,0.5),
+             4px 4px 5px rgba(0,0,0,0.7),
+             0px 0px 7px rgba(0,0,0,0.4);
+ +

これを Tommy the cat の例の {{htmlelement("h1")}} 要素に適用すると、結果は次のようになります。

+ + + +

{{ EmbedLiveSample('Multiple_shadows', '100%', 220) }}

+ +
+

注:  Sitepoint の記事 Moonlighting with CSS text-shadow で、text-shadow の使い方のより興味深い例を見ることができます。

+
+ +

テキストのレイアウト

+ +

基本的なフォントのプロパティ以外の方法で、テキストのレイアウトに影響を与えるために使用できるプロパティを見てみましょう。

+ +

テキストの配置

+ +

{{cssxref("text-align")}} プロパティは、テキストを含むコンテンツボックス内でのテキストの配置方法を制御するために使用されます。 利用可能な値は次の通りで、通常のワードプロセッサアプリケーションとほとんど同じように機能します。

+ + + +

例の {{htmlelement("h1")}} に、text-align: center; を適用した場合、次のようになるでしょう。

+ + + +

{{ EmbedLiveSample('Text_alignment', '100%', 220) }}

+ +

ラインの高さ

+ +

{{cssxref("line-height")}} プロパティはテキストの各ラインの高さを設定します — これはほとんどの長さとサイズの単位をとることができますが、乗数として機能し、一般的に最良の選択肢と考えられる単位なしの値をとることもできます — line-height を得るために {{cssxref("font-size")}} が乗算されます。 本文はラインが離れていると、一般的に見栄えがよく、読みやすくなります。 推奨されるラインの高さは約 1.5 〜 2（ダブルスペース）です。 したがって、テキストのラインをフォントの高さの 1.5 倍に設定するには、次のようにします。

+ +
line-height: 1.5;
+ +

この例の {{htmlelement("p")}} 要素にこれを適用すると、次のようになります。

+ + + +

{{ EmbedLiveSample('Line_height', '100%', 250) }}

+ +

文字と単語の間隔設定

+ +

{{cssxref("letter-spacing")}} プロパティと {{cssxref("word-spacing")}} プロパティを使用すると、テキスト内の文字と単語の間隔を設定できます。 これらはあまり使用しませんが、ある外観を得るためや、特に濃いフォントの読みやすさを向上させるために使用することがあります。 それらはほとんどの長さとサイズの単位を取ることができます。

+ +

例として、この例の {{htmlelement("p")}} 要素の最初のラインに次を適用したとします。

+ +
p::first-line {
+  letter-spacing: 2px;
+  word-spacing: 4px;
+}
+ +

次のようになります。

+ + + +

{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 250) }}

+ +

その他の検討に値するプロパティ

+ +

上記のプロパティは、ウェブページ上でテキストを装飾する方法のアイデアを与えますが、使うことができるもっと多くのプロパティがあります。 ここでは最も重要なものだけを取り上げたいと思います。 上記の使い方に慣れてきたら、次のことも調べてください。

+ +

フォントスタイル

+ + + +

テキストのレイアウトスタイル

+ + + +

フォントの一括指定

+ +

多くのフォントプロパティは、一括指定プロパティの {{cssxref("font")}} を介して設定することもできます。 これらは、{{cssxref("font-style")}}、{{cssxref("font-variant")}}、{{cssxref("font-weight")}}、{{cssxref("font-stretch")}}、{{cssxref("font-size")}}、{{cssxref("line-height")}}、{{cssxref("font-family")}} の順に書きます。

+ +

これらすべてのプロパティのうち、font 一括指定プロパティを使用する場合に必要なのは、font-size と font-family のみです。

+ +

{{cssxref("font-size")}} プロパティと {{cssxref("line-height")}} プロパティの間にスラッシュを入れる必要があります。

+ +

完全な例は次のようになります。

+ +
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+ +

能動的学習: テキストの装飾で遊ぶ

+ +

この能動的学習セッションでは、具体的な演習はありません。 フォントやテキストのレイアウトのプロパティをいくつか試してみて、作成できるものを確認してください！ オフラインの HTML / CSS ファイルを使用してこれを行うか、下記のライブ編集可能な例にコードを入力することができます。

+ +

間違えた場合は、Reset ボタンを使用していつでもリセットできます。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

まとめ

+ +

この記事のテキストで遊んで楽しんでくださいね！ 次の記事では、HTML リストの装飾について知っておくべきことをすべて説明します。

+ +

{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/css/styling_text/index.html b/files/ja/learn/css/styling_text/index.html new file mode 100644 index 0000000000..6bcfb0a722 --- /dev/null +++ b/files/ja/learn/css/styling_text/index.html @@ -0,0 +1,55 @@ +--- +title: テキストの装飾 +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - Text + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +
{{LearnSidebar}}
+ +

CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。

+ +

前提知識

+ +

このモジュールを始める前に、HTML 入門のモジュールで説明したようにすでに HTML についての基本的な知識があり、CSS 入門で説明したように CSS の基本に慣れている必要があります。

+ +
+

メモ: 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、JSBin、CodePen、Thimble のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。

+
+ +

ガイド

+ +

このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。

+ +
+
基本的なテキストとフォントの装飾
+
この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。
+
リストの装飾
+
リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。
+
リンクの装飾
+
リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。
+
ウェブフォント
+
ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。
+
+ +

評価

+ +

以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。

+ +
+
コミュニティスクールのホームページの組版
+
この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。
+
diff --git a/files/ja/learn/css/styling_text/styling_links/index.html b/files/ja/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..60588e794f --- /dev/null +++ b/files/ja/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,453 @@ +--- +title: リンクの装飾 +slug: Learn/CSS/Styling_text/Styling_links +tags: + - Article + - Beginner + - CSS + - Focus + - Guide + - Learn + - Links + - Pseudo-class + - hover + - hyperlinks + - menus + - tabs +translation_of: Learn/CSS/Styling_text/Styling_links +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。

+ + + + + + + + + + + + +
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。
学習目標:リンク状態を装飾する方法と、ナビゲーションメニューのような一般的な UI 機能でリンクを効果的に使用する方法を学ぶこと。
+ + + +

ハイパーリンクの作成のベストプラクティスに従って、HTML がリンクをどのように実装するかを調べました。 この記事では、この知識を基にして、リンクの装飾のためのベストプラクティスを示します。

+ + + +

最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは異なる疑似クラスを使って装飾することができます。

+ + + +

デフォルトの装飾

+ +

次の例は、リンクがデフォルトでどのようにふるまうかを示しています（CSS は、テキストをより見やすくするために、単にテキストを拡大して中央に配置しています）。

+ +
<p><a href="#">A simple link</a></p>
+
+ +
p {
+  font-size: 2rem;
+  text-align: center;
+}
+ +

{{ EmbedLiveSample('Default_styles', '100%', 120) }}

+ +
+

注: このページの例にあるリンクはすべて偽のリンクです — #（ハッシュまたはポンド記号）が実際の URL の代わりに配置されています。 これは、実際のリンクが含まれている場合、それらをクリックすると例が壊れる可能性があるためです（エラーが発生したり、ロードしたページから埋め込まれた例に戻ることができません）。 # は現在のページにリンクしているだけです。

+
+ +

デフォルトの装飾を調べていくうちに、次のようないくつかのことに気付くでしょう。

+ + + +

興味深いことに、これらのデフォルトの装飾は、1990年代半ばのブラウザーの初期の頃のものとほぼ同じです。 これは、ユーザーがこのふるまいを知っており、予期するようになったためです — リンクの装飾が異なると、多くの人が混乱してしまうでしょう。 これは、リンクの装飾を設定してはいけないという意味ではなく、予想されるふるまいから大きく外れてはいけないということです。 少なくとも次のことをするべきです。

+ + + +

デフォルトの装飾は、次の CSS プロパティを使用してオフにしたり変更したりできます。

+ + + +
+

注: リンクの装飾は上記のプロパティに制限されているわけではありません — 好きなプロパティを自由に使用できます。 夢中になりすぎないようにしてください！

+
+ + + +

デフォルトの状態を少し詳しく見てきたので、典型的なリンクの装飾のセットを見てみましょう。

+ +

まず始めに、空の規則セットを書き出します。

+ +
a {
+
+}
+
+
+a:link {
+
+}
+
+a:visited {
+
+}
+
+a:focus {
+
+}
+
+a:hover {
+
+}
+
+a:active {
+
+}
+ +

リンクのスタイルは互いに重なっているため、この順序は重要です。 例えば、最初の規則の装飾は、それ以降のすべての規則に適用され、リンクがアクティブになっているときは、ホバーもしています。 これらを間違った順序で並べると、物事は適切に機能しません。 順番を覚えておくには、LoVe Fears HAte のようなニーモニックを使用してみてください。

+ +

それでは、これを適切に装飾するための情報を追加しましょう。

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-size: 1.2rem;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: #265301;
+}
+
+a:visited {
+  color: #437A16;
+}
+
+a:focus {
+  border-bottom: 1px solid;
+  background: #BAE498;
+}
+
+a:hover {
+  border-bottom: 1px solid;
+  background: #CDFEAA;
+}
+
+a:active {
+  background: #265301;
+  color: #CDFEAA;
+}
+ +

CSS を適用するためのサンプル HTML も提供します。

+ +
<p>There are several browsers available, such as <a href="#">Mozilla
+Firefox</a>, <a href="#">Google Chrome</a>, and
+<a href="#">Microsoft Edge</a>.</p>
+ +

2つをまとめると、この結果が得られます。

+ +

{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}

+ +

それでは、ここで何をしたでしょうか？ これは確かにデフォルトの装飾とは異なるように見えますが、それでもユーザーに何が起こっているのかを知るための十分な身近な経験を提供します。

+ + + + + +

この能動的学習セッションでは、空の規則のセットにあなた自身の宣言を追加してリンクを本当にかっこよく見せてください。 想像力を駆使して、ワイルドに。 上記の例と同じように、よりかっこよく機能的なものを思いつくことができると確信しています。

+ +

間違えた場合は、Reset ボタンを使用していつでもリセットできます。 本当に立ち往生してしまったら、上に示した例を挿入するために Show solution ボタンを押してください。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ + + +

一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。 外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。 このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、icons8.com からの素晴らしい例を使います。

+ +

欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。

+ +
<p>For more information on the weather, visit our <a href="#">weather page</a>,
+look at <a href="http://#">weather on Wikipedia</a>, or check
+out <a href="http://#">weather on Extreme Science</a>.</p>
+ +

次に、CSS です。

+ +
body {
+  width: 300px;
+  margin: 0 auto;
+  font-family: sans-serif;
+}
+
+p {
+  line-height: 1.4;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  padding: 2px 1px 0;
+}
+
+a:link {
+  color: blue;
+}
+
+a:visited {
+  color: purple;
+}
+
+a:focus, a:hover {
+  border-bottom: 1px solid;
+}
+
+a:active {
+  color: red;
+}
+
+a[href*="http"] {
+  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
+  background-size: 16px 16px;
+  padding-right: 19px;
+}
+ +

{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}

+ +

それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後の規則は興味深いです — ここでは前回の記事のリストアイテムのカスタム行頭記号を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに {{cssxref("background")}} の一括指定を使用します。 挿入したい画像へのパスを設定し、no-repeat を指定してコピーを1つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。

+ +

また、{{cssxref("background-size")}} を使用して、背景画像を表示するサイズを指定します。 レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。 ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。

+ +

最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。

+ +

最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたがHTML リンクを適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト  "http" は（2番目と3番目のリンクのように）外部リンクにのみ現れ、これを属性セレクタで選択できます。 a[href*="http"] は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ {{htmlattrxref("href","a")}} 属性がある場合に限ります。

+ +

それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！

+ +
+

注: 背景やレスポンシブウェブデザインにまだ慣れていなくても心配しないでください。 これらは他の場所で説明されています。

+
+ + + +

この記事でこれまでに説明したツールは、他の方法でも使用できます。 例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。

+ +

さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。 その方法を探りましょう。

+ +

まず、いくつかの HTML です。

+ +
<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+ +

そして CSS です。

+ +
body,html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+ul {
+  padding: 0;
+  width: 100%;
+}
+
+li {
+  display: inline;
+}
+
+a {
+  outline: none;
+  text-decoration: none;
+  display: inline-block;
+  width: 19.5%;
+  margin-right: 0.625%;
+  text-align: center;
+  line-height: 3;
+  color: black;
+}
+
+li:last-child a {
+  margin-right: 0;
+}
+
+a:link, a:visited, a:focus {
+  background: yellow;
+}
+
+a:hover {
+  background: orange;
+}
+
+a:active {
+  background: red;
+  color: white;
+}
+ +

これにより、次のような結果が得られます。

+ +

{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}

+ +

最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。

+ + + +
+

注: HTML 内のリスト項目がすべて一行に記述されていることに気付いたかもしれません。インラインブロック要素間のスペースや改行は、単語間のスペースと同様にページにスペースを作成します。 そして、そのようなスペースは水平ナビゲーションメニューのレイアウトを壊すでしょう。だからスペースを取り除きました。この問題（と、その解決方法）についての詳細は、インラインブロック要素間のスペースの戦い（英語）で見つけることができます。

+
+ +

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

+ +

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

+ +

この評価ではこのモジュールで説明されているすべての知識をテストしますので、次に進む前に次の記事を読んだほうがいいかもしれません。

+ +

まとめ

+ +

この記事が、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています — 今のところは！ テキストの装飾モジュールの最後の記事では、ウェブサイトでのカスタムフォントの使用方法や、ウェブフォントの使用方法について詳しく説明しています。

+ +

{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}

+ +

このモジュール内の文書

+ + diff --git a/files/ja/learn/css/styling_text/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..0690271d64 --- /dev/null +++ b/files/ja/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,398 @@ +--- +title: リストの装飾 +slug: Learn/CSS/Styling_text/Styling_lists +tags: + - Article + - Beginner + - CSS + - Guide + - Styling + - Text + - bullets + - lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
+ +

リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。

+ + + + + + + + + + + + +
前提知識:基本的なコンピューターリテラシー、HTML の基本（HTML 入門を学ぶ）、CSS の基本（CSS 入門を学ぶ）、CSS のテキストとフォントの基礎。
学習目標:リストの装飾に関連するベストプラクティスとプロパティに慣れること。
+ +

簡単なリストの例

+ +

はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 装飾していない例は Github にあります（ソースコードもチェックしてください）。

+ +

そのリストの例の HTML はこんな感じです。

+ +
<h2>Shopping (unordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ul>
+  <li>Hummus</li>
+  <li>Pita</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
+
+<h2>Recipe (ordered) list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<ol>
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+
+<h2>Ingredient description list</h2>
+
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
+
+<dl>
+  <dt>Hummus</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pita</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+ +

ここで実際の例に行き、ブラウザー開発者ツールを使用してリスト要素を調べると、次のようないくつかの装飾のデフォルト設定に気付くでしょう。

+ + + +

リストの間隔の取り扱い

+ +

リストを装飾するときは、（段落や画像などの）周囲の要素と同じ垂直方向の間隔（バーティカルリズム（vertical rhythm）とも呼ばれる）と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります（Github で完成した装飾した例を見ることができ、ソースコードも見つけることができます）。

+ +

テキストの装飾と間隔調整に使用する CSS は次のとおりです。

+ +
/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}
+ + + +

リスト固有の装飾

+ +

リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき3つのプロパティがあり、それらは {{htmlelement("ul")}} や {{htmlelement("ol")}} 要素に設定できます。

+ + + +

行頭記号の装飾

+ +

前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号（bullet point）に使用する行頭記号（bullet）の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。

+ +
ol {
+  list-style-type: upper-roman;
+}
+ +

これにより、次のようになります。

+ +

行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。

+ +

{{cssxref("list-style-type")}} のリファレンスページをチェックすることで、もっとたくさんのオプションを見つけることができます。

+ +

行頭記号の位置

+ +

{{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 デフォルト値は outside です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。

+ +

値を inside に設定すると、行頭記号をラインの内側に配置します。

+ +
ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}
+ +

行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。

+ +

カスタム行頭記号画像の使用

+ +

{{cssxref("list-style-image")}} プロパティを使用すると、行頭記号にカスタム画像を使用できます。 構文は次のようにとても簡単です。

+ +
ul {
+  list-style-image: url(star.svg);
+}
+ +

ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、ボックスの装飾モジュールで詳しく説明します。 今のところ、これは味見です！

+ +

完成した例では、（既に上で見たものの上に）次のように順序なしリストを装飾しました。

+ +
ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}
+ +

ここでは次のことを行いました。

+ + + +

これにより、次のような結果が得られます。

+ +

行頭記号が小さな星の画像として設定された順序なしリスト

+ +

list-style 一括指定

+ +

上記の3つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、

+ +
ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}
+ +

これに置き換えることができます。

+ +
ul {
+  list-style: square url(example.png) inside;
+}
+ +

値は任意の順序でリストすることができ、1つ、2つ、または3つすべてを使用できます（含まれていないプロパティーに使用されるデフォルト値は disc、none、outside です）。 type と image の両方が指定されている場合、画像が何らかの理由でロードできない場合に、type を代替として使用します。

+ +

リストの数え方の制御

+ +

場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。

+ +

start

+ +

{{htmlattrxref("start","ol")}} 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、

+ +
<ol start="4">
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+ +

この出力を与えます。

+ +

{{ EmbedLiveSample('start', '100%', 150) }}

+ +

reversed

+ +

{{htmlattrxref("reversed","ol")}} 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、

+ +
<ol start="4" reversed>
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+ +

この出力を与えます。

+ +

{{ EmbedLiveSample('reversed', '100%', 150) }}

+ +
+

注: 逆方向のリストに start 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。

+
+ +

value

+ +

{{htmlattrxref("value","li")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、

+ +
<ol>
+  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+ +

この出力を与えます。

+ +

{{ EmbedLiveSample('value', '100%', 150) }}

+ +
+

注: 非数値の {{cssxref("list-style-type")}} を使用している場合でも、value 属性に同等の数値を使用する必要があります。

+
+ +

能動的学習: ネストしたリストの装飾

+ +

この能動的学習セッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。

+ +
    +
  1. 順序なしリストに正方形の行頭記号を付けます。
    2. +
  2. 順序なしリスト項目と順序付きリスト項目のフォントサイズの 1.5 のラインの高さを指定します。
    3. +
  3. 順序付きリストに小文字のアルファベットの行頭記号を付けます。
    4. +
  4. 行頭記号の種類、間隔、その他見つけられるものは何でも試して、好きなだけリストの例を試してみてください。
    5. +
+ +

間違えた場合は、Reset ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために Show solution ボタンを押してください。

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 800) }}

+ +

関連情報

+ +

CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。

+ + + +

まとめ

+ +

関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。

+ +

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

+ + + +

このモジュール内の文書

+ + diff --git a/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..7fb8d97e42 --- /dev/null +++ b/files/ja/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,126 @@ +--- +title: コミュニティスクールのホームページの組版 +slug: Learn/CSS/Styling_text/Typesetting_a_homepage +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Link + - Styling text + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
+ +

この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。

+ + + + + + + + + + + + +
前提知識:この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。
学習目標:CSS テキスト装飾テクニックの理解をテストすること。
+ +

出発点

+ +

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

+ + + +
+

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

+
+ +

プロジェクトの概要

+ +

架空のコミュニティカレッジのホームページ用の生の HTML と、ページを2列のレイアウトに装飾し、その他の基本的な装飾をする CSS が提供されています。 CSS ファイルの最後にあるコメントの下に CSS の追加部分を書いて、あなたが行った部分に簡単に印を付けることができるようにします。 一部のセレクタがくどくても心配しないで、この場合は見逃してください。

+ +

フォント

+ + + +

一般的なテキスト装飾

+ + + +

リンク

+ + + +

リスト

+ + + +

ナビゲーションメニュー

+ + + +

ヒントとコツ

+ + + +

例

+ +

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

+ +

+ +

評価

+ +

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

+ +

{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "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" new file mode 100644 index 0000000000..d96b610029 --- /dev/null +++ "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" @@ -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")}}

+ + + +

このモジュール内の文書

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