C C++ CMake CSS Cypress date-fns Django Django REST Framework ESLint Git GNU Make HTML htmx HTTP JavaScript MariaDB NumPy pandas PHP PostgreSQL Python PyTorch Qt SQLite Tailwind CSS

アクセスキー、編集可能、コンテキストメニュー：HTML Miscellaneous 属性の基礎

2024-04-02

HTMLのその他属性：詳細解説

accesskey 属性

  • 概要: 特定の要素にキーボードショートカットを割り当て、キーボード操作で素早くアクセスできるようにします。
  • 値: 英数字 1 文字またはキーの組み合わせ (例: "a", "Ctrl+Shift+S")
  • 例:
<a href="index.html" accesskey="h">ホームへ</a>

上記の例では、a要素にアクセスキー "h" を割り当てています。ユーザーが "h" キーを押すと、index.html ページに移動します。

contenteditable 属性

  • 概要: 要素の内容をユーザーが編集可能かどうかを指定します。

  • 値:

    • true: 要素の内容を編集可能にする
    • false: 要素の内容を編集不可にする (デフォルト)
    • inherit: 親要素の contenteditable 属性値を継承する
<div contenteditable="true">
  このテキストは編集可能です。
</div>

<p>このテキストは編集不可です。</p>

上記の例では、div要素は編集可能ですが、p要素は編集不可になっています。

contextmenu 属性

  • 概要: 要素を右クリックした時に表示されるコンテキストメニューをカスタマイズします。

  • 値:

    • 既存のメニューの ID
    • メニュー項目を定義する JavaScript コード
<p contextmenu="myMenu">
  右クリックメニューを表示
</p>

<script>
  function myMenu() {
    // メニュー項目を定義するコード
  }
</script>

上記の例では、p要素を右クリックすると、myMenu 関数によって定義されたカスタムメニューが表示されます。

4. data- 属性*

  • 概要: ユーザー定義のデータ属性を要素に追加します。
  • 値: 任意の文字列
<img src="image.jpg" data-description="これは風景写真です。" />

上記の例では、img要素に data-description 属性を追加し、画像の説明を記述しています。この属性は JavaScript でアクセスして処理することができます。

dir 属性

  • 概要: テキストの方向を指定します。

  • 値:

    • ltr: 左から右 (デフォルト)
    • rtl: 右から左
<p dir="rtl">
  これは右から左に表示されるテキストです。
</p>

上記の例では、p要素内のテキストは右から左に表示されます。

draggable 属性

  • 概要: 要素をドラッグ可能かどうかを指定します。

  • 値:

    • true: 要素をドラッグ可能にする
    • false: 要素をドラッグ不可にする (デフォルト)
<img src="image.jpg" draggable="true" />

上記の例では、img要素をドラッグ可能にしています。

hidden 属性

  • 概要: 要素を非表示にします。

  • 値:

    • 空白文字列: 要素を非表示にする
    • なし: 要素を表示する (デフォルト)
<p hidden>
  これは非表示のテキストです。
</p>

上記の例では、p要素は非表示になっています。

id 属性

  • 概要: 要素を一意に識別するために使用されます。
<h1 id="main-title">これはメインタイトルです。</h1>

上記の例では、h1要素に id 属性 "main-title" を割り当てています。この ID を使用して JavaScript で要素を操作したり、CSS でスタイルを適用したりすることができます。

lang 属性

  • 概要: 要素の内容の言語を指定します。

  • 値: 言語コード (例: "ja", "en-US")

<html lang="ja">

HTML Miscellaneous 属性 サンプルコード

accesskey 属性

<a href="index.html" accesskey="h">ホームへ</a>
<button onclick="alert('Hello!')" accesskey="s">送信</button>
  • a要素: "h" キーを押すと "index.html" ページに移動します。
  • button要素: "s" キーを押すと "Hello!" というメッセージが表示されます。

contenteditable 属性

<div contenteditable="true">
  このテキストは編集可能です。
