HTML辞典 ins要素、del要素、span要素の解説

HTML辞典 HTML辞典
この記事は約10分で読めます。

追加したことを示す<ins>タグ、削除したことを示す<del>タグ、フレーズをグループ化する<span>タグの使用方法について掲載

HTML5

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

カテゴリー・コンテンツモデル

カテゴリー コンテンツモデル
ins要素
  • フローコンテンツ
  • フレージングコンテンツ
  • インタラクティブコンテンツ
  • パルパブルコンテンツ
トランスペアレントコンテツ
del要素
span要素
  • パルパブルコンテンツ
  • フレージングコンテンツ
  • フローコンテンツ
フレージングコンテンツ

属性

グローバル属性

グローバル属性は、すべての要素に指定できる共通の属性のことです。

accesskey(アクセスキー)

要素にアクセスキーを割り当てます。いわゆるショートカットキーになります。

autocapitallze

入力/編集されたとき、入力文字列の先頭大文字化が自動的に行われるかどうかなどを指定します

内容
offまたはnone自動的な大文字化は指定しない
onまたはsentences最初の文字を大文字化する
words各語の最初の文字を大文字化する
charactersすべての文字を大文字化する

class(クラス)

要素に分類上の名前を指定します。CSSのセレクタで、特定の要素を選択できるようになります。

contenteditable(コンテント・エディタブル)

要素の内容が閲覧者による編集可能かどうか指定します。

内容
trueまたは、空閲覧者による編集可能。
false閲覧者による編集不可。

data-

カスタムデータ属性、JavaScriptで使用するための独自の属性を指定します。「data-*****=””」のような形式で開発者が自由に指定できます。JavaScriptを利用してデータ処理したり、独自のデータを入力したりするために使用します。

dir(ディレクショナリティ)

要素の内容の書字方向(文字を書き進める方向)を指定します。

内容
ltrテキストを左から右へ書き進める。「Left to Righ」の略
rtl要素は編集不可。「Right to Left」の略
autoユーザーエージェントによって自動的に書字方向を決める

draggable

Drag and Drop APIを使用して要素をドラッグすることができるか指定します。

内容
テキストを左から右へ書き進める。「Left to Righ」の略
autoユーザーエージェントによって自動的に書字方向を決める

hidden(ヒドゥン)

要素がその時点でのページの内容に関連がないことを表し、指定された要素は表示されません。用途としては、ページ内に表示したくないデータの値などをセットしておき、POSTなどで値を送信する場合などに使用したりします。(商品IDやユーザーID)

id(アイディー)

要素にユニークな識別IDを指定します。文章内で一意である必要があり、同じ値を複数のidに設定することはできません。CSSのセレクタで、特定の要素を選択できるようになります。また、リンクのフラグメント識別子としても利用できます。

空白文字は使用できません。

lang(ランゲージ)

要素の内容の言語を指定します。html要素や文書全体に対して指定することができます。また、一部の要素に対しても指定することができます。

例:lang=”ja”

spellcheck(スペルチェック)

要素の内容に対するスペルチェックの可否を指定します。

trueスペルチェックをします。
falseスペルチェックをしません。

style(スタイル)

要素に直接スタイルシートを指定します。

※style属性でスタイルを指定する方法はあまり推奨されていません。

tabindex(タブインデックス)

「TABキー」による移動順序を指定します。正の数値で指定すると、その順序にフォーカスが移動します。負の数値を指定すると選択することができますが、TABキーでの移動順序に含まれません。また、0を指定した要素は最後にフォーカスします。

title(タイトル)

要素に補足情報を加えます

translate(トランスレート)

翻訳対象にするかどうかを指定します。

内容
yes翻訳対象とする
no翻訳非対象とする

イベントハンドラ属性は、JavaScriptのコードを閲覧者の操作に合わせて実行する属性です。

onclick

要素をクリックしたときにスクリプトを実行します。

oninput

入力コントロールにデータを入力したときにスクリプトを実行します。

onsubmit

入力コントロールからデータを送信するときにスクリプトを実行します。

使用できる属性

ins要素、del要素共通

cite(サイト)

テキストの追加、削除が他のリソースを根拠に行われた場合に、URLを指定できます。

