Freecodecamp: [ベータ版]応用ビジュアルデザインはセマンティクスの悪い考えを与える

@ Facundo-Corradiniその通りです-これを報告してくれてありがとう。 これを修正しても問題ありませんか？ はいの場合は、寄稿ガイドラインに進んでください。 タイトルの名前をApplied Visual Design: Use the em Tag to Emphasize Text変更できます。

必要に応じて、この問題についてサポートしたいと思います

@manuhdezそれは素晴らしいです。 寄稿ガイドラインに進んでください。
@ raisedadead 、 @ systimoticこれを実装する必要がありますか？

こんにちは@ Facundo-懸念を提起し、課題を確認するために時間を割いてくれてありがとう。

この違いの重要性を明確にするのに役立つ、言い回しに対して行う必要のあるいくつかの提案された変更について、私たちを助けていただけますか？

私は同意します、現在の言い回しは学習に間違った概念を置くかもしれません。

確実なこと。 提案に取り組みましょう。それをアップロードします。同意していただければ、変更に取り組むことができます。

このセクションは実際にはセマンティクスではなくビジュアルデザインを扱っているため、それほど単純ではありません。 したがって、「テキストをイタリック体にする」セクションを呼び出して、各タグの使用例を説明する必要があるかもしれません。

こんにちは@ Facundo-Corradini！ 調子はどうですか？

やあみんな、

これをどのように行うかを考え、カリキュラムを進めて、どこに適しているかを確認しました。 しかし、これから抜け出す簡単な方法はありません。 私たちが選択するタグは、他のユースケースを除外し、1回のチャレンジでスタイルごとに異なるケースを絞り込もうとすると窮屈に感じます。 このセクションでは、セマンティクスではなく、適用されたビジュアルデザインを扱います。

一部の構造セマンティクスはアクセシビリティのセクションで説明されているため、テキストレベルのセマンティクスを追加する方法があるかもしれません。 または、後で適用されるビジュアルデザインセクションのタイムアウトとして。 しかし、カリキュラムの変更にまだ間に合うかどうかはわかりません（私たちはそうではないと思いますよね？）

したがって、オプションは次のようになります。

0-チャレンジはそのままにします

1-タイトルを「テキストを強調...」に変更し、テキストをイタリック体にする他の方法があることを説明します。
--- 1.A-は、仮想の新しいテキストレベルのセマンティクスセクションで後で説明します
--- 1.B-テキストレベルのセマンティクスに関する優れたソースをリンクするだけです

2-アンダースコア、取り消し線、フォントの太さ、斜体などのテキストスタイルに関するすべての視覚的なデザインの課題を、スパンなどの中立的なタグに変更し、CSSベースの課題に変えて、適用されるさまざまなタグがあることを説明します。デフォルトのスタイル。
--- 2.A-は、仮想の新しいテキストレベルのセマンティクスセクションで後ほど説明します。
--- 2.B-テキストレベルのセマンティクスに関する優れたソースをリンクするだけです

最善の解決策は2Aであり、1Aは非常に良い妥協点だと思う傾向があります。

それでも現実的であるため、おそらく1Bがその方法です。 問題に対処する説明と、実際の課題やカリキュラムを変更することなく、最高のキャンピングカーが飛び込むためのリンクを含む、意味のあるタイトル

考え？

@ Facundo-Corradini、テキストレベルのセマンティクスについてどのソースを念頭に置いていますか？

@raisedadead 、
問題の課題は次のとおりだと思います。

複数の見出し要素のフォントサイズを設定します
複数の見出し要素のフォントの太さを設定します
段落テキストのフォントサイズを設定します
段落の行の高さを設定します

良い解決策が見つかるまで、ベータ版が終わるまでそれらを変えるべきだと思います。
PRを作成し、シードから削除することができます。

PRを作成し、シードから削除することができます。

はいの場合、今すぐ削除することを意味しますか。 より多くのフィードバックを収集できるように、そのままにしておくのが最善だと思います。

@raisedadeadは今のところそれらを削除し、より正確に言い換えたり分類したりしたときにベータ後に追加します。 彼らがセマンティクスの間違った考えを与えた場合、おそらくキャンパーにそれらを通り抜けさせて概念を間違って学ばせるべきではありません:)

@ahmadabdolsahebどういうわけか私は通知を逃した申し訳ありません

引用したもの（font-size、font-weight、line-height）は、セマンティクスに直接関係していません。 すべてのテキストを<p>タグとして使用し、一部をヘッダーとして表示しようとするときにフォントサイズを調整するなど、奇妙なことを行う場合を除きます。 しかし、その解明は完全の導入での世話をしている<h>と<p>だけでなく、さらに_Appliedビジュアルデザインで明らかに最初のセクションの要素、：対ヘッダのサイズを調整します段落タグ_：

ヘッダータグ（h1からh6）のフォントサイズは、通常、段落タグのフォントサイズよりも大きくする必要があります。 これにより、ユーザーはページ上のすべてのレイアウトと重要度を視覚的に理解しやすくなります。 font-sizeプロパティを使用して、要素内のテキストのサイズを調整します。

