mdn · mfuji09 · May 10, 2023 · May 5, 2023 · May 10, 2023
@@ -5,7 +5,7 @@ slug: Glossary/Caret
 
 **キャレット** (テキストカーソルとも呼ばれる) は、テキスト入力が挿入される場所を示すために画面に表示されるインジケーターです。 ほとんどのユーザーインターフェイスは、細い縦線または点滅する文字サイズの四角形を使用してキャレットを表しますが、これはさまざまです。 テキスト内のこの位置は**挿入位置**と呼ばれます。「キャレット」という単語は、テキストの挿入位置をマウスカーソル (マウスポインター) と区別するためのものです。
 
-ウェブ上では、{{HTMLElement("input")}} 要素と {{HTMLElement("textarea")}} 要素と、{{htmlattrxref("contenteditable")}} 属性が設定されている要素の挿入位置を表すためにキャレットが使用され、要素の内容をユーザーが編集できるようにします。
+ウェブ上では、{{HTMLElement("input")}} 要素と {{HTMLElement("textarea")}} 要素と、[`contenteditable`](/ja/docs/Web/HTML/Global_attributes#contenteditable) 属性が設定されている要素の挿入位置を表すためにキャレットが使用され、要素の内容をユーザーが編集できるようにします。
 
 ## より詳しく知る
 
@@ -29,4 +29,4 @@ slug: Glossary/Caret
 - [`<input type="number">`](/ja/docs/Web/HTML/Element/input/number), [`<input type="range">`](/ja/docs/Web/HTML/Element/input/range)
 - [`<input type="email">`](/ja/docs/Web/HTML/Element/input/email), [`<input type="tel">`](/ja/docs/Web/HTML/Element/input/tel), and [`<input type="url">`](/ja/docs/Web/HTML/Element/input/url)
 - {{HTMLElement("textarea")}}
-- {{htmlattrxref("contenteditable")}} 属性が設定された要素
+- [`contenteditable`](/ja/docs/Web/HTML/Global_attributes#contenteditable) 属性が設定された要素
@@ -21,8 +21,8 @@ LTR とは逆に、 {{Glossary("RTL")}} (Right To Left, 右書き) はアラビ
 
 - [HTML グローバル属性](/ja/docs/Web/HTML/Global_attributes)
 
-  - {{htmlattrxref("dir")}}
-  - {{htmlattrxref("lang")}}
+  - [`dir`](/ja/docs/Web/HTML/Global_attributes#dir)
+  - [`lang`](/ja/docs/Web/HTML/Global_attributes#lang)
 
 - [CSS](/ja/docs/Web/CSS)
 

@@ -340,7 +340,7 @@ UI コントロールのアクセシビリティに対する一つの重要な
 </div>
 ```
 
-基本的に、{{htmlattrxref("tabindex")}} 属性は、タブ移動可能な要素に、単に既定のソース順でタブ処理されるのではなく、独自のタブ順序（正の値の順序で指定されます）を持たせるためのものです。これは大きな混乱を発生させる可能性があるため、常に悪い考えです。本当に必要な場合にのみ使用してください。例えば、レイアウトがソースコードとはまったく異なる形で視覚的に物を示していて、より論理的に作業させたい場合などです。`tabindex` のオプションは、他にも 2 種類あります。
+基本的に、[`tabindex`](/ja/docs/Web/HTML/Global_attributes#tabindex) 属性は、タブ移動可能な要素に、単に既定のソース順でタブ処理されるのではなく、独自のタブ順序（正の値の順序で指定されます）を持たせるためのものです。これは大きな混乱を発生させる可能性があるため、常に悪い考えです。本当に必要な場合にのみ使用してください。例えば、レイアウトがソースコードとはまったく異なる形で視覚的に物を示していて、より論理的に作業させたい場合などです。`tabindex` のオプションは、他にも 2 種類あります。
 
 - `tabindex="0"` — 上記のとおり、この値によって、普通ならタブキーでの移動が可能ではない要素が、タブキーでの移動が可能となります。これは、`tabindex` の一番有益な値です。
 - `tabindex="-1"` — これによって、普通ならタブキーでの移動が可能ではない要素が、（たとえば JavaScript を介して）プログラム的にフォーカスを得たり、あるいはリンクのターゲットとしてフォーカスを得たりすることが可能となります。
@@ -585,7 +585,7 @@ HTML には、{{htmlelement("figure")}} と {{htmlelement("figcaption")}} とい
 >
 ```
 
-このようなリンクの動作を示すために、テキストの代わりにアイコンを使用する場合は、{{HTMLAttrxRef("alt", "img", "代替テキスト", "true")}}を必ず含めてください。
+このようなリンクの動作を示すために、テキストの代わりにアイコンを使用する場合は、[代替テキスト](/ja/docs/Web/HTML/Element/img#alt)を必ず含めてください。
 
 - [WebAIM: Links and Hypertext - Hypertext Links](https://webaim.org/techniques/hypertext/hypertext_links)
 - [MDN WCAG を理解する、ガイドライン 3.2 の説明](/ja/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways)

@@ -290,7 +290,7 @@ This is the second.
 HTML のメディア再生と共に表示させるためには、次のことをする必要があります:
 
 - .vtt ファイルとしてアクセス可能な場所に保存します。
-- {{htmlelement("track")}} 要素で .vtt へのリンクを設定します。 `<track>` は `<audio>` か `<video>` の間に設置する必要がありますが、すべての `<source>` 要素の後でなければいけません。 {{htmlattrxref("kind","track")}} 属性を使い、キューが字幕、キャプション、ディスクリプションのどれなのかを指定します。さらに、 {{htmlattrxref("srclang","track")}} を使って、字幕でどの言語が使用されているのかを伝えます。
+- {{htmlelement("track")}} 要素で .vtt へのリンクを設定します。 `<track>` は `<audio>` か `<video>` の間に設置する必要がありますが、すべての `<source>` 要素の後でなければいけません。 [`kind`](/ja/docs/Web/HTML/Element/track#kind) 属性を使い、キューが字幕、キャプション、ディスクリプションのどれなのかを指定します。さらに、 [`srclang`](/ja/docs/Web/HTML/Element/track#srclang) を使って、字幕でどの言語が使用されているのかを伝えます。
 
 例を見てみましょう:
 

@@ -206,7 +206,7 @@ CSS の一括指定プロパティ [`all`](/ja/docs/Web/CSS/all) を使用して
 
 ### インラインスタイル
 
-インラインスタイル、つまり {{htmlattrxref("style")}} 属性内のスタイル宣言は、その詳細度に関わらず、すべての通常のスタイルよりも優先されます。このような宣言はセレクターがありませんが、その固有性は 1-0-0-0 と解釈され、セレクターにいくつの ID があっても、常に他のどの詳細度よりも高い重みを持ちます。
+インラインスタイル、つまり [`style`](/ja/docs/Web/HTML/Global_attributes#style) 属性内のスタイル宣言は、その詳細度に関わらず、すべての通常のスタイルよりも優先されます。このような宣言はセレクターがありませんが、その固有性は 1-0-0-0 と解釈され、セレクターにいくつの ID があっても、常に他のどの詳細度よりも高い重みを持ちます。
 
 ### !important
 
@@ -222,7 +222,7 @@ CSS の一括指定プロパティ [`all`](/ja/docs/Web/CSS/all) を使用して
 
 1. 3 番目のルールでは {{cssxref("color")}} と {{cssxref("padding")}} が適用されていますが、{{cssxref("background-color")}} は適用されていないことようです。なぜでしょうか？ソースオーダーの後の方は、普通は前の方のルールをオーバーライドするため、その観点では 3 つ すべてが適用されるはずです。
 2. とはいえ、クラスセレクターは要素セレクターよりも詳細度が高いため前者のルールが優先されます。
-3. 両方の要素には `better` という {{htmlattrxref("class")}} がありますが、2 番目 の要素には `winning` という {{htmlattrxref("id")}} もあります。ID はクラスよりも**より高い詳細度**があるため（ページ上では ID を持つ要素は一意に 1 つ しか置けないのに対し、同じクラスを持つ多くの要素がありえるため、ID セレクターの方が**非常に限定的**になります）、2 番目の要素には赤い背景色と 1 ピクセルの黒い境界線が適用され、最初の要素についてはクラスで指定されたように灰色の背景色となり、境界線は消えます。
+3. 両方の要素には `better` という [`class`](/ja/docs/Web/HTML/Global_attributes#class) がありますが、2 番目 の要素には `winning` という [`id`](/ja/docs/Web/HTML/Global_attributes#id) もあります。ID はクラスよりも**より高い詳細度**があるため（ページ上では ID を持つ要素は一意に 1 つ しか置けないのに対し、同じクラスを持つ多くの要素がありえるため、ID セレクターの方が**非常に限定的**になります）、2 番目の要素には赤い背景色と 1 ピクセルの黒い境界線が適用され、最初の要素についてはクラスで指定されたように灰色の背景色となり、境界線は消えます。
 4. 2 番目 の要素は赤い背景が適用されていますが、あるはずの境界線はありません。なぜでしょうか？ 2 つ目のルールに `!important` フラグがあるためです。`border: none` の後に `!important` フラグを追加すると、ID セレクターの方がより高い詳細度であっても、この宣言が前のルールの `border` 値に勝利するということです。
 
 > **メモ:** important 宣言を上書きする唯一の方法は、同じ詳細度を持つ別の important 宣言をソースの順番で後に記載するか、より高い詳細度を持つものを記載するか、前のカスケードレイヤーに important 宣言を記載することです（まだ、カスケードレイヤーについて触れていません）。

@@ -58,7 +58,7 @@ HTML の表を装飾することは、世界で最も魅力的な仕事ではあ
 </table>
 ```
 
-{{htmlattrxref("scope","th")}}、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません ([punk-bands-unstyled.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html) でライブを見る)。
+[`scope`](/ja/docs/Web/HTML/Element/th#scope)、{{htmlelement("caption")}}、{{htmlelement("thead")}}、{{htmlelement("tbody")}} などの機能のおかげで、表はうまくマークアップされ、簡単に装飾を整えられ、アクセスしやすくなりました。 残念なことに、画面に表示したときは見栄えがよくありません ([punk-bands-unstyled.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html) でライブを見る)。
 
 ![](table-unstyled.png)
 

@@ -333,7 +333,7 @@ a[href*="http"] {
 
 最後に、背景画像を表示するスペースを確保するためにリンクに {{cssxref("padding-right")}} を設定しているので、テキストと重なっていません。
 
-最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたが[HTML リンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト "http" は（2 番目と 3 番目のリンクのように）外部リンクにのみ現れ、これを[属性セレクタ](/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors)で選択できます。 `a[href*="http"]` は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ {{htmlattrxref("href","a")}} 属性がある場合に限ります。
+最後の一言 — どのように外部リンクだけを選択したのでしょうか？ あなたが[HTML リンク](/ja/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)を適切に記述しているのなら、外部リンクには絶対 URL のみを使用しているはずです — 自分のサイトの他の部分にリンクするには（最初のリンクのように）相対リンクを使用するほうが効率的です。 したがって、テキスト "http" は（2 番目と 3 番目のリンクのように）外部リンクにのみ現れ、これを[属性セレクタ](/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors)で選択できます。 `a[href*="http"]` は {{htmlelement("a")}} 要素を選択しますが、"http" を含む値を持つ [`href`](/ja/docs/Web/HTML/Element/a#href) 属性がある場合に限ります。
 
 それでは、これで全部です — 上の能動的学習セクションを再検討して、この新しいテクニックを試してみてください！
 

@@ -220,7 +220,7 @@ ul {
 
 ### start
 
-{{htmlattrxref("start","ol")}} 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、
+[`start`](/ja/docs/Web/HTML/Element/ol#start) 属性を使用すると、1 以外の数からリストを数え始めます。 次の例では、
 
 ```html
 <ol start="4">
@@ -237,7 +237,7 @@ ul {
 
 ### reversed
 
-{{htmlattrxref("reversed","ol")}} 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、
+[`reversed`](/ja/docs/Web/HTML/Element/ol#reversed) 属性はリストのカウントアップではなくカウントダウンを開始します。 次の例では、
 
 ```html
 <ol start="4" reversed>
@@ -256,7 +256,7 @@ ul {
 
 ### value
 
-{{htmlattrxref("value","ol")}} 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、
+[`value`](/ja/docs/Web/HTML/Element/ol#value) 属性を使用すると、リスト項目を特定の数値に設定できます。 次の例では、
 
 ```html
 <ol>