diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-07-12 10:11:30 +0900 |
|---|---|---|
| committer | potappo <potappo@gmail.com> | 2021-07-18 18:33:18 +0900 |
| commit | fd1e2435671adf89d5a2718fc7d1454828f147ae (patch) | |
| tree | 769a406472882e3bafda9e32fb8b4414cfcfb1d5 /files/ja/learn/forms/styling_web_forms | |
| parent | b0caefeaf81fd55008397bfd6f7765e15cecd224 (diff) | |
| download | translated-content-fd1e2435671adf89d5a2718fc7d1454828f147ae.tar.gz translated-content-fd1e2435671adf89d5a2718fc7d1454828f147ae.tar.bz2 translated-content-fd1e2435671adf89d5a2718fc7d1454828f147ae.zip | |
remove wiki.developer.mozilla.org links
Diffstat (limited to 'files/ja/learn/forms/styling_web_forms')
| -rw-r--r-- | files/ja/learn/forms/styling_web_forms/index.html | 50 |
1 files changed, 25 insertions, 25 deletions
diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index c64d5f4622..829b0d4604 100644 --- a/files/ja/learn/forms/styling_web_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -14,14 +14,14 @@ original_slug: Learn/Forms/Styling_HTML_forms --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/Other_form_controls","Learn/Forms/Advanced_form_styling","Learn/Forms")}}</p> -<p class="summary">前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する <a href="https://wiki.developer.mozilla.org/ja/docs/CSS" title="/ja/docs/CSS">CSS</a> の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。</p> +<p class="summary">前の記事ではウェブフォームを構築するのに必要な HTML のすべてを見てきました。この記事ではフォームコントロールにスタイル設定する <a href="/ja/docs/CSS" title="/ja/docs/CSS">CSS</a> の使い方に進みます。これは歴史的に難しかったです — フォームコントロールは大きく変わり CSS を使ったフォームのカスタマイズは簡単になりました— しかし古いブラウザーが引退してモダンブラウザーが多くの機能を与えるため、より簡単になりました。</p> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">前提条件:</th> <td> - <p>基本的なコンピューターリテラシーと、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</p> + <p>基本的なコンピューターリテラシーと、<a href="/ja/docs/Learn/HTML/Introduction_to_HTML">HTML</a> と <a href="/ja/docs/Learn/CSS/First_steps">CSS</a> の基本的な理解。</p> </td> </tr> <tr> @@ -50,7 +50,7 @@ original_slug: Learn/Forms/Styling_HTML_forms <ol> <li>{{HTMLElement("form")}}</li> <li>{{HTMLElement("fieldset")}} と {{HTMLElement("legend")}}</li> - <li>単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code>を除く</li> + <li>単一行のテキスト {{HTMLElement("input")}} (例 text, url, email...のタイプ) <code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code>を除く</li> <li>複数行の {{HTMLElement("textarea")}}</li> <li>ボタン ({{HTMLElement("input")}} と {{HTMLElement("button")}}の両方)</li> <li>{{HTMLElement("label")}}</li> @@ -63,7 +63,7 @@ original_slug: Learn/Forms/Styling_HTML_forms <ol> <li>チェックボックスとラジオボタン</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> </ol> <p>これら特殊なケースをどのように扱うかについては、<a href="/ja/docs/Advanced_styling_for_HTML_forms" title="Advanced_styling_for_HTML_forms">HTML フォームへの高度なスタイル設定</a>の記事で見ていきます。</p> @@ -73,10 +73,10 @@ original_slug: Learn/Forms/Styling_HTML_forms <p>一部の要素は、CSS でスタイルを設定できません。たとえば次のもの:</p> <ul> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> - <li><code><a href="https://wiki.developer.mozilla.org/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/color"><input type="color"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>のような日付関連コントロール</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/range"><input type="range"></a></code></li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/file"><input type="file"></a></code></li> <li>ドロップダウンウィジェットの作成に含まれる要素、{{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("datalist")}}を含む。</li> <li>{{HTMLElement("progress")}} と {{HTMLElement("meter")}}</li> </ul> @@ -95,7 +95,7 @@ original_slug: Learn/Forms/Styling_HTML_forms <p>CSS での<a href="/ja/docs/HTML/Forms/Styling_HTML_forms#The_good" title="HTML/Forms/Styling_HTML_forms#The_good">スタイル設定が容易な要素</a>は、振る舞いが他の HTML 要素とほとんど同じであるため、問題に直面することはないでしょう。ただし、ブラウザー間でユーザーエージェントのスタイルシートが若干矛盾するかもしれませんので、より簡単にスタイルを設定できるようにするためのトリックがあります。</p> -<p>上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、<a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>で扱います。</p> +<p>上記で述べた基本的な CSS ツールと同じく、いくつかのセレクターが与えられます — UI 疑似クラス — これにより現在の UI の状態に基づくスタイル設定ができます。これは次の記事である、<a href="/ja/docs/Learn/Forms/UI_pseudo-classes">UI 疑似クラス</a>で扱います。</p> <p>この記事の最後で基本的なフォームコントロールのスタイル設定と配置について理解できる実例を詳しく見ていきます。しかしその前に、知っておくと良いフォームスタイル設定の特定の面をいくつか述べておきます。</p> @@ -266,7 +266,7 @@ form { grid-template-rows : 10em 1em 1em 1em; }</pre> -<p>注意として、フォームをレイアウトするのに <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> と <a href="https://wiki.developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:</p> +<p>注意として、フォームをレイアウトするのに <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> と <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> を使っています。これで、タイトルやフォーム要素といった各要素を配置できます:</p> <pre class="brush: css notranslate">h1 { font : 1em "typewriter", monospace; @@ -364,7 +364,7 @@ button:focus { <h2 id="スキルを試しましょう!"><strong>スキルを試しましょう!</strong></h2> -<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか?次に進む前に、テストによって知識の定着を試すことができます——<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト:スタイリングの基本</a>をご覧ください。</p> +<p>この記事の終わりまで到達しました。しかし、肝要な点を思い起こせるでしょうか?次に進む前に、テストによって知識の定着を試すことができます——<a href="/en-US/docs/Learn/Forms/Test_your_skills:_Styling_basics">スキルテスト:スタイリングの基本</a>をご覧ください。</p> <h2 id="Conclusion" name="Conclusion">まとめ</h2> @@ -374,27 +374,27 @@ button:focus { <h2 id="In_this_module" name="In_this_module">このモジュール</h2> -<h2 id="In_this_module" name="In_this_module"><a class="button section-edit only-icon" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls$edit#In_this_module" rel="nofollow, noindex"><span>E</span></a></h2> +<h2 id="In_this_module" name="In_this_module"><a class="button section-edit only-icon" href="/ja/docs/Learn/HTML/Forms/Other_form_controls$edit#In_this_module" rel="nofollow, noindex"><span>E</span></a></h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームウィジェット</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Styling_web_forms">フォームへのスタイル設定</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> + <li><a href="/ja/docs/Learn/Forms/Your_first_form">初めてのフォーム</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">フォームの構築方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Basic_native_form_controls">ネイティブフォームウィジェット</a></li> + <li><a href="/ja/docs/Learn/Forms/HTML5_input_types" rel="noopener">The HTML5 input types</a></li> + <li><a href="/ja/docs/Learn/Forms/Other_form_controls" rel="noopener">Other form controls</a></li> + <li><a href="/ja/docs/Learn/Forms/Styling_web_forms">フォームへのスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/Advanced_form_styling">フォームへの高度なスタイル設定</a></li> + <li><a href="/ja/docs/Learn/Forms/UI_pseudo-classes" rel="noopener">UI pseudo-classes</a></li> + <li><a href="/ja/docs/Learn/Forms/Form_validation">フォームデータの検証</a></li> <li><a href="https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">フォームデータの送信</a></li> </ul> <h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><span class="highlight-span">上級トピック</span></h3> -<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><a class="local-anchor" href="https://wiki.developer.mozilla.org/ja/docs/Learn/HTML/Forms/Other_form_controls#Advanced_Topics"><span>セクション</span></a></h3> +<h3 class="highlight-spanned" id="Advanced_Topics" name="Advanced_Topics"><a class="local-anchor" href="/ja/docs/Learn/HTML/Forms/Other_form_controls#Advanced_Topics"><span>セクション</span></a></h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> - <li><a href="https://wiki.developer.mozilla.org/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> + <li><a href="/ja/docs/Learn/Forms/How_to_build_custom_form_controls" rel="noopener">カスタムフォームコントロールの作成方法</a></li> + <li><a href="/ja/docs/Learn/Forms/Sending_forms_through_JavaScript" rel="noopener">JavaScript によるフォームの送信</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_widgets" rel="noopener">フォームウィジェット向けプロパティ実装状況一覧</a></li> </ul> |
