diff options
Diffstat (limited to 'files/ja/learn')
| -rw-r--r-- | files/ja/learn/css/building_blocks/index.html | 45 | ||||
| -rw-r--r-- | files/ja/learn/css/css_layout/index.html | 48 | ||||
| -rw-r--r-- | files/ja/learn/css/styling_text/styling_lists/index.html | 144 |
3 files changed, 128 insertions, 109 deletions
diff --git a/files/ja/learn/css/building_blocks/index.html b/files/ja/learn/css/building_blocks/index.html index 3094d16d9c..0a6c343bdd 100644 --- a/files/ja/learn/css/building_blocks/index.html +++ b/files/ja/learn/css/building_blocks/index.html @@ -14,30 +14,39 @@ translation_of: Learn/CSS/Building_blocks <p class="summary">ここでの目的は、<a href="/ja/docs/Learn/CSS/Styling_text">テキストの装飾</a>や <a href="/ja/docs/Learn/CSS/CSS_layout">CSS レイアウト</a>などのより具体的な分野に進む前に、適切な CSS を書くための手法を知り、すべての重要な理論を理解できるようになることです。</p> -<h2 id="Prerequisites" name="Prerequisites">前提知識</h2> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者を目指している方へ</h4> -<p>このモジュールを始めるまえに、つぎの状態になっておくべきです。</p> + <p>目標に向かって努力するために必要なすべての必須情報を含むコースをまとめました。</p> + + <p><a href="/ja/docs/Learn/Front-end_web_developer"><strong>始めましょう</strong></a></p> + +</div> + +<h2 id="Prerequisites">前提知識</h2> + +<p>このモジュールを始める前に、次のものを身につけておいてください。</p> <ol> - <li>コンピューターの使い方と（ウェブを見たりコンテンツを消費したりといった）ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li> - <li><a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> + <li>コンピューターの使い方と (ウェブを見たりコンテンツを消費したりといった) ウェブの受動的な使い方に関する基本的な知識に慣れ親しんでいること。</li> + <li><a href="/ja/docs/Learn/Getting_started_with_the_web/Installing_basic_software">基本的なソフトウェアのインストール</a>で説明されている基本的な作業環境と、<a href="/ja/docs/Learn/Getting_started_with_the_web/Dealing_with_files">ファイルの扱い方</a>で説明されているファイルの作り方や管理の仕方について理解していること。</li> <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明されている HTML についての基礎知識に慣れ親しんでいること。</li> <li><a href="/ja/docs/Learn/CSS/First_steps">CSS の第一歩</a>で説明されている CSS の基本について理解していること。</li> </ol> <div class="note"> -<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="http://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です</p> +<p><strong>注</strong>: 自分自身でファイルを作れない環境 (タブレットやその他の端末) で作業する場合、(ほとんどの) コードサンプルは <a href="https://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> といったオンラインコーディングプログラムで試すことが可能です</p> </div> -<h2 id="Guides" name="Guides">ガイド</h2> +<h2 id="Guides">ガイド</h2> -<p>このモジュールは CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されます。各記事には理解度を試すエクササイズも含まれます。</p> +<p>このモジュールは、 CSS 言語のもっとも重要な部分をカバーする以下の記事で構成されています。各記事には理解度を試す練習問題も含まれています。</p> <dl> <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">カスケードと継承</a></dt> - <dd>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念（カスケード・詳細度・継承）の理解を深めていくことです。</dd> + <dd>このレッスンでの目的は、CSS を HTML に適用する方法と競合した場合の解決方法について、もっとも基本的な概念 (カスケード・詳細度・継承) の理解を深めていくことです。</dd> <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors">CSS セレクター</a></dt> - <dd>CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです: + <dd>CSS セレクターにはさまざまな種類があり、スタイルを設定する要素を厳密に指定することができます。この記事と以下のサブ記事では、それらがどのように機能するかを詳しく見ていきます。サブ記事は以下の通りです。 <ul> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">要素・クラス・ID によるセレクター</a></li> <li><a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性によるセレクター</a></li> @@ -51,10 +60,10 @@ translation_of: Learn/CSS/Building_blocks <dd>このレッスンでは、CSS の背景と枠線を使ってできるクリエイティブなことをいくつか見ていきます。グラデーションや背景画像や角丸について、背景と枠線は CSS のスタイリングに関する多くの疑問の解決策です。</dd> <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">テキスト方向の操作</a></dt> <dd>近年では、右から左へだけでなく上から下へのコンテンツ（日本語など）を含むコンテンツのさまざまな向きをより適切にサポートするために CSS サポートが進化しています。これらのさまざまな向きの考え方については "<strong>writing modes" </strong>と呼ばれます。レイアウトの学習を進めて進めていくと "writing modes" の理解がとても役に立っていきますので、この記事ではそれらを紹介していきます。</dd> - <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">要素のはみ出し（オーバーフロー）</a></dt> - <dd><font><font>このレッスンでは、CSS のもう 1 つの重要な概念である </font></font><strong><font><font>オーバーフロー（</font></font></strong><strong><font><font>overflow）</font></font></strong><font><font>を見ていきます</font><font>。</font><font>オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。</font><font>このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</font></font></dd> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">コンテンツのはみ出し (オーバーフロー)</a></dt> + <dd>このレッスンでは、CSS のもう 1 つの重要な概念である <strong>オーバーフロー</strong> (<strong>overflow</strong>) を見ていきます。オーバーフローは、ボックス内にコンテンツが収まりきらないときに発生します。このガイドでは、その詳細とそれらについてどのように対処するかを学びます。</dd> <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Values_and_units">CSS の値と単位</a></dt> - <dd><font>CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。</font><font>このレッスンでは、もっともよく使用される値と単位について見ていきます。</font></dd> + <dd>CSS で使用されるすべてのプロパティには、特定の値または値の組み合わせのみが許可されます。このレッスンでは、もっともよく使用される値と単位について見ていきます。</dd> <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS によるサイズ設定</a></dt> <dd>これまでのさまざまなレッスンで、CSS を使用してウェブページ上の項目のサイズを調整するいくつかの方法に出会いました。デザイン作業をしていくうえで、それぞれの手法がどれほど大きく異なっているのかを理解することが重要です。このレッスンでは、CSS によって要素のサイズを設定する方法をまとめ、サイジングに役立ついくつかの用語を定義します。</dd> <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Images_media_form_elements">画像・メディア・フォーム要素</a></dt> @@ -67,22 +76,22 @@ translation_of: Learn/CSS/Building_blocks <dd>スタイルシートやプロジェクトが大きい状態で作業しはじめると、巨大な CSS ファイルを維持するのが難しいことがわかります。この記事では、保守しやすい CSS を書くためのベストプラクティスと、他の人が保守性を向上させるための解決策の一部を紹介します。</dd> </dl> -<h2 id="Assessments" name="Assessments">評価</h2> +<h2 id="Assessments">評価テスト</h2> <p>CSS スキルをテストしたいですか？以下の各評価では上記のガイドで説明されている CSS の理解度をテストできます。</p> <dl> - <dt><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">基本的な CSS の理解</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension">基本的な CSS の理解</a></dt> <dd>この評価では基本的な構文・セレクター・詳細度・ボックスモデル・その他の理解度をテストします。</dd> - <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">装飾的なレターヘッド付きの便箋の作成</a></dt> <dd>好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。</dd> - <dt><a href="/ja/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">かっこいいボックス</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/A_cool_looking_box">かっこいいボックス</a></dt> <dd>ここでは背景と枠線のスタイリングを使った人目を引くボックスの作り方を実践します。</dd> </dl> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <dl> - <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度なエフェクト</a></dt> + <dt><a href="/ja/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">ボックスの高度な効果</a></dt> <dd>この記事はトリックの箱として機能し、ボックスの影・ブレンドモード・フィルターのような、ボックスの装飾に使用できる高度な機能のいくつかを紹介します。</dd> </dl> diff --git a/files/ja/learn/css/css_layout/index.html b/files/ja/learn/css/css_layout/index.html index 419de7d135..13f2cae2a8 100644 --- a/files/ja/learn/css/css_layout/index.html +++ b/files/ja/learn/css/css_layout/index.html @@ -21,23 +21,33 @@ translation_of: Learn/CSS/CSS_layout --- <div>{{LearnSidebar}}</div> -<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、CSS レイアウトについて深く掘り下げることができます。</p> +<p class="summary">現段階で、すでに CSS の基本、テキストの装飾方法、コンテンツを格納するボックスの装飾方法と操作方法を見てきました。 今度は、ビューポートや互いを基準にしてボックスを適切な場所に配置する方法を検討します。 必要な前提知識をカバーしているので、さまざまな <code>display</code> の設定、フレックスボックス・CSS グリッド・位置指定などの最新のレイアウトツール、そしてまだ知っておきたいと思うかもしれない過去のテクニックのいくつかを見ながら、 CSS レイアウトについて深く掘り下げることができます。</p> -<h2 id="Prerequisites" name="Prerequisites">前提知識</h2> +<div class="callout"> + <h4 id="Looking_to_become_a_front-end_web_developer">フロントエンドのウェブ開発者を目指している方へ</h4> + + <p>目標に向かって努力するために必要なすべての必須情報を含むコースをまとめました。</p> + + <p><a href="/ja/docs/Learn/Front-end_web_developer"><strong>始めましょう</strong></a> + </p> + +</div> + +<h2 id="Prerequisites">前提知識</h2> <p>このモジュールを始める前に、次のことを理解しているべきです。</p> <ol> <li><a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>で説明したように、HTML についての基本的な知識があること。</li> - <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS">CSS 入門</a>で説明したように、CSS の基本を容易にこなせること。</li> - <li><a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスを装飾する方法</a>を理解していること。</li> + <li><a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a>で説明したように、CSS の基本を容易にこなせること。</li> + <li><a href="/ja/docs/Learn/CSS/Building_blocks">ボックスの装飾</a>の方法を理解していること。</li> </ol> <div class="note"> -<p><strong>注: </strong>使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、<a href="http://jsbin.com/">JSBin</a> や <a href="https://thimble.mozilla.org/ja/">Thimble</a> などのオンラインコーディングプログラムで（ほとんどの）コードサンプルを試すことができます。</p> +<p><strong>注: </strong>使用しているコンピューター/タブレット/その他のデバイスで自分のファイルを作成できない場合は、<a href="https://jsbin.com/">JSBin</a> や <a href="https://glitch.com/">Glitch</a> などのオンラインコーディングプログラムで (ほとんどの) コードサンプルを試すことができます。</p> </div> -<h2 id="Guides" name="Guides">ガイド</h2> +<h2 id="Guides">ガイド</h2> <p>これらの記事では、CSS で利用可能な基本的なレイアウトのツールとテクニックについての教育を提供します。 レッスンの最後には、ウェブページをレイアウトすることによって、レイアウト方法の理解を確認するのに役立つ評価試験があります。</p> @@ -48,31 +58,31 @@ translation_of: Learn/CSS/CSS_layout <dd>ウェブページ上の要素は、通常フローを変えるために何かをするまで、通常フローに従ってレイアウトされます。 この記事では、通常フローを変える方法を学ぶための基礎として、通常フローの基本について説明します。</dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a></dt> <dd> - <p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">フレックスボックス</a>は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。</p> + <p><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">フレックスボックス</a>は、項目を行または列にレイアウトするための1次元のレイアウト方法です。 項目は追加のスペースを埋めるためにたわみ、小さいスペースに収まるように縮小します。 この記事では、すべての基本事項について説明します。このガイドを学習した後は、<a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox_skills">フレックスボックスのスキルをテスト</a>して、理解度を確認してから次のステップに進むことができます。</p> </dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Grids">グリッド</a></dt> - <dd>CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できるようにする多くの機能があります。 この記事では、ページレイアウトを始めるために知っておくべきことをすべて説明します。</dd> - <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">フロート</a></dt> - <dd>{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの1つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</dd> + <dd>CSS グリッドレイアウトは、ウェブ用の2次元レイアウトシステムです。 これにより、コンテンツを行と列にレイアウトすることができ、複雑なレイアウトを簡単に構築できる多くの機能を備えています。 この記事では、ページレイアウトを始めるために必要な情報を提供し、次に進む前に<a href="/ja/docs/Learn/CSS/CSS_layout/Grid_skills">グリッドのスキルをテスト</a>しましょう。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Floats">浮動レイアウト</a></dt> + <dd>{{cssxref("float")}} プロパティは、もともとはテキストブロック内の浮動画像のためのものでしたが、ウェブページ上に複数列レイアウトを作成するために最も一般的に使われるツールの 1 つになりました。 この記事で説明しているように、フレックスボックスとグリッドの出現により、今は当初の目的に戻っています。</dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Positioning">位置指定</a></dt> - <dd>位置指定を使用すると、通常のドキュメントレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</dd> + <dd>位置指定を使用すると、通常の文書のｐレイアウトフローから要素を取り出して異なるふるまいをさせることができます。 例えば、互いの上に重なったり、常にブラウザーのビューポート内の同じ場所に留まったりします。 この記事では、さまざまな {{cssxref("position")}} の値とその使い方について説明します。</dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">段組みレイアウト</a></dt> - <dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd> + <dd>段組みレイアウトの仕様では、新聞に見られるような、コンテンツを複数の段にレイアウトする方法が提供されています。 この記事では、この機能の使い方について説明します。</dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Responsive_Design">レスポンシブデザイン</a></dt> - <dd>Web 対応デバイスでより多様な画面サイズが登場するにつれて、レスポンシブ Web デザイン（RWD）の概念が登場しました。 これは、さまざまな画面幅、解像度などに合わせて Web ページがレイアウトと外観を変更できるようにする一連の実践です。 これは、マルチデバイス Web 向けのデザイン方法を変更したアイデアであり、この記事では、それをマスターするために知っておくべき主なテクニックを理解するのに役立ちます。</dd> + <dd>ウェブ対応端末の画面サイズが多様化するにつれ、レスポンシブウェブデザイン (RWD) という概念が登場しました。これは、異なる画面幅や解像度などに合わせて、ウェブページのレイアウトや外観を変更できるようにする一連の手法です。この記事では、レスポンシブウェブデザインを使いこなすために必要な主なテクニックをご紹介します。</dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Media_queries">メディアクエリーの初心者向けガイド</a></dt> - <dd><strong>CSS メディアクエリー</strong>を使用すると、例えば、「ビューポートは 480 ピクセルよりも広い」というような、ブラウザーとデバイスの環境が指定した規則に一致する場合にのみ CSS を適用できます。 メディアクエリーは、ビューポートのサイズに応じて異なるレイアウトを作成できるため、レスポンシブ Web デザイン（responsive web design、RWD）の重要な部分ですが、例えば、ユーザーはマウスではなくタッチスクリーンを使用しているというような、サイトが実行されている環境に関する他のものを検出するためにも使用できます。 このレッスンでは、最初にメディアクエリーで使用される構文について学習し、次に単純なデザインでどのようにレスポンシブにするかを示す実際の例で使用してみます。</dd> - <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">過去のレイアウト方法</a></dt> - <dd>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前はフロートや他のレイアウト機能を使用して実装される傾向がありました。 あなたはレイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</dd> - <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザのサポート</a></dt> + <dd><strong>CSS メディアクエリー</strong>は、ブラウザーや端末の環境が、「ビューポートの幅が 480 ピクセル以上」などの指定したルールに合致した場合にのみ、 CSS を適用する方法です。メディアクエリーは、ビューポートの大きさに応じて異なるレイアウトを作成することができるため、レスポンシブウェブデザインの重要な要素となっていますが、ユーザーがマウスではなくタッチパネルを使用しているかどうかなど、サイトが実行されている環境に関する他の事柄を検出するためにも使用できます。このレッスンでは、まずメディアクエリーで使用される構文について学び、次にメディアクエリーを使用して、シンプルなデザインをどのようにレスポンシブにするかを示す実例を見ていきます。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">古いレイアウト方法</a></dt> + <dd>グリッドシステムは CSS レイアウトで使用される非常に一般的な機能で、CSS グリッドレイアウト以前は浮動レイアウトや他のレイアウト機能を使用して実装される傾向がありました。 レイアウトをいくつかの列（例えば 4、6、または 12）として想像し、そしてコンテンツの列をこれらの想像上の列の内側に合わせます。 この記事では、古いプロジェクトで作業した場合に、それらがどう使われたかを理解するために、これらの古い方法がどのように機能するのかを説明します。</dd> + <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">古いブラウザーの対応</a></dt> <dd> - <p>このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法をサポートしていないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブテクニックを使用する方法について説明します。</p> + <p>このモジュールでは、フレックスボックスとグリッドをデザインの主なレイアウト方法として使用することをお勧めしています。 しかしながら、サイトへの訪問者には、古いブラウザーや、使用している方法に対応していないブラウザーを使用している人がいます。 これはウェブ上で常に当てはまります — 新しい機能が開発されると、ブラウザーによって異なるものが優先されます。 この記事では、古い技術のユーザーを締め出すことなく最新のウェブ技術を使用する方法について説明します。</p> </dd> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">評価試験: 基礎的なレイアウトの理解</a></dt> <dd>ウェブページをレイアウトすることによって、さまざまなレイアウト方法に関する知識をテストするための評価試験です。</dd> </dl> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <dl> <dt><a href="/ja/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">実用的な位置指定の例</a></dt> diff --git a/files/ja/learn/css/styling_text/styling_lists/index.html b/files/ja/learn/css/styling_text/styling_lists/index.html index 3d4617b15b..3a0ea57b6f 100644 --- a/files/ja/learn/css/styling_text/styling_lists/index.html +++ b/files/ja/learn/css/styling_text/styling_lists/index.html @@ -16,13 +16,13 @@ translation_of: Learn/CSS/Styling_text/Styling_lists <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> +<p class="summary"><a href="/ja/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">リスト</a>は他のテキストとほとんど同じようにふるまいますが、知っておくべきリスト固有の CSS プロパティと、考慮すべきベストプラクティスがいくつかあります。 この記事はすべてを説明しています。</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> + <td>基本的なコンピューターリテラシー、HTML の基本 (<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML 入門</a>を学ぶ)、 CSS の基本 (<a href="/ja/docs/Learn/CSS/First_steps">CSS 入門</a>を学ぶ)、<a href="/ja/docs/Learn/CSS/Styling_text/Fundamentals">CSS のテキストとフォントの基礎</a>。</td> </tr> <tr> <th scope="row">学習目標:</th> @@ -31,13 +31,13 @@ translation_of: Learn/CSS/Styling_text/Styling_lists </tbody> </table> -<h2 id="A_simple_list_example" name="A_simple_list_example">簡単なリストの例</h2> +<h2 id="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>はじめに、簡単なリストの例を見てみましょう。 この記事を通して、順序なしリスト、順序付きリスト、そして説明リストを見ていきます。これらはどれも似たような装飾機能持っていますが、リストの種類に特有のものもあります。 <a href="https://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> +<pre class="brush: 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> @@ -77,23 +77,23 @@ paragraph for reference, paragraph for reference, paragraph for reference.</p <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> +<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> + <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> +<h2 id="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>リストを装飾するときは、 (段落や画像などの) 周囲の要素と同じ垂直方向の間隔 (バーティカルリズム (vertical rhythm) とも呼ばれる) と、互いに同じ水平方向の間隔を維持するように装飾を調整する必要があります (Github で<a href="https://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 */ +<pre class="brush: css">/* General styles */ html { font-family: Helvetica, Arial, sans-serif; @@ -114,7 +114,6 @@ li, p { /* Description list styles */ - dd, dt { line-height: 1.5; } @@ -122,19 +121,16 @@ dd, dt { dt { font-weight: bold; } - -dd { - margin-bottom: 1.5rem; -}</pre> +</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" class="hidden"> </span></li> + <li>1 番目の規則はサイト全体のフォントと <code>10px</code> の基準フォントサイズを設定します。 これらはページ上のすべてのものに継承されます。</li> + <li>2 番目と 3 番目の規則では、見出し、さまざまなリストの種類 (リスト要素の子はこれらを継承) 、および段落に相対フォントサイズを設定します。 つまり、各段落とリストのフォントサイズ、上下の間隔は同じになり、バーティカルリズムを一定に保つのに役立ちます。</li> + <li>4 番目では、段落とリスト項目に同じ {{cssxref("line-height")}} を設定しているため、段落と各個々のリスト項目のラインの間隔は同じになります。 これは、バーティカルリズムを一定に保つのにも役立ちます。</li> + <li>説明リストには 5 番目と 6 番目の規則が適用されます。 説明リストの用語と説明には、段落とリスト項目の場合と同じ <code>line-height</code> を設定します。 繰り返しますが、一貫性があることは良いことです！ また、説明する用語は太字にして、視覚的に目立つようにしています。></li> </ul> -<h2 id="List-specific_styles" name="List-specific_styles">リスト固有の装飾</h2> +<h2 id="List-specific_styles">リスト固有の装飾</h2> <p>リストの一般的な間隔調整テクニックを見てきました。 次に、リスト固有のプロパティを調べてみましょう。 最初に知っておくべき3つのプロパティがあり、それらは {{htmlelement("ul")}} や {{htmlelement("ol")}} 要素に設定できます。</p> @@ -144,46 +140,46 @@ dd { <li>{{cssxref("list-style-image")}}: 行頭記号に簡単な正方形や円ではなく、カスタム画像を使うことができます。</li> </ul> -<h3 id="Bullet_styles" name="Bullet_styles">行頭記号の装飾</h3> +<h3 id="Bullet_styles">行頭記号の装飾</h3> -<p>前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号（bullet point）に使用する行頭記号（bullet）の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。</p> +<p>前述のように、{{cssxref("list-style-type")}} プロパティを使用して、行頭記号 (bullet point) に使用する行頭記号 (bullet) の種類を設定できます。 この例では、順序付きリストで大文字のローマ数字を使用するように設定しています。</p> -<pre class="brush: css notranslate">ol { +<pre class="brush: css">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><img alt="行頭記号がリスト項目テキストの外側に表示されるように設定された順序付きリスト。" src="outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<p>{{cssxref("list-style-type")}} のリファレンスページをチェックすることで、もっとたくさんのオプションを見つけることができます。</p> +<p>それ以外のオプションを見るには、 {{cssxref("list-style-type")}} のリファレンスページを参照してください。</p> -<h3 id="Bullet_position" name="Bullet_position">行頭記号の位置</h3> +<h3 id="Bullet_position">行頭記号の位置</h3> -<p>{{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 デフォルト値は <code>outside</code> です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。</p> +<p>{{cssxref("list-style-position")}} プロパティは、行頭記号をリスト項目の内側に表示するか、その外側の各項目の先頭より前に表示するかを設定します。 既定値は <code>outside</code> です。 これは、上で見たように、行頭記号をリスト項目の外側に配置します。</p> -<p>値を <code>inside</code> に設定すると、行頭記号をラインの内側に配置します。</p> +<p>値を <code>inside</code> に設定すると、行頭記号を行の内側に配置します。</p> -<pre class="brush: css notranslate">ol { +<pre class="brush: css">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> +<p><img alt="行頭記号がリスト項目のテキストの内側に表示されるように設定された順序付きリスト。" src="inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<h3 id="Using_a_custom_bullet_image" name="Using_a_custom_bullet_image">カスタム行頭記号画像の使用</h3> +<h3 id="Using_a_custom_bullet_image">独自の行頭記号画像の使用</h3> -<p>{{cssxref("list-style-image")}} プロパティを使用すると、行頭記号にカスタム画像を使用できます。 構文は次のようにとても簡単です。</p> +<p>{{cssxref("list-style-image")}} プロパティを使用すると、行頭記号に独自の画像を使用することができます。構文は次のようにとても簡単です。</p> -<pre class="brush: css notranslate">ul { +<pre class="brush: css">ul { list-style-image: url(star.svg); }</pre> -<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/ja/docs/Learn/CSS/Styling_boxes">ボックスの装飾</a>モジュールで詳しく説明します。 今のところ、これは味見です！</p> +<p>ただし、このプロパティは、行頭記号の位置、サイズなどを制御するという点では少し制限があります。 {{cssxref("background")}} プロパティファミリーを使用するほうが得策です。 これについては、<a href="/en-US/docs/Learn/CSS/Building_blocks">ボックスの装飾</a>モジュールで詳しく説明します。とりあえず、その例をご紹介しましょう。</p> -<p>完成した例では、（既に上で見たものの上に）次のように順序なしリストを装飾しました。</p> +<p>完成した例では、 (既に上で見たものの上に) 次のように順序なしリストを装飾しました。</p> -<pre class="brush: css notranslate">ul { +<pre class="brush: css">ul { padding-left: 2rem; list-style-type: none; } @@ -199,27 +195,27 @@ ul li { <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>{{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> + <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> +<p><img alt="行頭記号が小さな星の画像として設定された順序なしリスト" src="list_formatting.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> -<h3 id="list-style_shorthand" name="list-style_shorthand">list-style 一括指定</h3> +<h3 id="list-style_shorthand">list-style 一括指定</h3> -<p>上記の3つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、</p> +<p>上記の 3 つのプロパティはすべて、単一の一括指定プロパティ {{cssxref("list-style")}} を使用して設定できます。 例えば、次の CSS を、</p> -<pre class="brush: css notranslate">ul { +<pre class="brush: css">ul { list-style-type: square; list-style-image: url(example.png); list-style-position: inside; @@ -227,43 +223,43 @@ ul li { <p>これに置き換えることができます。</p> -<pre class="brush: css notranslate">ul { +<pre class="brush: css">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> +<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> +<h2 id="Controlling_list_counting">リストの数え方の制御</h2> <p>場合によっては、順序付きリストで異なる方法で数えたいことがあります — 例えば 1 以外の数から始めたり、逆方向に数えたり、1 以上のステップで数えたりです。 HTML と CSS には、ここで役立つツールがいくつかあります。</p> -<h3 id="start" name="start">start</h3> +<h3 id="start">start</h3> <p>{{htmlattrxref("start","ol")}} 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、</p> -<pre class="brush: html notranslate"><ol start="4"> +<pre class="brush: html"><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>この出力が得られます。</p> <p>{{ EmbedLiveSample('start', '100%', 150) }}</p> -<h3 id="reversed" name="reversed">reversed</h3> +<h3 id="reversed">reversed</h3> <p>{{htmlattrxref("reversed","ol")}} 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、</p> -<pre class="brush: html notranslate"><ol start="4" reversed> +<pre class="brush: html"><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>この出力が得られます。</p> <p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> @@ -271,28 +267,28 @@ ul li { <p><strong>注</strong>: 逆方向のリストに <code>start</code> 属性の値より多くのリスト項目がある場合、カウントは引き続きゼロになり、その後負の値になります。</p> </div> -<h3 id="value" name="value">value</h3> +<h3 id="value">value</h3> -<p>{{htmlattrxref("value","li")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、</p> +<p>{{htmlattrxref("value","ol")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、</p> -<pre class="brush: html notranslate"><ol> +<pre class="brush: html"><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>この出力が得られます。</p> <p>{{ EmbedLiveSample('value', '100%', 150) }}</p> <div class="note"> -<p>注: 非数値の {{cssxref("list-style-type")}} を使用している場合でも、<code>value</code> 属性に同等の数値を使用する必要があります。</p> +<p><strong>注</strong>: 数値以外の {{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> +<h2 id="Active_learning_Styling_a_nested_list">アクティブラーニング: ネストしたリストの装飾</h2> -<p>この能動的学習セッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。</p> +<p>このアクティブラーニングセッションでは、上で学んだことを取り入れて、ネストしたリストを装飾してください。 HTML を提供してあるので、次のことを行います。</p> <ol> <li>順序なしリストに正方形の行頭記号を付けます。</li> @@ -306,7 +302,7 @@ ul li { <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;"> +<pre class="brush: html"><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> @@ -332,7 +328,7 @@ ul li { </div> </pre> -<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input"); +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); var cssInput = document.querySelector(".css-input"); var reset = document.getElementById("reset"); var htmlCode = htmlInput.value; @@ -369,7 +365,7 @@ window.addEventListener("load", drawOutput); <p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <p>CSS カウンターは、リストの数え方と装飾をカスタマイズするための高度なツールを提供しますが、非常に複雑です。 あなたが自身を伸ばしたいと思うならば、これらを調べることを勧めます。 次を見てください。</p> @@ -379,20 +375,24 @@ window.addEventListener("load", drawOutput); <li>{{cssxref("counter-reset")}}</li> </ul> -<h2 id="Summary" name="Summary">まとめ</h2> +<h2 id="Test_your_skills!">腕試し</h2> -<p>関連するいくつかの基本的な原則と特定のプロパティを知っていれば、リストの装飾のこつは比較的簡単です。 次の記事では、リンクの装飾テクニックについて説明します。</p> +<p>この記事の最後までたどり着き、アクティブラーニングのセクションでいくつかのスキルテストを行いましたが、今後も最も重要な情報を覚えていられますか？モジュールの最後には、あなたがこの情報を覚えているかどうかを確認するための評価があります — <a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a>を参照してください。</p> -<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> +<p>この評価は、このモジュールで説明されているすべての知識をテストするものなので、先に進む前に他の記事を読んでおくとよいでしょう。</p> + +<h2 id="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> +<h2 id="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> + <li><a href="/ja/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">コミュニティスクールのホームページの組版</a></li> </ul> |