</div>

<p contenteditable="false">このテキストは編集不可です。</p>

上記は、div要素とp要素に contenteditable 属性を設定した例です。

  • div要素: ユーザーが編集できます。
  • p要素: ユーザーが編集できません。

contextmenu 属性

<p contextmenu="myMenu">右クリックメニューを表示</p>

<script>
  function myMenu() {
    alert("メニュー項目1を選択しました");
  }
</script>

上記は、p要素に右クリックメニューを設定した例です。

  • p要素: 右クリックすると "メニュー項目1を選択しました" というメッセージが表示されます。

data-* 属性

<img src="image.jpg" data-description="これは風景写真です。" />
<a href="product.html" data-price="1000円">商品詳細</a>

<script>
  const imgDescription = document.querySelector('img').dataset.description;
  const productPrice = document.querySelector('a').dataset.price;

  console.log(imgDescription); // "これは風景写真です。"
  console.log(productPrice); // "1000円"
</script>

上記は、img要素とa要素にカスタムデータ属性を設定した例です。

  • img要素: data-description 属性に画像の説明を記述しています。

  • a要素: data-price 属性に商品の価格を記述しています。

  • JavaScript で dataset プロパティを使用して、これらの属性値にアクセスしています。

dir 属性

<p dir="rtl">これは右から左に表示されるテキストです。</p>

上記は、p要素内のテキストを右から左に表示する例です。

draggable 属性

<img src="image.jpg" draggable="true" />

<script>
  const img = document.querySelector('img');

  img.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', 'image.jpg');
  });
</script>

上記は、img要素をドラッグ可能にし、ドラッグした際に "image.jpg" というテキストデータを伝送する例です。

hidden 属性

<p hidden>これは非表示のテキストです。</p>

<button onclick="document.querySelector('p').hidden = false;">表示</button>

上記は、p要素を非表示にし、ボタンクリック時に表示する例です。

id 属性

<h1 id="main-title">これはメインタイトルです。</h1>

<script>
  const mainTitle = document.getElementById('main-title');

  console.log(mainTitle.textContent); // "これはメインタイトルです。"
</script>

上記は、h1要素に id 属性を設定


HTML Miscellaneous 属性のその他の方法

tabindex 属性

  • 概要: 要素のキーボードフォーカス順序を指定します。
  • 値: 整数
<input type="text" tabindex="1">
<button tabindex="2">送信</button>

上記は、input要素とbutton要素に tabindex 属性を設定した例です。

  • input要素: タブキーで最初にフォーカスされます。
  • button要素: タブキーで次にフォーカスされます。

spellcheck 属性

  • 概要: 要素の内容のスペルチェックを行うかどうかを指定します。

  • 値:

    • true: スペルチェックを行う
    • false: スペルチェックを行わない (デフォルト)
<input type="text" spellcheck="false">

上記は、input要素のスペルチェックを無効にする例です。

translate 属性

  • 概要: 要素の内容を翻訳するかどうかを指定します。

  • 値:

    • yes: 翻訳する
    • no: 翻訳しない (デフォルト)
<p translate="no">このテキストは翻訳されません。</p>

上記は、p要素内のテキストを翻訳しない例です。

class 属性

  • 概要: 要素にスタイルを適用するために使用されます。

  • 値: 空白文字で区切られたクラス名のリスト

<div class="container">
  <p class="title">これはタイトルです。</p>
  <p class="description">これは説明です。</p>
</div>

<style>
  .container {
    background-color: #fff;
    padding: 20px;
  }

  .title {
    font-size: 20px;
    font-weight: bold;
  }

  .description {
    font-size: 16px;
  }
</style>

上記は、div要素とp要素に class 属性を設定し、CSS でスタイルを適用した例です。

style 属性

  • 値: CSS スタイル記述

<p style="color: red; font-size: 20px;">これは赤いテキストです。</p>

上記は、p要素に style 属性を設定し、テキストの色とサイズを直接指定した例です。