<ins cite="URL">~</ins>
<del cite="URL">~</del>

datetime(サイト)

テキストが追加、削除された日時を表します。コンピュータによって使用可能な日時形式を指定します。(yyyy-mm-dd形式)

<ins datetime="yyyy-mm-dd">~</ins>
<del datetime="yyyy-mm-dd">~</del>

ins要素

書式・概要

<ins cite="URL" datetime="追加日時">~</ins>

ins要素は、その部分が、後から追加した部分であることを示します。ブラウザによって表示方法は異なりますが、一般的には下線のついた状態やイタリックで表示されます。また、ブラウザによっては、title属性で指定した短い説明をツールチップとして表示させることもできます。この要素は、指定する範囲に応じて、インライン要素としてもブロックレベル要素としても使用できます。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ins要素+del要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <h1>2022年 世界のブラウザシェアランキング</h1>
      <ul>
        <li>1位 Chrome</li>
        <li><ins datetime="2022-03-01">2位:Edge</ins></li>
        <li>3位:Safari</li>
        <li>4位 Firefox</li>
        <li>5位 Opera</li>
      </url>
  </body>
</html>

実行サンプル

chrome実行サンプル

基本的な使用方法サンプル ins要素 chrome実行サンプル

Firefox実行サンプル

基本的な使用方法サンプル ins要素 firefox実行サンプル

edge 実行サンプル

基本的な使用方法サンプル ins要素 edge実行サンプル

opera 実行サンプル

基本的な使用方法サンプル ins要素 opera実行サンプル

del要素

<del cite="URL" datetime="削除日時">~</del>

del要素は、その部分が、後から削除された部分であることを示します。ブラウザによっては表示方法は異なりますが、一般的には取消線がつけられた状態で表示されます。また、ブラウザによっては、title属性で指定した短い説明をツールチップとして表示させることもできます。

この要素は、指定する範囲に応じて、インライン要素としてもブロックレベル要素としても使用することができます。

基本的な使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>ins要素+del要素 サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <h1>2022年 世界のブラウザシェアランキング</h1>
      <ul>
        <li>1位 Chrome</li>
        <li><ins cite="https://kcfran.com/" datetime="2022-03-01">2位:Edge</ins></li>
        <li><del cite="https://kcfran.com/" datetime="2022-03-01">2位:Safari</del></li>
        <li><ins cite="https://kcfran.com/" datetime="2022-03-01">3位:Safari</ins></li>
        <li>4位 Firefox</li>
        <li>5位 Opera</li>
      </url>
  </body>
</html>

実行サンプル

chrome実行サンプル

基本的な使用方法サンプル del要素 chrome実行サンプル

Firefox実行サンプル

基本的な使用方法サンプル del要素 firefox実行サンプル

edge 実行サンプル

基本的な使用方法サンプル del要素 edge実行サンプル

opera 実行サンプル

基本的な使用方法サンプル del要素 opera実行サンプル

span要素

インラインレベル要素

書式・概要

<span>~</span>

span要素は特定の意味を持ちません、ただその範囲を示す要素です。span要素はインラインレベル要素です。任意の範囲をグループ化したい場合や、CSSを適用するために範囲を指定する必要がある場合はなどに使用します。

その範囲に使用すべき適切な範囲がある場合は、span要素は使用せず適切な要素を使用します。

使用方法

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>span要素サンプルページ</title>
    <meta charset="uft-8">
  </head>
  <body>
      <h1>上野動物園に行ってきました。</h1>
      <p>丁度日よりもよく桜も咲いていたのでたくさんの<span class="emphasis">人出</span>がでていました。</p>
  </body>
  <style>
      .emphasis{ color: red; }
  </style>
</html>

実行サンプル

chrome実行サンプル

基本的な使用方法サンプル span要素 chrome実行サンプル

Firefox実行サンプル

基本的な使用方法サンプル span要素 firefox実行サンプル

edge 実行サンプル

基本的な使用方法サンプル span要素 edge実行サンプル

opera 実行サンプル

基本的な使用方法サンプル span要素 opera実行サンプル

コメント

タイトルとURLをコピーしました