diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/learn/css/styling_text | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/learn/css/styling_text')
| -rw-r--r-- | files/ja/learn/css/styling_text/fundamentals/index.html | 748 | ||||
| -rw-r--r-- | files/ja/learn/css/styling_text/index.html | 55 | ||||
| -rw-r--r-- | files/ja/learn/css/styling_text/styling_links/index.html | 453 | ||||
| -rw-r--r-- | files/ja/learn/css/styling_text/styling_lists/index.html | 398 | ||||
| -rw-r--r-- | files/ja/learn/css/styling_text/typesetting_a_homepage/index.html | 126 | ||||
| -rw-r--r-- | files/ja/learn/css/styling_text/ウェブフォント/index.html | 219 |
6 files changed, 1999 insertions, 0 deletions
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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">この記事では、{{glossary("CSS")}} によるテキストの装飾の習得に向けて旅を始めましょう。</span> ここでは、フォントの太さ、ファミリーそしてスタイルの設定、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔などを含んだ、テキストやフォントの装飾の基本について詳しく説明します。</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>ウェブページのテキストを装飾するために必要な基本的なプロパティとテクニックを学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_involved_in_styling_text_in_CSS" name="What_is_involved_in_styling_text_in_CSS">CSS においてテキストの装飾には何が関係していますか？</h2> + +<p>HTML と CSS を使った作業ですでに経験したように、要素内のテキストは要素のコンテンツボックス内にレイアウトされます。 コンテンツ領域の左上（RTL 言語のコンテンツの場合は右上）から始まり、ラインの終りに向かって流れます。 終りに達すると、次のラインに進み、続けてすべてのコンテンツがボックスに配置されるまで次のラインに進みます。 テキストコンテンツは事実上一連のインライン要素のようにふるまい、互いに隣接するラインに配置され、ラインの終りに達するまで、または、{{htmlelement("br")}} 要素を使用して手動で改行を強制しない限り改行を作成しません。</p> + +<div class="note"> +<p><strong>注</strong>: 上の段落で混乱していると感じても問題ありません — 先に進む前に、ボックスモデル理論を磨くために、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">ボックスモデル</a>の記事に戻って見直してください。</p> +</div> + +<p>テキストを装飾するために使用される CSS プロパティは、一般的に次の2つのカテゴリに分類されます。 この記事では、これらのプロパティを個別に説明します。</p> + +<ul> + <li><strong>フォントスタイル</strong>: テキストに適用されるフォントに影響するプロパティで、適用するフォント、大きさ、太字、斜体などに影響します。</li> + <li><strong>テキストのレイアウトスタイル</strong>: テキストの間隔やその他のレイアウト機能に影響するプロパティで、例えば、行間や文字間のスペースや、コンテンツボックス内でのテキストの配置方法などを操作できます。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: 要素内のテキストはすべて単一の実体として影響を受けることに注意してください。 テキストの一部分を（{{htmlelement("span")}} や {{htmlelement("strong")}} など）適切な要素でラップしたり、{{cssxref("::first-letter")}}（要素のテキストの最初の文字を選択）、{{cssxref("::first-line")}}（要素のテキストの最初の行を選択）、{{cssxref("::selection")}}（現在カーソルで強調表示されているテキストを選択）のようなテキスト固有の疑似要素を使用しない限り、テキストの一部分を選択して装飾することはできません。</p> +</div> + +<h2 id="Fonts" name="Fonts">フォント</h2> + +<p>フォントを装飾するためのプロパティを見るためにまっすぐに進みましょう。 この例では、次のような同じ HTML サンプルにいくつかの異なる CSS プロパティを適用します。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">完成した例</a>は Github にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">ソースコード</a>も参照してください）。</p> + +<h3 id="Color" name="Color">色</h3> + +<p>{{cssxref("color")}} プロパティは、選択された要素の前景のコンテンツの色を設定します（通常はテキストですが、{{cssxref("text-decoration")}} プロパティを使用してテキストに下線や上線を配置するなど、他のいくつかの要素を含めることもできます）。</p> + +<p><code>color</code> は次のように任意の <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS カラー単位</a>を受け入れることができます。</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>これにより、次のように段落は標準のブラウザーのデフォルトの黒ではなく赤になります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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></pre> +</div> + +<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p> + +<h3 id="Font_families" name="Font_families">フォントファミリー</h3> + +<p>テキストに別のフォントを設定するには、{{cssxref("font-family")}} プロパティを使用します — これにより、選択した要素に適用するブラウザーのフォント（またはフォントのリスト）を指定できます。 ウェブサイトにアクセスしているマシンで利用可能な場合にのみ、ブラウザーはフォントを適用します。 そうでない場合は、ブラウザーの{{anch("Default fonts", "デフォルトフォント")}}を使用するだけです。 簡単な例はこんな感じです。</p> + +<pre class="brush: css notranslate">p { + font-family: arial; +}</pre> + +<p>これにより、ページ上のすべての段落に、どのコンピュータでも見られる arial フォントが採用されます。</p> + +<h4 id="Web_safe_fonts" name="Web_safe_fonts">ウェブセーフフォント</h4> + +<p>フォントの入手可能性と言えば、すべてのシステムで一般的に利用でき、したがってそれほど心配することなく使用できるフォントの数は限られています。これらはいわゆる<strong>ウェブセーフフォント </strong>(web safe fonts) です。</p> + +<p>ほとんどの場合、ウェブ開発者は、テキストコンテンツの表示に使用されるフォントをより具体的に制御したいと考えています。 問題は、ウェブページを見るために使用されているコンピュータでどのフォントが利用可能かを知る方法を見つけることです。 あらゆる場合にこれを知る方法はありませんが、ウェブセーフフォントは最も使用されているオペレーティングシステム（Windows、Mac、最も一般的な Linux ディストリビューション、Android、および iOS）のほぼすべての実例で使用可能です。</p> + +<p>実際のウェブセーフフォントのリストは、オペレーティングシステムが進化するにつれて変わりますが、少なくとも現時点では次のフォントをウェブセーフと見なすことをお勧めします（それらの多くは90年代後半から2000年代初頭にかけての Microsoft の <a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a> の先鞭のおかげで普及しました）。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">名前</th> + <th scope="col" style="white-space: nowrap;">総称タイプ</th> + <th scope="col">注</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td><em>Arial</em> に好ましい代替として <em>Helvetica</em> を追加するのがベストプラクティスと考えられることがよくあります。 それらのフォントフェースはほぼ同じですが、<em>Arial</em> の方が広く入手可能であっても <em>Helvetica</em> はより良い形状をしていると考えられます。</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>いくつかの OS は <em>Courier</em> と呼ばれる <em>Courier New</em> フォントの代替（おそらく古い）バージョンを持っています。 <em>Courier New</em> と一緒に両方を使用することを推奨します。</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>いくつかの OS は <em>Times</em> と呼ばれる <em>Times New Roman</em> フォントの代替（おそらく古い）バージョンを持っています。 <em>Times New Roman</em> と一緒に両方を使用することを推奨します。</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>このフォントの使用には注意が必要です — モバイル OS では広く使用されていません。</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注</strong>: さまざまなリソースの中で、<a href="http://www.cssfontstack.com/">cssfontstack.com</a> ウェブサイトには、Windows および macOS オペレーティングシステムで利用可能なウェブセーフフォントのリストがあり、使用しても安全と見なせるものについて判断を下すことができます。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: ウェブページとともにカスタムフォントをダウンロードして、フォントの使用方法を自由にカスタマイズできる方法があります。 それは、<strong>ウェブフォント</strong>（web fonts）です。 これはもう少し複雑で、このモジュールの後の別の記事でこれを議論するでしょう。</p> +</div> + +<h4 id="Default_fonts" name="Default_fonts">デフォルトフォント</h4> + +<p>CSS はフォントの5つの総称名を定義しています: セリフ（<code>serif</code>）、サンセリフ（<code>sans-serif</code>）、等幅（<code>monospace</code>）、筆記体（<code>cursive</code>）、ファンタジー（<code>fantasy</code>）。 これらは非常に一般的なものであり、それらの総称名を使用するときに使用される正確なフォントは各ブラウザー次第であり、それらが実行されているオペレーティングシステムごとに異なります。 これは、ブラウザーが最低限適切なフォントを提供するように最善を尽くそうとする場合の<em>最悪のシナリオ</em>を表します。 <code>serif</code>、<code>sans-serif</code>、および <code>monospace</code> はかなり予測可能であり、妥当なものを提供するはずです。 その一方で、<code>cursive</code> や <code>fantasy</code> はそれほど予測できないので、慎重に使用してテストすることをお勧めします。</p> + +<p>5つの名前は次のように定義されています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">用語</th> + <th scope="col">定義</th> + <th scope="col">例</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>セリフ（いくつかの書体のストロークの終わりに見られる隆起やその他の細部）を持つフォントです。</td> + <td><span style="font-family: serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>セリフがないフォントです。</td> + <td><span style="font-family: sans-serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>すべての文字が同じ幅を持つフォントで、通常はコードリストで使用されます。</td> + <td><span style="font-family: monospace;">My big red elephant</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>流れるような連続したストロークで、手書き文字を模倣することを目的としたフォントです。</td> + <td><span style="font-family: cursive;">My big red elephant</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>装飾的なフォントです。</td> + <td><span style="font-family: fantasy;">My big red elephant</span></td> + </tr> + </tbody> +</table> + +<h4 id="Font_stacks" name="Font_stacks">フォントスタック</h4> + +<p>ウェブページで使用したいフォントの可用性を保証することはできないため（ウェブフォントでさえ何らかの理由で失敗する<em>可能性</em>もあります）、ブラウザーに複数のフォントから選択できるように<strong>フォントスタック</strong>（font stack）を指定できます。 これは単に、次のようにカンマで区切られた複数のフォント名からなる <code>font-family</code> の値です。</p> + +<pre class="brush: css notranslate">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>そのような場合、ブラウザーはリストの先頭から始めて、そのフォントがマシンで利用可能かどうかを確認します。 そうであれば、そのフォントを選択した要素に適用します。 そうでない場合は、次のフォントに移動します。</p> + +<p>リストされているフォントがどれも利用できない場合、ブラウザーが少なくともほぼ適切なものを提供できるように、スタックの最後に適切な総称フォント名を指定することをお勧めします。 この点を強調するために、他のオプションが利用できない場合、段落にはブラウザーのデフォルトの serif フォントを使用します — これは通常は Times New Roman です — これは sans-serif フォントには不適切です！</p> + +<div class="note"> +<p><strong>注</strong>: <code>Trebuchet MS</code> のように、複数の単語を含むフォント名は <code>"Trebuchet MS"</code> のように引用符で囲む必要があります。</p> +</div> + +<h4 id="A_font-family_example" name="A_font-family_example">font-family の例</h4> + +<p>前の例に追加して、次のように段落に sans-serif フォントを付けます。</p> + +<pre class="brush: css notranslate">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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></pre> +</div> + +<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p> + +<h3 id="Font_size" name="Font_size">フォントサイズ</h3> + +<p>前のモジュールの <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS の値と単位</a>の記事で、<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を確認しました。 フォントサイズ（{{cssxref("font-size")}} プロパティで設定）は、これらの単位のほとんど（および<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">パーセント</a>などの他の単位）で測定された値を取ることができますが、テキストのサイズを設定するために使用する最も一般的な単位は次のとおりです。</p> + +<ul> + <li><code>px</code> (pixels): テキストを表示したい高さのピクセル数。 これは絶対的な単位です — それはほとんどどんな状況でもページ上のフォントの同じ最終的な計算値になります。</li> + <li><code>em</code>: <code>1em</code> は、現在装飾している要素の親要素に設定されているフォントサイズ（より具体的には、親要素の内側に含まれる大文字の M の幅）に等しくなります。 フォントサイズの異なるネストされた要素が多数設定されている場合には厄介な作業になるかもしれませんが、以下に示すように、それは実行可能です。 なぜわざわざそうする？ 慣れると非常に自然になり、テキストだけでなく、<code>em</code> を使用してすべてのサイズを変更できます。 ウェブサイト全体を <code>em</code> を使用してサイズ設定することができ、これにより、メンテナンスが簡単になります。</li> + <li><code>rem</code>: これらは <code>em</code> とまったく同じように機能しますが、<code>1rem</code> が親要素ではなく文書のルート要素に設定されたフォントサイズ（つまり {{htmlelement("html")}}）に等しい点が異なります。 これにより、フォントサイズを簡単に計算することができますが、残念ながら Internet Explorer 8 以下では <code>rem</code> はサポートされていません。 プロジェクトで古いブラウザーをサポートする必要がある場合は、<code>em</code> や <code>px</code> を使用するか、<a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a> などの{{glossary("polyfill","ポリフィル")}}を使用することができます。</li> +</ul> + +<p>要素の <code>font-size</code> は、その要素の親要素から継承されます。 これはすべてドキュメント全体のルート要素 — {{htmlelement("html")}} — で始まり、<code>font-size</code> はブラウザー間で標準で <code>16px</code> に設定されています。 ルート要素内の段落（またはブラウザーによって設定された異なるサイズを持たない他の要素）は、最終サイズが <code>16px</code> になります。 他の要素はデフォルトサイズが異なる場合があります。 例えば、{{htmlelement("h1")}} 要素のサイズはデフォルトで <code>2em</code> に設定されているため、最終的なサイズは <code>32px</code> になります。</p> + +<p>入れ子になった要素のフォントサイズを変更し始めると、物事はより複雑になります。 例えば、ページに {{htmlelement("article")}} 要素があり、その <code>font-size</code> を <code>1.5em</code>（これは計算すると <code>24px</code> の最終的なサイズになります）に設定し、次に <code><article></code> 要素内の段落に <code>20px</code> で計算したフォントサイズを使用するようにしたい場合に、あなたは何 <code>em</code> の値を使用しますか？</p> + +<pre class="brush: html notranslate"><!-- ドキュメントのベースフォントサイズは 16px です --> +<article> <!-- ここのフォントサイズが 1.5em の場合 --> + <p>My paragraph</p> <!-- 20px のフォントサイズにするにはどう計算しますか？ --> +</article></pre> + +<p>その <code>em</code> 値を 20 / 24 、つまり <code>0.83333333em</code> に設定する必要があります。 数学は複雑になる可能性があるため、装飾方法には注意が必要です。 可能な限り <code>rem</code> を使用して、物事を単純にし、可能な限りコンテナ要素のフォントサイズを設定しないようにするのが最善です。</p> + +<h4 id="A_simple_sizing_example" name="A_simple_sizing_example">簡単なサイズ設定の例</h4> + +<p>テキストのサイズを変更するときは、通常、ドキュメントのベース <code>font-size</code> を <code>10px</code> に設定することをお勧めします。 そうすれば、数学の計算がはるかに簡単になります — その場合、必要な <code>(r)em</code> 値は、16 ではなく、10 で割ったピクセルフォントサイズです。 これで、ドキュメント内のさまざまな種類のテキストのサイズを簡単に変更できます。 スタイルシートの指定された領域にすべての <code>font-size</code> の規則セットをリストすることをお勧めします。 そうすれば、それらは簡単に見つけられます。</p> + +<p>新しい結果はこんな感じです。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 220) }}</p> + +<h3 id="Font_style_font_weight_text_transform_and_text_decoration" name="Font_style_font_weight_text_transform_and_text_decoration">フォントスタイル、フォントの太さ、テキスト変換、テキスト飾り</h3> + +<p>CSS は、テキストの視覚的な太さや強調を変更するために次の4つの共通のプロパティを提供します。</p> + +<ul> + <li>{{cssxref("font-style")}}: イタリック体テキストのオンとオフを切り替えるために使用されます。 可能な値は次のとおりです（何らかの理由でイタリック装飾をオフにしたい場合を除いて、これを使用することはめったにありません）。 + <ul> + <li><code>normal</code>: テキストを通常のフォントに設定します（既存のイタリック体をオフにします）。</li> + <li><code>italic</code>: 利用できる場合は、<em>イタリック体版のフォント</em>を使用するようにテキストを設定します。 利用できない場合は、代わりに <code>oblique</code> でイタリック体をシミュレートします。</li> + <li><code>oblique</code>: <span style="font-style: oblique;">通常版を斜めにして</span>作成された、イタリック体フォントのシミュレート版を使用するようにテキストを設定します。</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: テキストの太さを設定します。 利用可能なフォントのバリエーションが多数ある場合（<em>-light</em>、<em>-normal</em>、<em>-bold</em>、<em>-extrabold</em>、<em>-black</em> など）、これには多くの値がありますが、現実的には <code>normal</code> と <code>bold</code> 以外のものを使用することはほとんどありません。 + <ul> + <li><code>normal</code>, <code>bold</code>: 標準および<strong style="font-weight: bold;">太字</strong>のフォントの太さ。</li> + <li><code>lighter</code>, <code>bolder</code>: 現在の要素の太さを、親要素の太さよりも1段階細くまたは太くします。</li> + <li><code>100</code>～<code>900</code>: 必要に応じて、上記のキーワードよりもきめ細かい制御を提供する太さの数値。</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: フォントを変換するように設定できます。 値は次のとおりです。 + <ul> + <li><code>none</code>: 変換を禁止します。</li> + <li><code>uppercase</code>: すべてのテキストを大文字（<span style="text-transform: uppercase;">all text to capitals</span>）に変換します。</li> + <li><code>lowercase</code>: すべてのテキストを小文字（<span style="text-transform: lowercase;">ALL TEXT TO LOWER CASE</span>）に変換します。</li> + <li><code>capitalize</code>: すべての単語を最初の文字を大文字にする（<span style="text-transform: capitalize;">have the first letter capitalized</span>）ように変換します。</li> + <li><code>full-width</code>: 例えば、ラテン文字を（中国語、日本語、韓国語など）アジア言語のグリフと一緒に揃えて、等幅フォントのように、固定幅の四角形の中にすべてのグリフを書く（<span style="text-transform: full-width;">written inside a fixed-width square</span>）ように変換します。</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: フォントのテキスト飾りを設定/設定解除します（主にリンクのデフォルトの下線を解除するために使用します）。 使用可能な値は次のとおりです。</li> + <li> + <ul> + <li><code>none</code>: 既に存在するテキスト飾りをすべて解除します。</li> + <li><code>underline</code>: <u>テキストに下線を引きます</u>。</li> + <li><code>overline</code>: <span style="text-decoration: overline;">テキストに上線を付けます</span>。</li> + <li><code>line-through</code>: <s style="text-decoration: line-through;">テキストの上に取り消し線を引きます</s>。</li> + </ul> + 複数の飾りを同時に追加したい場合は、<span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span> のように、{{cssxref("text-decoration")}} は一度に複数の値を受け入れることができます。 また、{{cssxref("text-decoration")}} は、{{cssxref("text-decoration-line")}}、{{cssxref("text-decoration-style")}}、および {{cssxref("text-decoration-color")}} の一括指定プロパティです。 例えば、<span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code></span> のように、これらのプロパティ値の組み合わせを使用して、興味深い効果を生み出すことができます。</li> +</ul> + +<p>例にこれらのプロパティをいくつか追加してみましょう。</p> + +<p>新しい結果はこんな感じです。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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> +</pre> +</div> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 220) }}</p> + +<h3 id="Text_drop_shadows" name="Text_drop_shadows">テキストのドロップシャドウ</h3> + +<p>{{cssxref("text-shadow")}} プロパティを使ってテキストにドロップシャドウを付けることができます。 次の例に示すように、これは最大4つの値を取ります。</p> + +<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> + +<p>4つのプロパティは次のとおりです。</p> + +<ol> + <li>元のテキストからの影の水平方向のオフセット — これは、ほとんどの CSS の<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができますが、最も一般的には <code>px</code> を使用します。 この値を含める必要があります。</li> + <li>元のテキストからの影の垂直方向のオフセット — 基本的に水平方向のオフセットと同じようにふるまいますが、影を左右に移動するのではなく上下に移動する点が異なります。 この値を含める必要があります。</li> + <li>ぼかし半径 — 値が大きいほど、影はより広く分散されます。 この値が含まれていない場合、デフォルトは 0 になり、ぼかしは行われません。 これは、ほとんどの CSS の<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができます。</li> + <li>影のベースカラー — 任意の <a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS カラー単位</a>を取ります。 含まれていない場合、デフォルトは <code>black</code> です。</li> +</ol> + +<div class="note"> +<p>注: 正のオフセット値は影を右下に移動させますが、<code>-1px -1px</code> のように負のオフセット値を使用して影を左上に移動させることもできます。</p> +</div> + +<h4 id="Multiple_shadows" name="Multiple_shadows">複数の影</h4> + +<p>複数の影の値をコンマで区切って含めることで、次のように同じテキストに複数の影を付けることができます。</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>これを Tommy the cat の例の {{htmlelement("h1")}} 要素に適用すると、結果は次のようになります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multiple_shadows', '100%', 220) }}</p> + +<div class="note"> +<p><strong>注</strong>: Sitepoint の記事 <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a> で、<code>text-shadow</code> の使い方のより興味深い例を見ることができます。</p> +</div> + +<h2 id="Text_layout" name="Text_layout">テキストのレイアウト</h2> + +<p>基本的なフォントのプロパティ以外の方法で、テキストのレイアウトに影響を与えるために使用できるプロパティを見てみましょう。</p> + +<h3 id="Text_alignment" name="Text_alignment">テキストの配置</h3> + +<p>{{cssxref("text-align")}} プロパティは、テキストを含むコンテンツボックス内でのテキストの配置方法を制御するために使用されます。 利用可能な値は次の通りで、通常のワードプロセッサアプリケーションとほとんど同じように機能します。</p> + +<ul> + <li><code>left</code>: テキストを左揃えにします。</li> + <li><code>right</code>: テキストを右揃えにします。</li> + <li><code>center</code>: テキストを中央揃えにします。</li> + <li><code>justify</code>: テキストを両端揃えにします。 すべてのテキストのラインが同じ幅になるように、単語の間隔を変えてテキストを広げます。 これは慎重に使用する必要があります — 特に、長い単語が多数含まれている段落に適用すると、ひどく見えます。 もしこれを使うつもりなら、{{cssxref("hyphens")}} のような他の何かを使用して、複数ラインにまたがる長い単語を分割することも考えてください。</li> +</ul> + +<p>例の {{htmlelement("h1")}} に、<code>text-align: center;</code> を適用した場合、次のようになるでしょう。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Text_alignment', '100%', 220) }}</p> + +<h3 id="Line_height" name="Line_height">ラインの高さ</h3> + +<p>{{cssxref("line-height")}} プロパティはテキストの各ラインの高さを設定します — これはほとんどの<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>をとることができますが、乗数として機能し、一般的に最良の選択肢と考えられる単位なしの値をとることもできます — <code>line-height</code> を得るために {{cssxref("font-size")}} が乗算されます。 本文はラインが離れていると、一般的に見栄えがよく、読みやすくなります。 推奨されるラインの高さは約 1.5 〜 2（ダブルスペース）です。 したがって、テキストのラインをフォントの高さの 1.5 倍に設定するには、次のようにします。</p> + +<pre class="brush: css notranslate">line-height: 1.5;</pre> + +<p>この例の {{htmlelement("p")}} 要素にこれを適用すると、次のようになります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Line_height', '100%', 250) }}</p> + +<h3 id="Letter_and_word_spacing" name="Letter_and_word_spacing">文字と単語の間隔設定</h3> + +<p>{{cssxref("letter-spacing")}} プロパティと {{cssxref("word-spacing")}} プロパティを使用すると、テキスト内の文字と単語の間隔を設定できます。 これらはあまり使用しませんが、ある外観を得るためや、特に濃いフォントの読みやすさを向上させるために使用することがあります。 それらはほとんどの<a href="/ja/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">長さとサイズの単位</a>を取ることができます。</p> + +<p>例として、この例の {{htmlelement("p")}} 要素の最初のラインに次を適用したとします。</p> + +<pre class="brush: css notranslate">p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +}</pre> + +<p>次のようになります。</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><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> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 250) }}</p> + +<h3 id="Other_properties_worth_looking_at" name="Other_properties_worth_looking_at">その他の検討に値するプロパティ</h3> + +<p>上記のプロパティは、ウェブページ上でテキストを装飾する方法のアイデアを与えますが、使うことができるもっと多くのプロパティがあります。 ここでは最も重要なものだけを取り上げたいと思います。 上記の使い方に慣れてきたら、次のことも調べてください。</p> + +<p>フォントスタイル</p> + +<ul> + <li>{{cssxref("font-variant")}}: スモールキャップと通常の代替フォントを切り替えます。</li> + <li>{{cssxref("font-kerning")}}: フォントのカーニングオプションのオンとオフを切り替えます。</li> + <li>{{cssxref("font-feature-settings")}}: さまざまな <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> フォント機能のオンとオフを切り替えます。</li> + <li>{{cssxref("font-variant-alternates")}}: 与えられたフォントフェースのための代替グリフの使用を制御します。</li> + <li>{{cssxref("font-variant-caps")}}: 代替大文字グリフの使用を制御します。</li> + <li>{{cssxref("font-variant-east-asian")}}: 日本語や中国語など、東アジアの文字の代替グリフの使用方法を制御します。</li> + <li>{{cssxref("font-variant-ligatures")}}:テキストで使用される合字と文脈形式を制御します。</li> + <li>{{cssxref("font-variant-numeric")}}: 数字、分数、および序数記号の代替グリフの使用方法を制御します。</li> + <li>{{cssxref("font-variant-position")}}: 上付き文字または下付き文字として配置された、小さいサイズの代替グリフの使用方法を制御します。</li> + <li>{{cssxref("font-size-adjust")}}: 実際のフォントサイズとは無関係にフォントの表示サイズを調整します。</li> + <li>{{cssxref("font-stretch")}}: 与えられたフォントの可能な代替の伸縮バージョン間で切り替えます。</li> + <li>{{cssxref("text-underline-position")}}: <code>text-decoration-line</code> プロパティの <code>underline</code> 値を使用して設定された下線の位置を指定します。</li> + <li>{{cssxref("text-rendering")}}: テキストレンダリングの最適化を試します。</li> +</ul> + +<p>テキストのレイアウトスタイル</p> + +<ul> + <li>{{cssxref("text-indent")}}: テキスト内容の最初のラインの始まりの前にどれだけの水平スペースを残すべきかを指定します。</li> + <li>{{cssxref("text-overflow")}}: 表示されないオーバーフローしたコンテンツがユーザーに通知される方法を定義します。</li> + <li>{{cssxref("white-space")}}: 要素内の空白とそれに関連する改行の扱い方を定義します。</li> + <li>{{cssxref("word-break")}}: 単語内で改行するかどうかを指定します。</li> + <li>{{cssxref("direction")}}: テキストの方向を定義します（これは言語に依存します。 通常、テキストの内容に結び付けられているので、HTML にその部分を処理させる方が良いです）。</li> + <li>{{cssxref("hyphens")}}: サポートしている言語のハイフネーションをオンまたはオフにします。</li> + <li>{{cssxref("line-break")}}: アジア言語の改行を緩和または強化します。</li> + <li>{{cssxref("text-align-last")}}: ブロックの最後のラインまたは強制改行の直前のラインの配置方法を定義します。</li> + <li>{{cssxref("text-orientation")}}: ライン内での文字の向きを定義します。</li> + <li>{{cssxref("overflow-wrap")}}: オーバーフローを防ぐために、ブラウザーが単語内で改行できるかどうかを指定します。</li> + <li>{{cssxref("writing-mode")}}: テキストのラインを水平に配置するか垂直に配置するか、およびそれに続いてラインが流れる方向を定義します。</li> +</ul> + +<h2 id="Font_shorthand" name="Font_shorthand">フォントの一括指定</h2> + +<p>多くのフォントプロパティは、一括指定プロパティの {{cssxref("font")}} を介して設定することもできます。 これらは、{{cssxref("font-style")}}、{{cssxref("font-variant")}}、{{cssxref("font-weight")}}、{{cssxref("font-stretch")}}、{{cssxref("font-size")}}、{{cssxref("line-height")}}、{{cssxref("font-family")}} の順に書きます。</p> + +<p>これらすべてのプロパティのうち、<code>font</code> 一括指定プロパティを使用する場合に必要なのは、<code>font-size</code> と <code>font-family</code> のみです。</p> + +<p>{{cssxref("font-size")}} プロパティと {{cssxref("line-height")}} プロパティの間にスラッシュを入れる必要があります。</p> + +<p>完全な例は次のようになります。</p> + +<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Active_learning_Playing_with_styling_text" name="Active_learning_Playing_with_styling_text">能動的学習: テキストの装飾で遊ぶ</h2> + +<p>この能動的学習セッションでは、具体的な演習はありません。 フォントやテキストのレイアウトのプロパティをいくつか試してみて、作成できるものを確認してください！ オフラインの HTML / CSS ファイルを使用してこれを行うか、下記のライブ編集可能な例にコードを入力することができます。</p> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事のテキストで遊んで楽しんでくださいね！ 次の記事では、HTML リストの装飾について知っておくべきことをすべて説明します。</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><span class="seoSummary">CSS 言語の基本を習得したら、次に取り組むべき CSS のトピックはテキストの装飾です — これは、CSS で行う最も一般的なことの一つです。 ここでは、フォント、太字、イタリック体、ラインと文字の間隔、ドロップシャドウやその他のテキスト機能の設定を含む、テキストの装飾の基本を見ていきます。あなたのページにカスタムフォントを適用し、リストとリンクを装飾するところを見ることによって、このモジュールを締めくくります。</span></p> + +<h2 id="Prerequisites" name="Prerequisites">前提知識</h2> + +<p>このモジュールを始める前に、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>のモジュールで説明したようにすでに HTML についての基本的な知識があり、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように CSS の基本に慣れている必要があります。</p> + +<div class="note"> +<p><strong>メモ</strong>: 自分のファイルを作成できないコンピューター/タブレット/その他の端末で作業している場合、<a href="http://jsbin.com/">JSBin</a>、<a href="https://codepen.io/">CodePen</a>、<a href="https://thimble.mozilla.org/">Thimble</a> のようなオンラインコーディングプログラムで (ほとんどの) サンプルコードを試せます。</p> +</div> + +<h2 id="Guides" name="Guides">ガイド</h2> + +<p>このモジュールには以下の記事が含まれていて、HTML のテキストコンテンツの装飾の背後にあるすべての重要事項を説明しています。</p> + +<dl> + <dt><a href="/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></dt> + <dd>この記事では、フォントの太さ、ファミリーとスタイル、フォントの一括指定、テキストの配置とその他のエフェクト、ラインと文字の間隔の設定など、テキストとフォントの装飾のすべての基本について詳しく説明します。</dd> + <dt><a href="/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></dt> + <dd>リストは他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。この記事はすべてを説明しています。</dd> + <dt><a href="/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></dt> + <dd>リンクを装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。この記事では、これらすべてのトピックを見ていきます。</dd> + <dt><a href="/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></dt> + <dd>ここでは、ウェブフォントを詳しく探ります — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様でカスタムなテキストの装飾を可能にします。</dd> +</dl> + +<h2 id="Assessments" name="Assessments">評価</h2> + +<p>以下の評価では、上記のガイドで説明されているテキストの装飾のテクニックについての理解をテストします。</p> + +<dl> + <dt><a href="/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></dt> + <dd>この評価では、コミュニティスクールのホームページのテキストを装飾してもらい、テキストの装飾についての理解をテストします。</dd> +</dl> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary"><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">リンク</a>を装飾するときは、擬似クラスを使用してリンク状態を効果的に装飾する方法と、ナビゲーションメニューやタブなどの一般的なさまざまなインターフェイス機能で使用するためのリンクの装飾方法を理解することが重要です。 この記事では、これらすべてのトピックを見ていきます。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>リンク状態を装飾する方法と、ナビゲーションメニューのような一般的な UI 機能でリンクを効果的に使用する方法を学ぶこと。</td> + </tr> + </tbody> +</table> + +<h2 id="Lets_look_at_some_links" name="Let's_look_at_some_links">いくつかのリンクを見てみましょう</h2> + +<p><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ハイパーリンクの作成</a>のベストプラクティスに従って、HTML がリンクをどのように実装するかを調べました。 この記事では、この知識を基にして、リンクの装飾のためのベストプラクティスを示します。</p> + +<h3 id="Link_states" name="Link_states">リンク状態</h3> + +<p>最初に理解するべきことはリンク状態の概念です。リンクが存在できる様々な状態のことで、それらは異なる<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements">疑似クラス</a>を使って装飾することができます。</p> + +<ul> + <li><strong>リンク（未訪問）</strong>: リンクが他のどの状態にもない場合に、リンクが属するデフォルトの状態。 これは、{{cssxref(":link")}} 疑似クラスを使用して特に装飾できます。</li> + <li><strong>訪問済み</strong>: 既に訪問済み（ブラウザーの履歴に存在する）のリンクで、{{cssxref(":visited")}} 擬似クラスを使用して装飾します。</li> + <li><strong>ホバー</strong>: リンクにユーザーのマウスポインタが合わせられているときのリンクで、{{cssxref(":hover")}} 疑似クラスを使用して装飾します。</li> + <li><strong>フォーカス</strong>: フォーカスしたときのリンク（例えば、<kbd>Tab</kbd> キーなどを使用してキーボードユーザーによって移動してきたか、{{domxref("HTMLElement.focus()")}} を使用してプログラムでフォーカスした） — これは {{cssxref(":focus")}} 擬似クラスを使用して装飾します。</li> + <li><strong>アクティブ</strong>: アクティブ化している（例えばクリックされている）ときのリンクで、{{cssxref(":active")}} 疑似クラスを使用して装飾します。</li> +</ul> + +<h3 id="Default_styles" name="Default_styles">デフォルトの装飾</h3> + +<p>次の例は、リンクがデフォルトでどのようにふるまうかを示しています（CSS は、テキストをより見やすくするために、単にテキストを拡大して中央に配置しています）。</p> + +<pre class="brush: html notranslate"><p><a href="#">A simple link</a></p> +</pre> + +<pre class="brush: css notranslate">p { + font-size: 2rem; + text-align: center; +}</pre> + +<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p> + +<div class="note"> +<p><strong>注</strong>: このページの例にあるリンクはすべて偽のリンクです — <code>#</code>（ハッシュまたはポンド記号）が実際の URL の代わりに配置されています。 これは、実際のリンクが含まれている場合、それらをクリックすると例が壊れる可能性があるためです（エラーが発生したり、ロードしたページから埋め込まれた例に戻ることができません）。 <code>#</code> は現在のページにリンクしているだけです。</p> +</div> + +<p>デフォルトの装飾を調べていくうちに、次のようないくつかのことに気付くでしょう。</p> + +<ul> + <li>リンクには下線が引かれています。</li> + <li>未訪問のリンクは青です。</li> + <li>訪問済みのリンクは紫色です。</li> + <li>リンクにホバーすると、マウスポインタが小さな手のアイコンに変わります。</li> + <li>フォーカスのあるリンクの周囲にはアウトラインがあります — <kbd>Tab</kbd> キーを押すと、キーボードでこのページのリンクにフォーカスを合わせることができます（Mac では、これが機能する前に <kbd>Ctrl</kbd> + <kbd>F7</kbd> を押して<em>フルキーボードアクセス: すべてのコントロール</em>オプションを有効にする必要があるかもしれません）。</li> + <li>アクティブなリンクは赤です（リンクをクリックしながらマウスボタンを押したままにしてみてください）。</li> +</ul> + +<p>興味深いことに、これらのデフォルトの装飾は、1990年代半ばのブラウザーの初期の頃のものとほぼ同じです。 これは、ユーザーがこのふるまいを知っており、予期するようになったためです — リンクの装飾が異なると、多くの人が混乱してしまうでしょう。 これは、リンクの装飾を設定してはいけないという意味ではなく、予想されるふるまいから大きく外れてはいけないということです。 少なくとも次のことをするべきです。</p> + +<ul> + <li>リンクには下線を使用しますが、他のものには使用しません。 リンクに下線を付けたくない場合は、少なくとも他の方法でリンクをハイライトしてください。</li> + <li>ホバー/フォーカスしたときに何らかの方法で反応するようにし、アクティブ化したときには少し異なる方法で反応するようにします。</li> +</ul> + +<p>デフォルトの装飾は、次の CSS プロパティを使用してオフにしたり変更したりできます。</p> + +<ul> + <li>テキストの色は {{cssxref("color")}} です。</li> + <li>マウスポインタのスタイルは {{cssxref("cursor")}} です — 非常に良い理由がない限り、これをオフにしないでください。</li> + <li>テキストのアウトラインは {{cssxref("outline")}} です（アウトラインは境界線に似ていますが、唯一の違いは、境界線はボックス内のスペースを占めますが、アウトラインは占めずに背景の上にあるだけだということです）。 このアウトラインは、アクセシビリティを向上させるのに役立つので、オフにする前に慎重に検討してください。 フォーカス状態でリンクホバー状態に与えられた装飾を少なくとも2倍にするべきです。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: リンクの装飾は上記のプロパティに制限されているわけではありません — 好きなプロパティを自由に使用できます。 夢中になりすぎないようにしてください！</p> +</div> + +<h3 id="Styling_some_links" name="Styling_some_links">いくつかのリンクを装飾する</h3> + +<p>デフォルトの状態を少し詳しく見てきたので、典型的なリンクの装飾のセットを見てみましょう。</p> + +<p>まず始めに、空の規則セットを書き出します。</p> + +<pre class="brush: css notranslate">a { + +} + + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</pre> + +<p>リンクのスタイルは互いに重なっているため、この順序は重要です。 例えば、最初の規則の装飾は、それ以降のすべての規則に適用され、リンクがアクティブになっているときは、ホバーもしています。 これらを間違った順序で並べると、物事は適切に機能しません。 順番を覚えておくには、<strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te のようなニーモニックを使用してみてください。</p> + +<p>それでは、これを適切に装飾するための情報を追加しましょう。</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>CSS を適用するためのサンプル HTML も提供します。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>2つをまとめると、この結果が得られます。</p> + +<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p> + +<p>それでは、ここで何をしたでしょうか？ これは確かにデフォルトの装飾とは異なるように見えますが、それでもユーザーに何が起こっているのかを知るための十分な身近な経験を提供します。</p> + +<ul> + <li>最初の2つの規則は、この説明にとってそれほど興味深いものではありません。</li> + <li>3番目の規則は <code>a</code> セレクタを使ってデフォルトのテキストのアンダーラインとフォーカスのアウトライン（とにかくブラウザーによって異なります）を取り除き、各リンクに少量のパディングを追加します — これらすべては後で明らかになります。</li> + <li>次に、<code>a:link</code> セレクタと <code>a:visited</code> セレクタを使用して、未訪問リンクと訪問済みリンクに2つのカラーバリエーションを設定して区別します。</li> + <li>次の2つの規則では、<code>a:focus</code> と <code>a:hover</code> を使用して、フォーカスされたリンクとホバーされたリンクを異なる背景色に設定し、さらにリンクを目立たせるために下線を使用します。 ここで注意すべき2つの点があります。 + <ul> + <li>下線は {{cssxref("text-decoration")}} ではなく、 {{cssxref("border-bottom")}} を使用して作成されています — 前者よりも後者の方が装飾オプションが優れていて、少し下に描かれるので下線が引かれている単語のディセンダ（例えば、g と y で x より下に出ている部分）を横切ることがないため、一部の人々はこれを好みます。</li> + <li>{{cssxref("border-bottom")}} の値は、色を指定せずに <code>1px solid</code> として設定しています。 こうすると、境界線は要素のテキストと同じ色になります。 これは、テキストがそれぞれ異なる色であるような場合に役立ちます。</li> + </ul> + </li> + <li>最後に、<code>a:active</code> は、リンクがアクティブになっている間に反転配色を与えるために使用され、重要なことが起こっていることを明確にします！</li> +</ul> + +<h3 id="Active_learning_Style_your_own_links" name="Active_learning_Style_your_own_links">能動的学習: あなた自身のリンクを装飾する</h3> + +<p>この能動的学習セッションでは、空の規則のセットにあなた自身の宣言を追加してリンクを本当にかっこよく見せてください。 想像力を駆使して、ワイルドに。 上記の例と同じように、よりかっこよく機能的なものを思いつくことができると確信しています。</p> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。 本当に立ち往生してしまったら、上に示した例を挿入するために <em>Show solution</em> ボタンを押してください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><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></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Including_icons_on_links" name="Including_icons_on_links">リンクにアイコンを含める</h2> + +<p>一般的なやり方は、リンクがどの種類のコンテンツを指しているかに関するより多くの標識を提供するためにリンクにアイコンを含めることです。 外部リンク（他のサイトにつながるリンク）にアイコンを追加する、本当に簡単な例を見てみましょう。 このようなアイコンは、通常、ボックスから出る小さな矢印のように見えます — この例では、<a href="https://icons8.jp/icon/741/external-link">icons8.com からの素晴らしい例</a>を使います。</p> + +<p>欲しい効果が得られる HTML と CSS を見てみましょう。 まず、装飾する簡単な HTML です。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>次に、CSS です。</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p> + +<p>それでは、ここで何が起こっているのでしょうか？ これまで見てきたのと同じ情報なので、CSS の大部分はスキップします。 しかし最後の規則は興味深いです — ここでは前回の記事の<a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists#Using_a_custom_bullet_image">リストアイテムのカスタム行頭記号</a>を処理したのと同じ方法で外部リンクにカスタム背景画像を挿入しています — 今回は個々のプロパティの代わりに {{cssxref("background")}} の一括指定を使用します。 挿入したい画像へのパスを設定し、<code>no-repeat</code> を指定してコピーを1つだけ挿入するようにしてから、テキストコンテンツの右側へ 100%、上から 0 ピクセルの位置を指定します。</p> + +<p>また、{{cssxref("background-size")}} を使用して、背景画像を表示するサイズを指定します。 レスポンシブウェブデザインの目的に合わせて、アイコンを大きくしておいて、このようにサイズを変更すると便利です。 ただし、これは IE 9 以降でのみ機能するため、これらの古いブラウザーをサポートする必要がある場合は、画像のサイズを変更しておいて、それをそのまま挿入する必要があります。</p> + +<p>最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。</p> + +<p>最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたが<a href="/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML リンク</a>を適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト "http" は（2番目と3番目のリンクのように）外部リンクにのみ現れ、これを<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクタ</a>で選択できます。 <code>a[href*="http"]</code> は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ {{htmlattrxref("href","a")}} 属性がある場合に限ります。</p> + +<p>それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！</p> + +<div class="note"> +<p><strong>注</strong>: <a href="/ja/docs/Learn/CSS/Styling_boxes">背景</a>や<a href="/ja/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">レスポンシブウェブデザイン</a>にまだ慣れていなくても心配しないでください。 これらは他の場所で説明されています。</p> +</div> + +<h2 id="Styling_links_as_buttons" name="Styling_links_as_buttons">ボタンとしてのリンクの装飾</h2> + +<p>この記事でこれまでに説明したツールは、他の方法でも使用できます。 例えば、ホバーのような状態は、リンクだけでなく、さまざまな要素を装飾するために使用できます — 段落、リスト項目、またはその他のもののホバー状態を装飾することができます。</p> + +<p>さらに、リンクは特定の状況下ではボタンのように見えて、そうふるまうように装飾されているのが普通です — ウェブサイトのナビゲーションメニューは通常リンクを含むリストとしてマークアップれており、ユーザーがサイトの他の部分にアクセスできるようにする一連のコントロールボタンやタブのように簡単にスタイル設定できます。 その方法を探りましょう。</p> + +<p>まず、いくつかの HTML です。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>そして CSS です。</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>これにより、次のような結果が得られます。</p> + +<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p> + +<p>最も興味深い部分に焦点を当てて、ここで何が起こっているのかを説明しましょう。</p> + +<ul> + <li>2番目の規則は、{{htmlelement("ul")}} 要素からデフォルトの {{cssxref("padding")}} を削除し、その幅を外側のコンテナ（この場合は {{htmlelement("body")}}）の 100% になるように設定します。</li> + <li>{{htmlelement("li")}} 要素は通常デフォルトでブロックです（復習のために <a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS ボックスの種類</a>を参照してください）。 つまり、要素はそれぞれ自身のラインに配置されます。 この場合、水平方向のリンクのリストを作成しているので、3番目の規則で {{cssxref("display")}} プロパティを <code>inline</code> に設定します。 これにより、リスト項目は互いに同じラインに配置されます — それらはインライン要素のようにふるまいます。</li> + <li>{{htmlelement("a")}} 要素を装飾する4番目の規則は、ここで最も複雑です。 ステップバイステップで進みましょう。 + <ul> + <li>前の例と同様に、デフォルトの {{cssxref("text-decoration")}} と {{cssxref("outline")}} をオフにすることから始めます — 見た目を損なうものは欲しくありません。</li> + <li>次に、{{cssxref("display")}} を <code>inline-block</code> に設定します — {{htmlelement("a")}} 要素はデフォルトではインラインですが、ブロックのように、要素を自身のラインからこぼさずに、サイズを変更できるようにしたいのです。 <code>inline-block</code> はこれを可能にします。</li> + <li>これからサイズを設定します！ {{htmlelement("ul")}} の全幅を埋め、各ボタンの間には少しマージンを残して（ただし、右端には隙間はありません）、5つのボタンを配置します。 それらはすべて同じサイズでなければなりません。 これを行うには、{{cssxref("width")}} を 19.5% に設定し、{{cssxref("margin-right")}} を 0.625% に設定します。この幅の合計が 100.625% になることに気付くでしょう。 これは最後のボタンが <code><ul></code> をオーバーフローさせ、次のラインに落ちることになります。 ただし、次の規則を使用してリストの最後の <code><a></code> のみを選択し、そこからマージンを削除して、100% に戻します。 これで完了です！</li> + <li>最後の3つの宣言は非常に単純で、主に見た目を目的としています。 各リンク内のテキストを中央揃えにし、ボタンの高さ設定するために {{cssxref("line-height")}} を 3 に設定し（テキストを垂直方向に中央揃えする利点もあります）、テキストの色を黒に設定します。</li> + </ul> + </li> +</ul> + +<div class="note"> +<p><strong>注</strong>: HTML 内のリスト項目がすべて一行に記述されていることに気付いたかもしれません。インラインブロック要素間のスペースや改行は、単語間のスペースと同様にページにスペースを作成します。 そして、そのようなスペースは水平ナビゲーションメニューのレイアウトを壊すでしょう。だからスペースを取り除きました。この問題（と、その解決方法）についての詳細は、<a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">インラインブロック要素間のスペースの戦い</a>（英語）で見つけることができます。</p> +</div> + +<h2 id="Summary" name="Summary">あなたのスキルをテストしてみてください!</h2> + +<p>あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？この情報を保持しているかどうかを確認するためのアセスメントがモジュールの最後にあります。<a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a>を参照してください。</p> + +<p>この評価ではこのモジュールで説明されているすべての知識をテストしますので、次に進む前に次の記事を読んだほうがいいかもしれません。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>この記事が、リンクについて知っておく必要があるすべての情報を提供してくれることを願っています — 今のところは！ テキストの装飾モジュールの最後の記事では、ウェブサイトでのカスタムフォントの使用方法や、ウェブフォントの使用方法について詳しく説明しています。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary"><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">リスト</a>は他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>リストの装飾に関連するベストプラクティスとプロパティに慣れること。</td> + </tr> + </tbody> +</table> + +<h2 id="A_simple_list_example" name="A_simple_list_example">簡単なリストの例</h2> + +<p>はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">装飾していない例</a>は Github にあります（<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">ソースコード</a>もチェックしてください）。</p> + +<p>そのリストの例の HTML はこんな感じです。</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>ここで実際の例に行き、<a href="/ja/docs/Learn/Common_questions/What_are_browser_developer_tools">ブラウザー開発者ツール</a>を使用してリスト要素を調べると、次のようないくつかの装飾のデフォルト設定に気付くでしょう。</p> + +<ul> + <li>{{htmlelement("ul")}} 要素と {{htmlelement("ol")}} 要素の上下の {{cssxref("margin")}} は <code>16px</code>（<code>1em</code>）、{{cssxref("padding-left")}} は <code>40px</code>（<code>2.5em</code>）です。</li> + <li>リスト項目（{{htmlelement("li")}} 要素）には、間隔の設定に関するデフォルトはありません。</li> + <li>{{htmlelement("dl")}} 要素の上下の {{cssxref("margin")}} は <code>16px</code>（<code>1em</code>）ですが、パディングの設定はありません。</li> + <li>{{htmlelement("dd")}} 要素の {{cssxref("margin-left")}} は <code>40px</code>（<code>2.5em</code>）です。</li> + <li>参照用に含めた {{htmlelement("p")}} 要素には、さまざまな種類のリストと同じ <code>16px</code>（<code>1em</code>）の上下の {{cssxref("margin")}} があります。</li> +</ul> + +<h2 id="Handling_list_spacing" name="Handling_list_spacing">リストの間隔の取り扱い</h2> + +<p>リストを装飾するときは、（段落や画像などの）周囲の要素と同じ垂直方向の間隔（バーティカルリズム（vertical rhythm）とも呼ばれる）と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります（Github で<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">完成した装飾した例</a>を見ることができ、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">ソースコード</a>も見つけることができます）。</p> + +<p>テキストの装飾と間隔調整に使用する CSS は次のとおりです。</p> + +<pre class="brush: css notranslate">/* 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; +}</pre> + +<ul> + <li>規則1はサイト全体のフォントと <code>10px</code> の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。</li> + <li>規則2と3では、見出し、さまざまなリストの種類（リスト要素の子はこれらを継承）、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。</li> + <li>規則4では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。</li> + <li>説明リストには規則5と6が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ <code>line-height</code> を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="List-specific_styles" name="List-specific_styles">リスト固有の装飾</h2> + +<p>リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき3つのプロパティがあり、それらは {{htmlelement("ul")}} や {{htmlelement("ol")}} 要素に設定できます。</p> + +<ul> + <li>{{cssxref("list-style-type")}}: リストに使用する行頭記号の種類を設定します。 例えば、順序なしリストの場合は正方形や丸の行頭記号、順序付きリストの場合は数字、文字、ローマ数字などです。</li> + <li>{{cssxref("list-style-position")}}: 行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。</li> + <li>{{cssxref("list-style-image")}}: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。</li> +</ul> + +<h3 id="Bullet_styles" name="Bullet_styles">行頭記号の装飾</h3> + +<p>前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号（bullet point）に使用する行頭記号（bullet）の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; +}</pre> + +<p>これにより、次のようになります。</p> + +<p><img alt="行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。" src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>{{cssxref("list-style-type")}} のリファレンスページをチェックすることで、もっとたくさんのオプションを見つけることができます。</p> + +<h3 id="Bullet_position" name="Bullet_position">行頭記号の位置</h3> + +<p>{{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 デフォルト値は <code>outside</code> です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。</p> + +<p>値を <code>inside</code> に設定すると、行頭記号をラインの内側に配置します。</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。" src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="Using_a_custom_bullet_image" name="Using_a_custom_bullet_image">カスタム行頭記号画像の使用</h3> + +<p>{{cssxref("list-style-image")}} プロパティを使用すると、行頭記号にカスタム画像を使用できます。 構文は次のようにとても簡単です。</p> + +<pre class="brush: css notranslate">ul { + list-style-image: url(star.svg); +}</pre> + +<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>モジュールで詳しく説明します。 今のところ、これは味見です！</p> + +<p>完成した例では、（既に上で見たものの上に）次のように順序なしリストを装飾しました。</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p>ここでは次のことを行いました。</p> + +<ul> + <li> {{htmlelement("ul")}} の {{cssxref("padding-left")}} をデフォルトの <code>40px</code> から <code>20px</code> に減らし、リスト項目にも同じ量を設定します。 これにより、リスト項目は全体的にはまだ順序リスト項目や説明リストの説明文が並んでいますが、リスト項目には背景画像が入るように多少のパディングが入っています。これをしないと、背景画像がリスト項目のテキストと重なってしまい、見た目がごちゃごちゃしてしまいます。</li> + <li>デフォルトで行頭記号が表示されないように、{{cssxref("list-style-type")}} を <code>none</code> に設定します。 代わりに、行頭記号を処理するために {{cssxref("background")}} プロパティを使用します。</li> + <li>各順序なしリスト項目に行頭記号を挿入しました。 関連するプロパティは次のとおりです。 + <ul> + <li>{{cssxref("background-image")}}: 行頭記号として使用する画像ファイルへのパスを参照します。</li> + <li>{{cssxref("background-position")}}: これは選択した要素の背景のどこに画像を表示するかを定義します。 この場合は <code>0 0</code> としています。 つまり、各リスト項目の左上に行頭記号が表示されます。</li> + <li>{{cssxref("background-size")}}: 背景画像のサイズを設定します。 行頭記号のサイズをリスト項目と同じサイズ（または、ごくわずかに大きいか小さい）にすることをお勧めします。 サイズは <code>1.6rem</code>（<code>16px</code>）を使用しています。 これは、行頭記号を内部に配置できる <code>20px</code> のパディングに非常によく合っています — 行頭記号とリスト項目のテキストの間に 16px + 4px のスペースがあるとうまくいきます。</li> + <li>{{cssxref("background-repeat")}}: デフォルトでは、背景画像は利用可能な背景スペースを埋めつくすまで繰り返します。 それぞれの場合に画像のコピーを1つだけ挿入したいので、これを <code>no-repeat</code> の値に設定します。</li> + </ul> + </li> +</ul> + +<p>これにより、次のような結果が得られます。</p> + +<p><img alt="行頭記号が小さな星の画像として設定された順序なしリスト" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="list-style_shorthand" name="list-style_shorthand">list-style 一括指定</h3> + +<p>上記の3つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、</p> + +<pre class="brush: css notranslate">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>これに置き換えることができます。</p> + +<pre class="brush: css notranslate">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>値は任意の順序でリストすることができ、1つ、2つ、または3つすべてを使用できます（含まれていないプロパティーに使用されるデフォルト値は <code>disc</code>、<code>none</code>、<code>outside</code> です）。 <code>type</code> と <code>image</code> の両方が指定されている場合、画像が何らかの理由でロードできない場合に、<code>type</code> を代替として使用します。</p> + +<h2 id="Controlling_list_counting" name="Controlling_list_counting">リストの数え方の制御</h2> + +<p>場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。</p> + +<h3 id="start" name="start">start</h3> + +<p>{{htmlattrxref("start","ol")}} 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>この出力を与えます。</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed" name="reversed">reversed</h3> + +<p>{{htmlattrxref("reversed","ol")}} 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>この出力を与えます。</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<div class="note"> +<p><strong>注</strong>: 逆方向のリストに <code>start</code> 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。</p> +</div> + +<h3 id="value" name="value">value</h3> + +<p>{{htmlattrxref("value","li")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、</p> + +<pre class="brush: html notranslate"><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></pre> + +<p>この出力を与えます。</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p>注: 非数値の {{cssxref("list-style-type")}} を使用している場合でも、<code>value</code> 属性に同等の数値を使用する必要があります。</p> +</div> + +<h2 id="Active_learning_Styling_a_nested_list" name="Active_learning_Styling_a_nested_list">能動的学習: ネストしたリストの装飾</h2> + +<p>この能動的学習セッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。</p> + +<ol> + <li>順序なしリストに正方形の行頭記号を付けます。</li> + <li>順序なしリスト項目と順序付きリスト項目のフォントサイズの 1.5 のラインの高さを指定します。</li> + <li>順序付きリストに小文字のアルファベットの行頭記号を付けます。</li> + <li>行頭記号の種類、間隔、その他見つけられるものは何でも試して、好きなだけリストの例を試してみてください。</li> +</ol> + +<p>間違えた場合は、<em>Reset</em> ボタンを使用していつでもリセットできます。 本当に立ち往生したら、答えを見るために <em>Show solution</em> ボタンを押してください。</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<p>CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> 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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">この評価では、コミュニティスクールのホームページ用にテキストを装飾することで、このモジュール全体でカバーしてきたすべてのテキスト装飾テクニックについての理解をテストします。 途中で楽しい時間があるかもしれません。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>CSS テキスト装飾テクニックの理解をテストすること。</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point" name="Starting_point">出発点</h2> + +<p>この評価を開始するには、次のことが必要です。</p> + +<ul> + <li>練習用の <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> ファイルと、提供されている<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">外部リンクアイコン</a>を入手してください。</li> + <li>ローカルコンピュータにそれらのコピーを作成します。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: あるいは、<a class="external external-icon" href="http://jsbin.com/">JSBin</a> や <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> などのサイトを使って評価することもできます。 HTML を貼り付けて CSS をこれらのオンラインエディタのいずれかに入力し、<a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">この URL</a> を使用して背景画像を指定することができます。 使用しているオンラインエディタに別の CSS パネルがない場合は、それをドキュメントの先頭の <code><style></code> 要素に自由に配置してください。</p> +</div> + +<h2 id="Project_brief" name="Project_brief">プロジェクトの概要</h2> + +<p>架空のコミュニティカレッジのホームページ用の生の HTML と、ページを2列のレイアウトに装飾し、その他の基本的な装飾をする CSS が提供されています。 CSS ファイルの最後にあるコメントの下に CSS の追加部分を書いて、あなたが行った部分に簡単に印を付けることができるようにします。 一部のセレクタがくどくても心配しないで、この場合は見逃してください。</p> + +<p>フォント</p> + +<ul> + <li>まずはじめに、いくつかの自由に使えるフォントをダウンロードしてください。 これはカレッジですから、フォントはかなり真面目で、形式的で、信頼できる感じをページに与えるために選ばれるべきです — 一般的なテキスト本文のためのサイト全体の serif フォントに、見出しのための sans-serif または slab serif を組み合わせるといいかもしれません。</li> + <li>適切なサービスを使用して、これら2つのフォント用の bulletproof <code>@font-face</code> コードを生成してください。</li> + <li>本文フォントをページ全体に適用し、見出しフォントを見出しに適用します。</li> +</ul> + +<p>一般的なテキスト装飾</p> + +<ul> + <li>サイト全体の <code>font-size </code>を <code>10px</code> にします。</li> + <li>見出しや他の要素タイプには、適切な相対単位を使用して定義された適切な <code>font-size</code> を与えます。</li> + <li>本文に適切な <code>line-height</code> を与えます。</li> + <li>トップレベルの見出しをページの中央に配置します。</li> + <li>見出しをあまりにも押しつぶしすぎないようにし、文字が少し呼吸できるようにするために、見出しに少し <code>letter-spacing</code> を与えます。</li> + <li>必要に応じて、本文に <code>letter-spacing</code> と <code>word-spacing</code> を与えます。</li> + <li><code><section></code> の各見出しの後の最初の段落に、<code>20px</code> で、少し <code>text-indent</code> を与えます。</li> +</ul> + +<p>リンク</p> + +<ul> + <li>ページの上部と下部にある水平バーの色に合わせて、リンクに訪問、フォーカス、ホバーの状態を設定します。</li> + <li>デフォルトでリンクに下線が引かれますが、ホバーするかフォーカスを合わせると下線が消えるようにします。</li> + <li>ページ上のすべてのリンクからデフォルトのフォーカスアウトラインを取り除きます。</li> + <li>目立つようにアクティブな状態に著しく異なるスタイルを与えますが、それでも全体的なページデザインに収まるようにします。</li> + <li>外部リンクの隣に外部リンクアイコンが挿入されるようにします。</li> +</ul> + +<p>リスト</p> + +<ul> + <li>リストとリスト項目の間隔が、ページ全体のスタイルとうまく一致するようにしてください。 各リスト項目は段落行と同じ <code>line-height</code> を持ち、各リストの上下の段落の間隔は同じです。</li> + <li>リスト項目に、ページのデザインにふさわしい素敵な行頭記号を付けてください。 カスタムの行頭記号画像を選択するか、それ以外のものを選択するかは、あなた次第です。</li> +</ul> + +<p>ナビゲーションメニュー</p> + +<ul> + <li>ページのルックアンドフィールが適切になるようにナビゲーションメニューを装飾します。</li> +</ul> + +<h2 id="Hints_and_tips" name="Hints_and_tips">ヒントとコツ</h2> + +<ul> + <li>この演習では、HTML を編集する必要はまったくありません。</li> + <li>ナビゲーションメニューを必ずしもボタンのように見せる必要はありませんが、ページの横に愚かに見えないように少し高くする必要があります。 また、これを垂直ナビゲーションメニューにする必要があることも忘れないでください。</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<p>次のスクリーンショットは、完成したデザインの外観の例です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="Assessment" name="Assessment">評価</h2> + +<p>組織的コースの一環としてこの評価に従っている場合は、採点のために作品を教師や指導者に渡すことができるはずです。 自己学習をしている場合は、<a href="https://discourse.mozilla.org/t/typesetting-a-community-school-home-page-assessment/24683">この演習についてのディスカッションスレッド</a>や <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC チャンネルで尋ねることで、かなり簡単に採点の手引きを得ることができます。 まず演習を試してみてください — 不正行為によって得られるものは何もありません！</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> + +<p> </p> + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> + +<p> </p> 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..d96b610029 --- /dev/null +++ b/files/ja/learn/css/styling_text/ウェブフォント/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">このモジュールの最初の記事では、フォントとテキストの装飾に使用できる基本的な CSS 機能について調べました。 この記事では、ウェブフォントの詳細を調べながら、さらに進みます — これらを使用すると、ウェブページと一緒にカスタムフォントをダウンロードすることを可能にして、より多様なカスタムテキストの装飾を可能にします。</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">前提知識:</th> + <td>基本的なコンピューターリテラシー、HTML の基本（<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ）、CSS の基本（<a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>を学ぶ）、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td> + </tr> + <tr> + <th scope="row">学習目標:</th> + <td>サードパーティのサービスを使用するか、独自のコードを作成することによって、ウェブフォントをウェブページに適用する方法を習得する。</td> + </tr> + </tbody> +</table> + +<h2 id="Font_families_recap" name="Font_families_recap">フォントファミリーの復習</h2> + +<p><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a>で見たように、HTML に適用されるフォントは {{cssxref("font-family")}} プロパティを使って制御できます。 これは1つ以上のフォントファミリー名を取り、ブラウザーはそれが実行されているシステムで利用可能なフォントを見つけるまでリストを順にたどります。</p> + +<pre class="brush: css notranslate">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>このシステムはうまく機能しますが、伝統的にウェブ開発者のフォント選択は限られていました。 一般的なすべてのシステムで利用できることを保証できるフォントは、ほんの一握りです — いわゆる<a href="/ja/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">ウェブセーフフォント</a>です。 フォントスタックを使用して希望するフォントを指定し、その後にウェブセーフの代替フォントを指定してからデフォルトのシステムフォントを指定することができますが、これはデザインが各フォントなどでうまく見えることを確認するためにテストの面でオーバーヘッドを追加します。（訳注：日本語フォントを英語フォントの後、デフォルトフォントの前に指定すれば、英語部分だけ英語フォントにすることができます。 つまり、英語フォントだけの指定であっても、日本語環境なら、日本語には日本語のデフォルトフォントが使われるということです。 中国語環境なら、中国語の漢字が使われることでしょう。）</p> + +<h2 id="Web_fonts" name="Web_fonts">ウェブフォント</h2> + +<p>しかし、IE バージョン 6 でも非常にうまく動作する代替手段があります。 ウェブフォントは、ウェブサイトにアクセスした時に一緒にダウンロードするフォントファイルを指定できる CSS の機能です。 つまり、ウェブフォントをサポートするブラウザーであれば、指定したフォントをそのまま使用できることを意味しています。 すばらしい！ 必要な構文は次のようになります。</p> + +<p>まず最初に、CSS の先頭に {{cssxref("@font-face")}} ブロックがあり、ダウンロードするフォントファイルを指定します。</p> + +<pre class="brush: css notranslate">@font-face { + font-family: "myFont"; + src: url("myFont.woff"); +}</pre> + +<p>これより下では、<code>@font-face</code> の中で指定されているフォントファミリー名を使ってカスタムフォントを通常通り好きなものに適用できます。</p> + +<pre class="brush: css notranslate">html { + font-family: "myFont", "Bitstream Vera Serif", serif; +}</pre> + +<p>構文はこれより少し複雑になります。 以下で詳しく説明します。</p> + +<p>ウェブフォントに関して留意すべき重要な点が2つあります。</p> + +<ol> + <li>ブラウザーはさまざまなフォント形式をサポートしているため、適切なクロスブラウザーをサポートするには複数のフォント形式が必要になります。 例えば、最近のほとんどのブラウザーは最も効率的な形式である WOFF / WOFF2（Web Open Font Format バージョン 1 および 2）をサポートしていますが、古いバージョンの IE は EOT（Embedded Open Type）フォントしかサポートしていないし、古いバージョンの iPhone や Android のブラウザーをサポートするには、SVG 版のフォントを含める必要があるかもしれません。 必要なコードの生成方法を下の方で示します。</li> + <li>フォントは一般に自由に使用できません。 それらの代金を払わなければなりません、そして/またはコードの中で（またはサイトで）フォント作成者のクレジット表示のような他のライセンス条件に従わなければなりません。 フォントを盗み、適切なクレジットを与えずに使用するべきではありません。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: テクノロジーとしてのウェブフォントは、バージョン 4 以降の Internet Explorer でサポートされています！</p> +</div> + +<h2 id="Active_learning_A_web_font_example" name="Active_learning_A_web_font_example">能動的学習: ウェブフォントの例</h2> + +<p>この点を考慮して、最初の原則から基本的なウェブフォントの例を作り上げましょう。 埋め込まれたライブの例を使用してこれをデモすることは困難なので、代わりに、以下のセクションで詳述されている手順に従うことでプロセスを理解してください。</p> + +<p>コードを追加するための出発点として、<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> ファイルと <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> ファイルを使用する必要があります（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">ライブの例</a>を見る）。 ここで、これらのファイルのコピーをコンピュータの新しいディレクトリに作成します。 <code>web-font-start.css</code> ファイルには、この例の基本的なレイアウトと組版を処理するための最小限の CSS がいくつかあります。</p> + +<h3 id="Finding_fonts" name="Finding_fonts">フォントを探す</h3> + +<p>この例では、見出し用と本文テキスト用の2つのウェブフォントを使用します。 まず最初に、フォントを含むフォントファイルを見つける必要があります。 フォントはフォント製造元によって作成され、さまざまなファイル形式で保存されます。 フォントを入手できるサイトは、一般的に3種類あります。</p> + +<ul> + <li>無料フォント配布会社: これは無料フォントをダウンロードできるサイトです（フォント作成者へのクレジット表示などのライセンス条件が他にあるかもしれません）。 例としては、<a href="https://www.fontsquirrel.com/">Font Squirrel</a>、<a href="http://www.dafont.com/">dafont</a>、<a href="https://everythingfonts.com/">Everything Fonts</a> などがあります。</li> + <li>有料フォント配布会社: これは、<a href="http://www.fonts.com/">fonts.com</a> や <a href="http://www.myfonts.com/">myfonts.com</a> など、フォントを有料で利用できるようにするサイトです。 <a href="https://www.linotype.com/">Linotype</a>、<a href="http://www.monotype.com">Monotype</a>、<a href="http://www.exljbris.com/">Exljbris</a> などのフォント製造元から直接フォントを購入することもできます。</li> + <li>オンラインフォントサービス: これはあなたに代わってフォントを保存し提供するサイトで、全体のプロセスをより簡単にします。 詳細については、{{anch("Using an online font service","オンラインフォントサービスの使用")}}のセクションを参照してください。</li> +</ul> + +<p>いくつかのフォントを見つけましょう！ <a href="https://www.fontsquirrel.com/">Font Squirrel</a> に行き、2つのフォントを選択します — 見出しには素敵で面白いフォント（多分素敵な display や slab serif フォント）、段落にはやや派手で読みやすいフォントです。 各フォントが見つかったら、download（ダウンロード）ボタンを押して、先ほど保存した HTML ファイルと CSS ファイルと同じディレクトリ内にファイルを保存します。 TTF（True Type Fonts）か OTF（Open Type Fonts）かは関係ありません。</p> + +<p>いずれの場合も、フォントパッケージを解凍します（ウェブフォントは通常、フォントファイルとライセンス情報を含む ZIP ファイルで配布されます）。 パッケージの中に複数のフォントファイルを見つけるかもしれません — 例えば、thin（細字）、medium（中字）、bold（太字）、italic（イタリック）、thin italic（細字イタリック）など、利用可能なさまざまな異形（variant）を持つファミリーとして配布されるフォントがあります。 この例では、それぞれの選択に対して 1つのフォントファイルを使用することを考慮してください。</p> + +<div class="note"> +<p><strong>注</strong>: 右側の列の "Find fonts"（フォントの検索）セクションで、さまざまな tags（タグ）や classifications（分類）をクリックして表示された選択肢を絞り込むことができます。 （訳注：残念なことに現在のところ日本語フォントはないようです。）</p> +</div> + +<h3 id="Generating_the_required_code" name="Generating_the_required_code">必要なコードの生成</h3> + +<p>今、必要なコード（そしてフォント形式）を生成する必要があります。 フォントごとに、次の手順に従います。</p> + +<ol> + <li>商用やウェブのプロジェクトでこれを使用する場合は、ライセンス要件をすべて満たしていることを確認してください。</li> + <li>Font Squirrel の <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>（ウェブフォントジェネレータ）に行きます。</li> + <li><em>Upload Fonts</em>（フォントのアップロード）ボタンを使って2つのフォントファイルをアップロードします。</li> + <li>"Yes, the fonts I'm uploading are legally eligible for web embedding." （はい、アップロードしたフォントはウェブの埋め込みに法的に適格です。）というチェックボックスをオンにします。</li> + <li><em>Download your kit</em>（キットをダウンロードする）をクリックします。</li> +</ol> + +<p>ジェネレータの処理が完了したら、ZIP ファイルをダウンロードする必要があります — それを HTML と CSS と同じディレクトリに保存してください。</p> + +<h3 id="Implementing_the_code_in_your_demo" name="Implementing_the_code_in_your_demo">デモでのコードの実装</h3> + +<p>この時点で、生成したばかりのウェブフォントのキットを解凍します。 解凍したディレクトリ内には、3つの便利なアイテムがあります。</p> + +<ul> + <li>各フォントの複数のバージョン: （例えば、<code>.ttf</code>、<code>.woff</code>、<code>.woff2</code> などで、ブラウザーのサポート要件が変わると、提供される正確なフォントも次第に更新されます）。 上記のように、クロスブラウザーをサポートするには複数のフォントが必要です — これが、必要なものがすべて揃っていることを確認するための Font Squirrel の方法です。</li> + <li>各フォントのデモ HTML ファイル: ブラウザーにこれらをロードして、フォントがさまざまな使用状況でどのように見えるかを確認します。</li> + <li><code>stylesheet.css</code> ファイル: 生成された <code>@font-face</code> コードが含まれています。</li> +</ul> + +<p>デモにこれらのフォントを実装するには、次の手順に従います。</p> + +<ol> + <li>解凍したディレクトリの名前を <code>fonts</code> のように簡単でシンプルなものに変更します。</li> + <li><code>stylesheet.css</code> ファイルを開き、その中に含まれている両方の <code>@font-face</code> ブロックを <code>web-font-start.css</code> ファイルにコピーします — フォントはサイトで使用する前にインポートする必要があるため、CSS のどれよりも前の一番上に配置する必要があります。</li> + <li>各 <code>url()</code> 関数は CSS にインポートしたいフォントファイルを指しています — ファイルへのパスが正しいことを確認する必要があるので、各パスの先頭に <code>fonts/</code> を追加します（必要に応じて調整します）。</li> + <li>これで、ウェブセーフフォントやデフォルトのシステムフォントと同じように、これらのフォントをフォントスタックで使用できます。 例えば、 + <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>いくつかの素敵なフォントが実装されたデモページができあがるはずです。異なるフォントは異なるサイズで作成されるため、サイズや間隔などを調整して、ルック・アンド・フィールを調整する必要があります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>注</strong>: これがうまくいかない場合は、あなたのバージョンと完成したファイルとを比較してみてください — <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> と <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> を見てください（<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">完成した例をライブで実行してください</a>）。</p> +</div> + +<h2 id="Using_an_online_font_service" name="Using_an_online_font_service">オンラインフォントサービスの使用</h2> + +<p>オンラインフォントサービスは一般的にあなたのためにフォントを保存して提供するので、<code>@font-face</code> コードを書くことを心配する必要はなく、一般的にサイトに1行か2行の単純なコードを挿入するだけですべてがうまくいきます。例としては、<a href="https://fonts.adobe.com/">Adobe Fonts</a> や <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a> などが挙げられます。これらのサービスのほとんどはサブスクリプションベースですが、特に迅速なテスト作業やデモを書くのに便利な無料のサービスである <a href="https://www.google.com/fonts">Google Fonts</a> は例外です。</p> + +<p>これらのサービスのほとんどは使いやすいので、詳細には説明しません。 Google のフォントを簡単に見てみましょう。 そうすれば、アイデアを得ることができます。 ここでも、出発点として <code>web-font-start.html</code> と <code>web-font-start.css</code> のコピーを使用してください。</p> + +<ol> + <li><a href="https://www.google.com/fonts">Google Fonts</a> に行きます。</li> + <li>左側のフィルタを使って、選択したいフォントの種類を表示し、好きなフォントをいくつか選択します。 （訳注：Languages（言語）に Japanese（日本語）を選んでも、中国語のフォントも表示されます。 フォントによっては、存在しない文字があるようなので注意しましょう。 日本語環境なら文字は表示されますが、書体の統一感はなくなってしまいます。）</li> + <li>フォントファミリーを選択するには、その横にある ⊕ ボタンを押します。</li> + <li>フォントファミリーを選択したら、ページ下部の <em>[選択数] Families Selected</em> バーを押します。</li> + <li>表示された画面で、最初に表示された HTML コードの行をコピーして、それを HTML ファイルの先頭に貼り付ける必要があります。 フォントを CSS で使用する前にインポートされるように、既存の {{htmlelement("link")}} 要素の上に配置します。 （訳注：{{cssxref("@import")}} を選択すれば、CSS ファイルに貼り付けることもできます。）</li> + <li>次に、カスタムフォントを HTML に適用するために、リストされている CSS 宣言を必要に応じて CSS にコピーする必要があります。</li> +</ol> + +<div class="note"> +<p><strong>注</strong>: あなたの作品を私たちの作品と照合する必要がある場合は、完成版を <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> および <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a> で見ることができます（それを<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">ライブで見る</a>）。</p> +</div> + +<h2 id="font-face_in_more_detail" name="font-face_in_more_detail">@font-face の詳細</h2> + +<p>Font Squirrel によって生成された <code>@font-face</code> 構文を調べてみましょう。 これは、ブロックの1つがどのように見えるかです。</p> + +<pre class="brush: css notranslate">@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; +}</pre> + +<p><code>@font-face</code> が普及し始めた頃の Paul Irish による投稿（<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>）の後、これは "bulletproof @font-face 構文" と呼ばれています。 それを見て、それが何をするのか見てみましょう。</p> + +<ul> + <li><code>font-family</code>: この行はフォントとして参照したい名前を指定します。 CSS を通して一貫してそれを使う限り、好きなものにすることができます。</li> + <li><code>src</code>: これらの行は CSS にインポートされるフォントファイルへのパス（<code>url</code> 部分）と各フォントファイルの形式（<code>format</code> 部分）を指定します。 どの場合も後者の部分はオプションですが、ブラウザーが使用できるフォントをすばやく見つけることができるため、宣言すると有益です。 複数の宣言をカンマで区切ってリストすることができます — ブラウザーはそれらを検索し、最初に理解できるとわかったものを使用します — 従って、先に WOFF2 のようなより新しくより良い形式を置き、そして後に TTF のようなより古くあまり良くない形式を置くのが最善です。 これに対する1つの例外は EOT フォントです — それらは、古いバージョンの IE が実際にフォントを使用できない場合でも、最初に見つかったものを使用しようとするので、古いバージョンの IE のいくつかのバグを修正するために最初に配置されています。</li> + <li>{{cssxref("font-weight")}} / {{cssxref("font-style")}}: これらの行はフォントの太さ、およびイタリックかどうかを指定します。 同じフォントの複数の太さをインポートする場合は、フォントファミリーのすべての異なるメンバーに異なる名前を付けるのではなく、それらの太さ/スタイルを指定して、異なる値の {{cssxref("font-weight")}} / {{cssxref("font-style")}} を使用することができます。 <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face のこつ: CSS をシンプルに保つために font-weight と font-style を定義する</a>（英語）によって Roger Johansson が何をすべきかをより詳細に示しています。</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: ウェブフォントに特定の {{cssxref("font-variant")}} および {{cssxref("font-stretch")}} の値を指定することもできます。 新しいブラウザーでは、<code><a href="/ja/docs/Web/CSS/@font-face/unicode-range">unicode-range</a></code> の値でウェブフォントで使用する特定の文字範囲を指定することもできます — サポートしているブラウザーでは、指定された文字のみがダウンロードされ、不要なダウンロードを節約できます。 Drew McLellan による <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">unicode-range を使ったカスタムフォントスタックの作成</a>（英語）は、これをどのように利用するかについていくつかの役に立つアイデアを提供します。</p> +</div> + +<h2 id="Summary" name="Summary">可変フォント</h2> + +<p>これは、幅、太さ、スタイルごとに別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを一つのファイルに組み込むことができるフォントです。これらのフォントは初心者向けのコースにしてはやや高度なものですが、もしあなたが自分自身を伸ばして調べたいと思っているのであれば、可変フォントガイドを読んでみてください。</p> + +<p>ブラウザでは、可変フォントと呼ばれる新しいフォントテクノロジーがあります。これらは、幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるフォントです。 初心者コースでは多少上級ですが、調べてみたい場合は、<a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable フォントガイド</a>をお読みください。</p> + +<h2 id="Summary" name="Summary">あなたのスキルをテストしてください！</h2> + +<p>あなたはこの記事の最後に到達し、すでに私たちのアクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後の最も重要な情報を覚えていますか？あなたがこの情報を保持していることを確認するための評価をモジュールの最後に見つけることができます。<a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a>を参照してください。</p> + +<h2 id="Summary" name="Summary">まとめ</h2> + +<p>テキストの装飾の基本についての記事を読み終えたので、今度はモジュール「コミュニティスクールのホームページの組版」の評価で理解度をテストします。</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> + + + +<h2 id="In_this_module" name="In_this_module">このモジュール内の文書</h2> + +<ul> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">基本的なテキストとフォントの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_lists">リストの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Styling_links">リンクの装飾</a></li> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Web_fonts">ウェブフォント</a></li> + <li><a href="/ja/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> +</ul> |