title 属性

  • 概要: 要素にツールチップテキストを表示するために使用されます。

  • 値: ツールチップテキスト

<img src="image.jpg" title="これは風景写真です。" />

上記は、img要素に title 属性を設定し、マウスオーバー時にツールチップテキストを表示する例です。

7. data- 属性*

<button onclick="alert(


HTML 属性のデフォルト値とは？

例えば、input 要素には、type 属性があります。この属性には、テキスト入力、チェックボックス、ラジオボタンなど、さまざまな入力タイプを指定できます。上記のコードでは、type 属性は省略されていますが、デフォルト値である "text" が自動的に適用されます。つまり、上記はテキスト入力フィールドとして機能します。


フォーム入力をスムーズに！autocapitalize属性で入力文字の大文字化を制御

HTMLのautocapitalize属性は、入力フィールドにおける文字列の自動的な大文字化を制御します。フォーム入力の効率化やユーザーインターフェースの改善に役立ちます。属性値none: 自動大文字化を行わないsentences: 文頭の文字のみ大文字化

これで完璧！HTMLのwrap属性で実現する、見やすく使いやすいテキストエリア

wrap 属性は、textarea 要素で使用され、テキストエリア内のテキストが折り返される際の挙動を制御します。属性値hard: テキストが折り返された際に、改行コード (\n) を挿入します。soft: テキストが折り返された際に、改行コードは挿入せず、スペースで折り返します。

JavaScript で formaction 属性を変更する方法

formaction 属性は、HTML フォームの送信時にデータを処理するファイルの URL を指定します。これは <input> 要素と <button> 要素で使用できます。主な機能フォーム送信時に、formaction 属性で指定された URL にデータを送信します。

target属性を使いこなして、ユーザー体験を向上させる

属性値target属性には、以下の属性値を指定できます。_blank：新しいウィンドウまたはタブでリンク先を開きます。_self：現在のフレームまたはウィンドウでリンク先を開きます。_parent：親フレームでリンク先を開きます。_top：最上位のフレームでリンク先を開きます。



HTML の 要素以外のメタデータ指定方法

<meta name> 要素は、HTML ドキュメントに関するメタデータを指定するために使用されます。これは、ページのタイトル、説明、キーワード、およびその他の重要な情報を検索エンジンやその他の Web ブラウザに伝えるために役立ちます。 <meta name> 要素は、<head> セクション内に配置する必要があります。

HTML media属性でメディアに応じたスタイルシートを適用する方法

media属性 は、link要素 と style要素 の両方で使用できます。link要素 で使用する場合、media属性 は外部スタイルシートの適用対象となるメディアを指定します。例えば、以下のコードは、画面表示用のスタイルシートと印刷用のスタイルシートを指定します。

autoplay属性のすべて：動画・音声の自動再生をマスターしてサイトを進化させよう！

使い方はとっても簡単コード例上記のコードでは、autoplay属性を指定することで、sample. mp4とsample. mp3が自動再生されます。controls属性は、再生ボタンや音量調節バーなどのコントロールを表示します。注意点autoplay属性は、ユーザーにとって不快な場合もあります。特に、音声ファイルの場合は注意が必要です。

HTML スコープ属性の徹底解説！ 見出しとラベルの対象範囲をマスターしよう

th要素におけるスコープ属性は、表の見出しセルがどのセルと関連しているかを指定します。row: 見出しセルが同じ行のセルを対象とするcolgroup: 見出しセルが同じcolgroup要素内のセルを対象とするthead: 見出しセルが同じthead要素内のセルを対象とする

HTMLの「Attributes.for」属性：アクセシビリティと情報明確性を向上させるための使い方

「Attributes. for」は、HTMLの<label>と<output>要素で使用される属性です。それぞれの要素における役割と使用方法を以下に詳しく説明します。<label>要素は、フォーム要素にラベルを付けるために使用されます。「for」属性はこのラベルがどのフォーム要素に関連付けられているのかを指定するために使用されます。