diff options
Diffstat (limited to 'files/ja/learn/forms')
5 files changed, 11 insertions, 11 deletions
diff --git a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html index 5b3ade8ff2..8e6f1ed7f8 100644 --- a/files/ja/learn/forms/how_to_build_custom_form_controls/index.html +++ b/files/ja/learn/forms/how_to_build_custom_form_controls/index.html @@ -338,7 +338,7 @@ original_slug: Learn/Forms/How_to_build_custom_form_widgets <li>スクリプトが読み込まれません。これはよくあるケースのひとつであり、特にネットワークの信頼性が低いモバイル環境で発生します。</li> <li>スクリプトに不具合があります。この可能性は常に考慮すべきです。</li> <li>スクリプトがサードパーティのスクリプトと競合しています。これは、トラッキングのスクリプトやユーザーが使用するブックマークレットとの間で発生する可能性があります。</li> - <li>スクリプトがブラウザーの拡張機能 (Firefox の <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external" title="https://addons.mozilla.org/fr/firefox/addon/noscript/">NoScript</a> 拡張機能や Chrome の <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external">NotScripts</a> 拡張機能など) と競合したり、拡張機能の影響を受けたりしています。</li> + <li>スクリプトがブラウザーの拡張機能 (Firefox の <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external">NoScript</a> 拡張機能や Chrome の <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external">NotScripts</a> 拡張機能など) と競合したり、拡張機能の影響を受けたりしています。</li> <li>ユーザーが古いブラウザーを使用しており、必要な機能のいずれかがサポートされていません。これは、最先端の API を使用するときに頻繁に発生します。</li> <li>ユーザーは JavaScript が完全にダウンロード、解析、実行される前にコンテンツを操作します。</li> </ul> @@ -703,7 +703,7 @@ window.addEventListener('load', function () { <p>フル機能のセレクトボックスとはかけ離れていますが動作するものはできましたし、よく動作しています。しかし、私たちが行ってきたことは DOM の操作にすぎません。これには実際のセマンティクスがなく、またセレクトボックスのように見えていてもブラウザーの視点からはそうではないため、支援技術はそれがセレクトボックスであるとは理解できません。つまり、このきれいなセレクトボックスはアクセシブルではありません!</p> -<p>幸いなことに解決策があり、それは <a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その <a href="http://www.w3.org/TR/wai-aria/" rel="external" title="http://www.w3.org/TR/wai-aria/">W3C 仕様</a> は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。</p> +<p>幸いなことに解決策があり、それは <a href="/ja/docs/Accessibility/ARIA" title="Accessibility/ARIA">ARIA</a> と呼ばれます。ARIA は "Accessible Rich Internet Application" を表し、その <a href="http://www.w3.org/TR/wai-aria/" rel="external">W3C 仕様</a> は私たちがここで行っていることに特化して設計されています: ウェブアプリケーションやカスタムコントロールをアクセシブルにします。これは基本的には、私たちが作り出した要素がネイティブコントロールとして通るかのように、役割や状態や特性をより説明できるようにするために HTML を拡張する属性のセットです。これらの属性の使用はとても簡単ですので、行ってみましょう。</p> <h3 id="The_role_attribute" name="The_role_attribute"><code>role</code> 属性</h3> @@ -757,7 +757,7 @@ window.addEventListener('load', function () { <p>スクリーンリーダーにオフスクリーンselectに焦点をあてて他のスタイルを無視するようにした法が簡単に見えますが、これはアクセシブルな解決策ではありません。スクリーンリーダーは盲目の人だけのものではありません。低視力や、完全な視力の人もこれを使います。このため、スクリーンリーダーをオフスクリーン要素だけに焦点をあてるようにはできません。</p> -<p>以下がこれらの変更を施した最終結果です (<a href="http://www.nvda-project.org/" rel="external">NVDA</a> や <a href="http://www.apple.com/accessibility/voiceover/" rel="external" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):</p> +<p>以下がこれらの変更を施した最終結果です (<a href="http://www.nvda-project.org/" rel="external">NVDA</a> や <a href="http://www.apple.com/accessibility/voiceover/" rel="external">VoiceOver</a> などの支援技術でコントロールを使用してみても、よい感触を得られるでしょう):</p> <table> <thead> diff --git a/files/ja/learn/forms/how_to_structure_a_web_form/index.html b/files/ja/learn/forms/how_to_structure_a_web_form/index.html index 03f2520b12..3bdc3b5f28 100644 --- a/files/ja/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/ja/learn/forms/how_to_structure_a_web_form/index.html @@ -51,7 +51,7 @@ original_slug: Learn/Forms/How_to_structure_an_HTML_form <p>{{HTMLElement("fieldset")}} 要素は、スタイルや意味付けのために、同じ目的を持つウィジェットのグループの作成に便利です。{{HTMLElement("fieldset")}} 要素は、<code><fieldset></code> タグのすぐ下に {{HTMLElement("legend")}} 要素を入れてラベルを付与できます。{{HTMLElement("legend")}} 要素は、{{HTMLElement("fieldset")}} 要素の目的を正式に説明します。</p> -<p>多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external" title="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Jaws</a> や <a href="http://www.nvda-project.org/" rel="external">NVDA</a> といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。</p> +<p>多くの支援技術は {{HTMLElement("legend")}} 要素を、対応する {{HTMLElement("fieldset")}} 要素内にある各ウィジェットのラベルの一部であるかのように扱うでしょう。例えば <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external">Jaws</a> や <a href="http://www.nvda-project.org/" rel="external">NVDA</a> といったスクリーンリーダーは、各ウィジェットのラベルを読み上げる前に legend の内容を読み上げます。</p> <p>以下に小さなサンプルを挙げます:</p> @@ -301,7 +301,7 @@ original_slug: Learn/Forms/How_to_structure_an_HTML_form <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external" title="http://www.alistapart.com/articles/sensibleforms/">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> + <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li> </ul> <p>{{PreviousMenuNext("Learn/HTML/Forms/Your_first_HTML_form", "Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms")}}</p> diff --git a/files/ja/learn/forms/other_form_controls/index.html b/files/ja/learn/forms/other_form_controls/index.html index dd8b463ed4..28be191eb4 100644 --- a/files/ja/learn/forms/other_form_controls/index.html +++ b/files/ja/learn/forms/other_form_controls/index.html @@ -226,7 +226,7 @@ translation_of: Learn/Forms/Other_form_controls <h4 id="Less_obvious_datalist_uses" name="Less_obvious_datalist_uses">Less obvious datalist uses</h4> -<p>According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external" title="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. This leads to some uses of it that might seem a little non-obvious.</p> +<p>According to <a href="http://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. This leads to some uses of it that might seem a little non-obvious.</p> <p>例えば、in browsers that support <code>{{htmlelement("datalist")}}</code> on <code>range</code> input types, a small tick mark will be displayed above the range for each datalist <code>{{htmlelement("option")}}</code> value. You can see an implementation <a href="/ja/docs/Web/HTML/Element/input/range#A_range_control_with_hash_marks">example of this on the <code><input type="range"></code> reference page</a>.</p> diff --git a/files/ja/learn/forms/styling_web_forms/index.html b/files/ja/learn/forms/styling_web_forms/index.html index 829b0d4604..a549329e48 100644 --- a/files/ja/learn/forms/styling_web_forms/index.html +++ b/files/ja/learn/forms/styling_web_forms/index.html @@ -33,7 +33,7 @@ original_slug: Learn/Forms/Styling_HTML_forms <h2 id="Why_is_it_so_hard_to_style_form_widgets_with_CSS" name="Why_is_it_so_hard_to_style_form_widgets_with_CSS">なぜ CSS によるフォームウィジェットへのスタイル設定は困難であるか?</h2> -<p>1995年頃に <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal" title="http://www.ietf.org/rfc/rfc1866.txt">HTML 2 仕様</a>へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。</p> +<p>1995年頃に <a href="http://www.ietf.org/rfc/rfc1866.txt" rel="extrenal">HTML 2 仕様</a>へフォームコントロールが追加されました。CSS は 1996年までリリースされず、その後も少しのブラウザーによって十分サポートされませんでした。ブラウザーはフォームコントロールの管理や表示について下層の OS に頼ることを選択しました。</p> <p>CSS が HTML のスタイル設定できるようになってからも、ユーザーは各プラットフォームの視覚的な外見に慣れていましたので、ブラウザーベンダーはフォームコントロールをスタイル付け可能にすることに乗り気ではありませんでした。しかしこれは変わりました。ウェブサイトのオーナーはこれまでよりも、サイト全体に適するスタイルを欲しており、ウェブプラットフォームはこれを実現可能にしました。</p> @@ -206,8 +206,8 @@ legend { <ol> <li>はがきの<a href="https://developer.mozilla.org/files/4151/background.jpg" title="The postcard background">背景</a> — この画像をダウンロードして作業している HTML ファイルと同じディレクトリーに保存します。</li> - <li>タイプライター風フォント: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external" title="http://www.fontsquirrel.com/fonts/Secret-Typewriter">fontsquirrel.com の "Secret Typewriter" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> - <li>手書き風フォント: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external" title="http://www.fontsquirrel.com/fonts/Journal">fontsquirrel.com の "Journal" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> + <li>タイプライター風フォント: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external">fontsquirrel.com の "Secret Typewriter" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> + <li>手書き風フォント: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external">fontsquirrel.com の "Journal" </a> — TTF ファイルを上記と同じディレクトリーにダウンロードします。</li> </ol> <p>始める前にフォントの処理が必要です:</p> diff --git a/files/ja/learn/forms/your_first_form/index.html b/files/ja/learn/forms/your_first_form/index.html index dc144d0bd3..24e638b9e1 100644 --- a/files/ja/learn/forms/your_first_form/index.html +++ b/files/ja/learn/forms/your_first_form/index.html @@ -51,8 +51,8 @@ translation_of: Learn/Forms/Your_first_form <p>フォームの設計は、サイトやアプリケーションを構築する際の大事なステップです。フォームのユーザー体験まで扱うと本記事の対象を超えてしまいますが、そこまで踏み込みたい場合は以下の記事をご覧ください。</p> <ul> - <li>Smashing Magazine に<a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external" title="http://uxdesign.smashingmagazine.com/tag/forms/">フォームの UX に関するよい記事</a>がありますが、もっとも重要な記事は <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external">Extensive Guide To Web Form Usability</a> でしょう。</li> - <li>UXMatters もまた、<a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php" title="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">複数ページのフォーム</a>といった複雑なことへの<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external">基本的なベストプラクティス</a>から良いアドバイスを得られる、思慮深いリソースです。</li> + <li>Smashing Magazine に<a href="http://uxdesign.smashingmagazine.com/tag/forms/" rel="external">フォームの UX に関するよい記事</a>がありますが、もっとも重要な記事は <a href="http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/" rel="external">Extensive Guide To Web Form Usability</a> でしょう。</li> + <li>UXMatters もまた、<a href="http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php">複数ページのフォーム</a>といった複雑なことへの<a href="http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php" rel="external">基本的なベストプラクティス</a>から良いアドバイスを得られる、思慮深いリソースです。</li> </ul> <p>本記事では、シンプルな連絡フォームを作成します。簡単に図を描いてみましょう。</p> |