initial commit

3 files changed, 483 insertions, 0 deletions

diff --git a/files/ja/learn/css/howto/create_fancy_boxes/index.html b/files/ja/learn/css/howto/create_fancy_boxes/index.html
new file mode 100644
index 0000000000..74d0b3b379
--- /dev/null
+++ b/files/ja/learn/css/howto/create_fancy_boxes/index.html
@@ -0,0 +1,305 @@
+---
+title: 装飾的なボックスの作成
+slug: Learn/CSS/Howto/create_fancy_boxes
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Learn
+translation_of: Learn/CSS/Howto/create_fancy_boxes
+---
+<p class="summary">CSS ボックスは、CSS で装飾されたウェブページの構成要素です。 見栄えを良くすることは、楽しさとやりがいの両方です。 デザインのアイデアを実用的なコードに変えることがすべてだからです。 面倒な制約と CSS の使用における狂気の自由のために、それは挑戦的です。 いくつかの装飾的なボックスをやりましょう。</p>
+
+<p>実用的な側面に取り掛かる前に、<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Box_model">CSS ボックスモデル</a>に慣れていることを確認してください。 いくつかの <a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">CSS レイアウトの基本</a>を熟知していることも賢明ですが、前提条件ではありません。</p>
+
+<p>技術面では、装飾的なボックスの作成は、CSS の境界線と背景のプロパティの習得と、それらを特定のボックスに適用する方法についてのものです。 しかし、テクニックを超えてそれはまたあなたの創造性を解き放つことに関するすべてです。 それは1日で終わらないでしょうし、何人かのウェブ開発者はそれを楽しんで一生を過ごします。</p>
+
+<p>私たちは多くの例を見ようとしていますが、可能な限り最も単純な HTML の部分、次の単純な要素に取り組むつもりです。</p>
+
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+
+<p>はい、それは HTML のごく一部ですが、その要素について何を調整できるのでしょうか？ 次のすべてです。</p>
+
+<ul>
+ <li>そのボックスモデルのプロパティ: {{cssxref("width")}}、{{cssxref("height")}}、{{cssxref("padding")}}、{{cssxref("border")}} など</li>
+ <li>その背景のプロパティ: {{cssxref("background")}}、{{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-position")}}、{{cssxref("background-size")}} など</li>
+ <li>その擬似要素: {{cssxref("::before")}} および {{cssxref("::after")}}</li>
+ <li>そして、いくつかの脇のプロパティ: {{cssxref("box-shadow")}}、{{cssxref("transform")}}、{{cssxref("outline")}} など</li>
+</ul>
+
+<p>とても広い遊び場があります。 楽しく始めましょう。</p>
+
+<h2 id="Box_model_tweak" name="Box_model_tweak">ボックスモデルの調整</h2>
+
+<p>ボックスモデルだけで、単純な境界線の追加、四角形の作成など、基本的なことを行うことができます。 負の <code>padding</code> や負の <code>margin</code>、あるいはその両方を使用して、<code>border-radius</code> をボックスの実際のサイズよりも大きくすることによって、プロパティを限界にプッシュすると、面白くなり始めます。</p>
+
+<h3 id="Making_circles" name="Making_circles">円を作る</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>これはとてもシンプルでとても楽しいものです。 {{cssxref("border-radius")}} プロパティは、ボックスに適用される丸い角を作成するように作られていますが、半径のサイズがボックスの実際の幅と等しいかそれより大きい場合はどうなるでしょうか？</p>
+
+<pre class="brush: css">.fancy {
+  /* 円の中では、中央揃えのテキストは見栄えがよくなります。 */
+  text-align : center;
+
+  /* テキストが境界線に触れないようにしましょう。
+     テキストはまだ四角形の中を流れているので、
+     そのようにするときれいに見えて、
+     それが「本当の」円であるという感覚を与えます。 */
+  padding : 2em;
+
+  /* 境界線は円に見えるようになります。
+     背景は境界線の半径で切り取られるので、
+     背景を使用することもできます。 */
+  border : 0.5em solid black;
+
+  /* 正方形であることを確認しましょう。
+     正方形でない場合は、円ではなく楕円です。 ;) */
+  width  : 5em;
+  height : 5em;
+
+  /* そして正方形を円に変えましょう。 */
+  border-radius: 100%;
+}</pre>
+
+<p>はい、円ができます。</p>
+
+<p>{{ EmbedLiveSample('Making_circles', '100%', '170') }}</p>
+
+<h2 id="Backgrounds" name="Backgrounds">Backgrounds</h2>
+
+<p>装飾的なボックスについて話すとき、それを扱うためのコアとなるプロパティは <a href="/ja/docs/Web/CSS/CSS_Background_and_Borders">background-* プロパティ</a>です。 背景をいじり始めると、CSS ボックスはあなたが満たすための空白のキャンバスになります。</p>
+
+<p>いくつかの実用的な例に進む前に、背景について知っておくべきことが2つあるので、少し後退しましょう。</p>
+
+<ul>
+ <li>一つのボックスに<a href="/ja/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds">複数の背景</a>を設定することが可能です。 それらは層のように互いの上に積み重ねられています。</li>
+ <li>背景は単色や画像のどちらでもかまいません。 単色は常に表面全体を塗りつぶしますが、画像は拡大縮小して配置することができます。</li>
+</ul>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>さて、背景を楽しんでみましょう。</p>
+
+<pre class="brush: css">.fancy {
+  padding : 1em;
+  width: 100%;
+  height: 200px;
+  box-sizing: border-box;
+
+  /* 背景の積み重ねの一番下を、
+     霧のかかった灰色の単色にしましょう。 */
+  background-color: #E4E4D9;
+
+  /* カラーストリップエフェクトを作成するために、
+     線形グラデーションを重ね合わせます。
+     お気づきのとおり、
+     色のグラデーションは画像と見なされ、
+     そのように操作することができます。 */
+  background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%),
+                    linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%),
+                    linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%);
+}</pre>
+
+<p>{{ EmbedLiveSample('Backgrounds', '100%', '200') }}</p>
+
+<div class="note">
+<p>グラデーションは、非常に独創的な方法で使用できます。 あなたがクレイジーな例を見たいのなら、<a href="http://lea.verou.me/css3patterns/">Lea Verou の CSS パターン</a>（英語）を見てください。 こういったグラデーションの使用はかなり高くつきますが、パフォーマンス的に優れていることを忘れないでください。 グラデーションについてもっと知りたい場合は、気軽に<a href="/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients">専用記事</a>にアクセスしてください。</p>
+</div>
+
+<h2 id="Pseudo_elements" name="Pseudo_elements">疑似要素</h2>
+
+<p>1つのボックスを装飾するときに、自分自身が制限されていることに気付き、さらに素晴らしい装飾を作成するためにもっとボックスを追加したいと思うかもしれません。 ほとんどの場合、これは独自の装飾の目的で HTML 要素を追加することによって DOM を汚染することにつながります。 たとえそれが必要であっても、それはやや悪い習慣と考えられています。 そのような落とし穴を回避するための1つの解決策は、<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>を使用することです。</p>
+
+<h3 id="A_cloud" name="A_cloud">雲</h3>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>ボックスを雲に変える例を見てみましょう。</p>
+
+<pre class="brush: css">.fancy {
+  text-align: center;
+
+  /* 以前に円を作るために使用したのと同じトリックです。 */
+  box-sizing: border-box;
+  width     : 150px;
+  height    : 150px;
+  padding   : 80px 1em 0 1em;
+
+  /* 雲の「耳」のための場所を空けます。 */
+  margin    : 0 100px;
+
+  position: relative;
+
+  background-color: #A4C9CF;
+
+  /* それで、私たちは雲の底を平らにしたいので、
+     実際に一周していません。
+     この例を気軽に微調整して、
+     底が平らでない雲にしてください。 ;) */
+  border-radius: 100% 100% 0 0;
+}
+
+/* これらは、::before 疑似要素と ::after 疑似要素
+   の両方に適用される共通のスタイルです。 */
+.fancy::before,
+.fancy::after {
+  /* これは、たとえ値が空の文字列であっても、
+     疑似要素の表示を許可するために必要です。 */
+  content: '';
+
+  /* 擬似要素をボックスの左右に配置しますが、
+     常に一番下に配置します。 */
+  position: absolute;
+  bottom  : 0;
+
+  /* これにより、疑似要素は、何が起こっても
+     ボックスのコンテンツの下になります。 */
+  z-index : -1;
+
+  background-color: #A4C9CF;
+  border-radius: 100%;
+}
+
+.fancy::before {
+  /* これは雲の左耳の大きさです。 */
+  width  : 125px;
+  height : 125px;
+
+  /* 少し左に動かします。 */
+  left    : -80px;
+
+  /* 雲の底が平らに保たれるようにするには、
+     左耳の正方形の右下角を作る必要があります。 */
+  border-bottom-right-radius: 0;
+}
+
+.fancy::after {
+  /* これは右耳の雲の大きさです。 */
+  width  : 100px;
+  height : 100px;
+
+  /* 少し右に動かします。 */
+  right   : -60px;
+
+  /* 雲の底が平らに保たれるようにするには、
+     右耳の正方形の左下角を作る必要があります。 */
+  border-bottom-left-radius: 0;
+}</pre>
+
+<p>{{ EmbedLiveSample('A_cloud', '100%', '160') }}</p>
+
+<h3 id="Blockquote" name="Blockquote">ブロッククォート</h3>
+
+<p>擬似要素を使用するより実用的な例は、HTML の {{HTMLElement('blockquote')}} 要素のための素晴らしいフォーマットを構築することです。 それでは、少し異なる HTML スニペットを使った例を見てみましょう（デザインのローカライゼーションもどのように処理するかを見る機会を提供してくれます）。</p>
+
+<pre class="brush: html">&lt;blockquote&gt;People who think they know everything are a great annoyance to those of us who do. &lt;i&gt;Isaac Asimov&lt;/i&gt;&lt;/blockquote&gt;
+&lt;blockquote lang="fr"&gt;L'intelligence, c'est comme les parachutes, quand on n'en a pas, on s'écrase. &lt;i&gt;Pierre Desproges&lt;/i&gt;&lt;/blockquote&gt;</pre>
+
+<p>それで、これが装飾です。</p>
+
+<pre class="brush: css">blockquote {
+  min-height: 5em;
+  padding   : 1em 4em;
+  font      : 1em/150% sans-serif;
+  position  : relative;
+  background-color: lightgoldenrodyellow;
+}
+
+blockquote::before,
+blockquote::after {
+  position: absolute;
+  height  : 3rem;
+  font    : 6rem/100% Georgia, "Times New Roman", Times, serif;
+}
+
+blockquote::before {
+  content: '“';
+  top    : 0.3rem;
+  left   : 0.9rem;
+}
+
+blockquote::after {
+  content: '”';
+  bottom : 0.3rem;
+  right  : 0.8rem;
+}
+
+blockquote:lang(fr)::before {
+  content: '«';
+  top    : -1.5rem;
+  left   : 0.5rem;
+}
+
+blockquote:lang(fr)::after {
+  content: '»';
+  bottom : 2.6rem;
+  right  : 0.5rem
+}
+
+blockquote i {
+  display   : block;
+  font-size : 0.8em;
+  margin-top: 1rem;
+  text-style: italic;
+  text-align: right;
+}</pre>
+
+<p>{{ EmbedLiveSample('Blockquote', '100%', '300') }}</p>
+
+<h2 id="All_together_and_more" name="All_together_and_more">すべて一緒に、他</h2>
+
+<p>ですから、これらすべてを混ぜ合わせると素晴らしいエフェクトを生み出すことができます。 ある時点で、そのようなボックス装飾を達成することは、CSS プロパティの設計と技術的使用の両方において、創造性の問題です。 このようにすることで、この例のようにボックスを生き生きとさせることができる錯視を作成することが可能です。</p>
+
+<div class="hidden">
+<pre class="brush: html">&lt;div class="fancy"&gt;Hi! I want to be fancy.&lt;/div&gt;</pre>
+</div>
+
+<p>部分的なドロップシャドウ・エフェクトを作りましょう。 {{cssxref("box-shadow")}} プロパティを使用すると、内部光と平らなドロップシャドウ・エフェクトを作成できますが、ちょっとした追加作業で、擬似要素と {{cssxref("transform")}} プロパティを使用してより自然なジオメトリを作成することが可能になります。</p>
+
+<pre class="brush: css">.fancy {
+  position: relative;
+  background-color: #FFC;
+  padding: 2rem;
+  text-align: center;
+  max-width: 200px;
+}
+
+.fancy::before {
+  content: "";
+
+  position : absolute;
+  z-index  : -1;
+  bottom   : 15px;
+  right    : 5px;
+  width    : 50%;
+  top      : 80%;
+  max-width: 200px;
+
+  box-shadow: 0px 13px 10px black;
+  transform: rotate(4deg);
+}</pre>
+
+<p>{{ EmbedLiveSample('All_together_and_more', '100%', '100') }}</p>
+
+<h2 id="What's_next" name="What's_next">次は何ですか？</h2>
+
+<p>多くの点で、装飾的なボックスを作ることは主に背景の中に色と画像を追加することなので、<a href="/ja/docs/Learn/CSS/Howto/manage_colors_and_images">色と画像の管理</a>を掘り下げる価値があるかもしれません。 また、装飾的なボックス自体がより大きなレイアウトの一部でなければ、それ自体はまったく役に立ちません。 まだチェックしていないのであれば、<a href="/ja/docs/Learn/CSS/CSS_layout/Introduction">レイアウトの基本</a>を見てください。</p>
+
+<div class="grammarly-disable-indicator"> </div>
diff --git a/files/ja/learn/css/howto/generated_content/index.html b/files/ja/learn/css/howto/generated_content/index.html
new file mode 100644
index 0000000000..add931f8d9
--- /dev/null
+++ b/files/ja/learn/css/howto/generated_content/index.html
@@ -0,0 +1,88 @@
+---
+title: Content
+slug: Learn/CSS/Howto/Generated_content
+tags:
+  - CSS
+  - 'CSS:Getting_Started'
+  - Getting_Started
+translation_of: Learn/CSS/Howto/Generated_content
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<div>{{previousPage("/ja/docs/CSS/Getting_Started/Color", "Color")}} これは<span class="seoSummary"> <a href="/ja/docs/CSS/Getting_Started" title="CSS/Getting Started">CSS Getting Started</a>チュートリアルの第9章です; 文書が表示されたとき CSS を使ってコンテンツを追加するいくつかの方法について述べます。スタイルシートを編集して、テキストや画像を追加できます。</span></div>
+
+<h2 class="clearLeft" id="Information.3A_Content" name="Information.3A_Content">コンテンツについて</h2>
+
+<p>CSS の重要な利点のひとつが、文書の体裁（style）と内容（コンテンツ）を切り離しやすくすることです。それでも、あるコンテンツを文書ではなく、スタイルシートに含めたほうがわかりやすいことがあります。</p>
+
+<p>スタイルシートではテキストや画像から成るコンテンツを記述できます。コンテンツと文書の構造に強い関連があるとき、コンテンツをスタイルシート内に記述します。</p>
+
+<div class="tuto_details">
+<div class="tuto_type">さらに詳しく</div>
+
+<p>スタイルシートでコンテンツを記述すると、面倒な話が生まれる可能性があります。例えば、文書の複数の言語版をスタイルシートを共有して作ることがあるかもしれません。これは、スタイルシートの部分的に訳すときには、その一部を別々のファイルにわけるとともに、適切な言語版の文書とリンクされるよう編集しなければならない、ということです。</p>
+
+<p>この混乱は、コンテンツがすべての言語や文化で利用できる記号や画像で記述されていれば発生しません。</p>
+
+<p>スタイルシート内に記述されたコンテンツは、DOMの一部にはなりません。</p>
+</div>
+
+<h3 id="Text_content" name="Text_content">テキストコンテンツ</h3>
+
+<p>CSS で要素の前または後ろにテキストコンテンツを挿入できます。このためには、ルールを作って {{cssxref(":before")}} または {{cssxref(":after")}} をそのセレクタに追加します。宣言部分には、specify the {{cssxref("content")}} プロパティと、その値としてテキストコンテンツを記述します。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html">A text where I need to <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>span</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ref<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>something<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>span</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token"><span class="class token">.ref</span><span class="pseudo-element token">::before</span></span> <span class="punctuation token">{</span>
+  <span class="property token">font-weight</span><span class="punctuation token">:</span> bold<span class="punctuation token">;</span>
+  <span class="property token">color</span><span class="punctuation token">:</span> navy<span class="punctuation token">;</span>
+  <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">"Reference "</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h4 id="結果">結果</h4>
+
+<p>{{ EmbedLiveSample('Text_content', 600, 30) }}<span id="cke_1_bottom"><span id="cke_1_path"><a id="cke_elementspath_7_0" title="h3 要素">h3</a></span></span></p>
+</div>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">さらに詳しく</div>
+
+<p>スタイルシートの文字セットのデフォルトは UTF-8 ですが、リンク、スタイルシート自身の内部、もしくはその他の方法で指定できます。CSS Specification の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a> をご覧ください。</p>
+
+<p>文字を、バックスペースによるエスケープ機構を使って記述することもできます。例えば、\265B はチェスの黒クイーンの記号 ♛ です。詳しくは、<a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referring to characters not represented in a character encoding</a> と CSS Specification の <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a> をご覧ください。</p>
+</div>
+
+<h3 id="Image_content" name="Image_content">画像コンテンツ</h3>
+
+<p>要素の前や後ろに画像を追加するには、{{cssxref("content")}} プロパティの値として画像ファイルの URL を記述します。</p>
+
+<div class="tuto_example">
+<div class="tuto_type">例</div>
+
+<p>このルールは <code>glossary</code> を持つすべてのリンクの後ろに、空白文字とアイコンを追加します:</p>
+
+<h3 id="HTML_2">HTML</h3>
+
+<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>developer.mozilla.org<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>glossary<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>developer.mozilla.org<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>a</span><span class="punctuation token">&gt;</span></span></code></pre>
+
+<h3 id="CSS_2">CSS</h3>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">a<span class="class token">.glossary</span><span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span>
+   <span class="property token">content</span><span class="punctuation token">:</span> <span class="string token">" "</span> <span class="token url">url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif")</span><span class="punctuation token">;</span>
+<span class="punctuation token">}</span></code></pre>
+
+<h3 id="結果_2">結果</h3>
+
+<p>{{ EmbedLiveSample('Image_content', 600, 40) }}</p>
+</div>
+
+<p>次は何?</p>
+
+<div>{{nextPage("/ja/docs/CSS/Getting_Started/Lists", "Lists")}} スタイルシートでコンテンツを追加し、リストの項目に印をつけることがよくあります。次の章では <a href="/ja/docs/CSS/Getting_Started/Lists" title="CSS/Getting_Started/Lists">リスト要素のスタイル記述</a> について述べます。</div>
diff --git a/files/ja/learn/css/howto/index.html b/files/ja/learn/css/howto/index.html
new file mode 100644
index 0000000000..2ecbac3e25
--- /dev/null
+++ b/files/ja/learn/css/howto/index.html
@@ -0,0 +1,90 @@
+---
+title: CSS を使ってよくある問題を解決する
+slug: Learn/CSS/Howto
+tags:
+  - Beginner
+  - CSS
+  - Learn
+translation_of: Learn/CSS/Howto
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">以下のリンクは CSS で解決できるよくある問題の解決法です。</p>
+
+<h2 id="Common_use_cases" name="Common_use_cases">よくある使用例</h2>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Basics" name="Basics">基本</h3>
+
+<ul>
+ <li><a href="/ja/docs/Learn/CSS/First_steps/How_CSS_works#Applying_CSS_to_the_DOM">CSS を HTML に適用する</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax#White_space">CSS で空白を使用する</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Syntax#Comments">CSS でコメントを使用する</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Selectors#Type_class_and_ID_selectors">要素名、クラスまたは ID で要素を選択する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">属性名と内容から要素を選択する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes_and_pseudo-elements">擬似クラスの使い方</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes_and_pseudo-elements">擬似要素の使い方</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Selectors#Selector_lists">複数のセレクタに同じルールを適用する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS で色を指定する方法</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">ブラウザーで CSS をデバッグする方法</a></li>
+</ul>
+
+<h3 id="CSS_and_text" name="CSS_and_text">CSS とテキスト</h3>
+
+<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/Learn/CSS/Styling_text/Styling_links">リンクを装飾する方法</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">テキストに影を追加する方法</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Boxes_and_layouts" name="Boxes_and_layouts">ボックスとレイアウト</h3>
+
+<ul>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Building_blocks/Overflowing_content">How to control overflowing content</a></li>
+ <li><a href="/ja/docs/Web/CSS/background-clip">How to control the part of a CSS box that the background is drawn under</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
+ <li><a href="/ja/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/ja/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
+ <li><a href="/ja/docs/Web/CSS/background-clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Uncommon_and_advanced_techniques" name="Uncommon_and_advanced_techniques">まれで高度なテクニック</h2>
+
+<p>CSS ではとても高度なデザインテクニックも利用できます。これらの記事は、複雑な使用例を解き明かします。</p>
+
+<h3 id="General" name="General">一般的</h3>
+
+<ul>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
+ <li><a href="/ja/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
+</ul>
+
+<h3 id="Advanced_effects" name="Advanced_effects">高度なエフェクト</h3>
+
+<ul>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">CSS でフィルターを使用する方法</a></li>
+ <li><a href="/ja/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">CSS でブレンドモードを使用する方法</a></li>
+</ul>
+
+<h3 id="Layout" name="Layout">レイアウト</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/ja/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
+ <li><a href="/ja/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<p><a href="/ja/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — さまざまなトピック: デバッグからセレクタの使い方まで。</p>