課題のあるセクションは次のとおりです。

-強力なタグを使用してテキストを太字にする： <strong>要素はより重要なコンテンツ（警告など）用ですが、 <b>要素はテキストに注意を引くために使用されます。それがより重要であることを示しています。 どちらもデフォルトでは単に太字ですが、その意味は同じではありません

-uタグを使用してテキストに下線を引く：これはおそらく最も複雑です。W3C勧告を引用します。

u要素は、テキストを中国語のテキストの固有名詞としてラベル付けする（中国語の固有名詞マーク）、またはテキストのスペルミスとしてラベル付けするなど、明確にレンダリングされているものの、明確にレンダリングされていない非テキスト注釈を使用してテキストのスパンを表します。 （...）ほとんどの場合、別の要素がより適切である可能性があります

私の知る限り、ほとんどの言語では、ヘッダーなどにアンダースコアのみが必要であり、 <h(x)>タグのスタイルを設定することで対処する必要があります。 スペルミスも別のユースケースですが、意図的にスペルミスを書き込んだりマークを付けたりするようなシナリオになることはめったにありません...

-emタグを使用してテキストをイタリック体にします。
<em>タグは強調用です。たとえば、誰かがテキストセマンティクスが好きで、専門家ではない場合（：p）、「私はテキストセマンティクスに_それ_ではない」と言うことができます。 「あの」という言葉を強調することで、興味はあるものの、時々間違ったものを使うのを止められないことが明確になります。
<em>はデフォルトでイタリック体になっていますが、 <em>タグに任意のスタイルを付けることを妨げるものは何もありません。 私は通常、より大胆なフォントの太さも追加します。
同様に、すべてのイタリック体のテキストが強調を提供することを意図しているわけではありません。 定義、専門用語、または外国語（通常はラテン語の表現）で書かれたものを考えてください。 これらは、
<i>タグが正しい選択です。
または、 <cite>要素でさえ、通常は<q>または<blockquote>と一緒に使用される、作品または著者の名前を参照するときに、イタリック体のテキストを表示する正しい方法である可能性があります。

-delタグを使用してテキストを取り消します：
<del>は、削除されたコンテンツを対象としています。たとえば、以前のバージョンのドキュメントから削除されたコンテンツをマークする場合、たとえばgit（hub）は取り消し線と赤い背景を使用し、非取り消し線と新規/変更されたパーツの背景は緑色です。
<del>のデフォルトの出力は取り消し線ですが、テキストを取り消し線で囲むたびに<del>使用するべきではありません。
たとえば、割引商品の値札に参照通常価格をマークする場合など、関連性がなくなったものの代わりに<s>要素を使用することができます。
または、上記の定義がテキストを取り消し線で消す特定の理由に当てはまらない場合は、 <span>を使用して取り消し線としてスタイルを設定します。

それにもかかわらず、これらのセクションはすべて、アプライドビジュアルデザインにとって不可欠です。

したがって、私の推奨事項は、削除も延期もしませんが、それらをそのままにして、おそらくテキストレベルのセマンティクスの外部ソースにリンクされている、侵害されたセクションに少し説明を追加します。

テキストレベルのセマンティクスの私のお気に入りのソースは、W3C勧告です。
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
たとえば、各タグのユースケースに関するMDNの説明
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

ただし、少し技術的すぎるかもしれないので、初心者向けのオプションを探すか、freeCodeCampブログで自分で書くことができます:)

チャレンジのタイトルとイタリック体にするための<em>の使用は完全に間違っているので、名前を次のように変更する必要があると思います。
応用ビジュアルデザイン：イタリックフォントスタイルを使用してテキストをイタリック化する

そして、テキストを次のように変更します。

テキストを強調するには、emタグを使用できます。 ブラウザがfont-styleのCSSを適用するため、これはテキストをイタリックで表示します。 要素に。

に

テキストを斜体にするには、cssルール_font-style：italic_を斜体で表示する要素に適用します。

したがって、 <em>使用すると、独自の課題を抱えて、応用アクセシビリティセクションでより適切に表示される可能性があります。

皆様からのフィードバックありがとうございます。 私たちは主題ベースのカリキュラムから離れ、次のプロジェクトベースのカリキュラムでセマンティクスのより良い説明ができることを楽しみにしています。

@scissorsneedfoodtoo 、考え？

@ Facundo-Corradiniに詳細な説明とその他の検討をしていただき、ありがとうございます。プロジェクトの多くはまだ開発中であり、テストが完了すると段階的にリリースされます。 誰かが現在のビジュアルデザインの課題の説明を更新できる場合に備えて、この問題を今のところ開いたままにしておく価値があるかもしれません。

これを古いものとして閉じます。 誰かが会話を続けたい場合は、メッセージを残してください。これを再開できます。 みんなに感謝と幸せなコーディング🎉