HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLでインラインレイヤーを追加する方法｜ilayerタグの使い方と属性一覧

インラインレイヤーを追加するには、<ilayer>タグを使用します。HTMLの<ilayer>タグは、本文のテキストフロー内にスペースを占めるレイヤーを作成するためのものであり、それ以降のコンテンツは、このレイヤーが占めたスペースの後ろに配置されます。

これに対して<layer>タグは、テキストフロー全体の上に重なるレイヤーを作成します。そのため、後に続くコンテンツは、作成したレイヤーの下に隠れる形で配置される点が大きな違いです。

注意：非標準の廃止タグです

<ilayer>および<layer>は、かつてNetscape Navigator 4が独自に採用していた非標準タグです。Chrome・Firefox・Safari・Edgeなどの現行ブラウザではサポートされておらず、記述しても動作しません。同様の表現を実現したい場合は、CSSのpositionプロパティやz-indexなどを使用してください。以下の解説は歴史的な参考情報としてご覧ください。

<ilayer>タグの主な属性

属性値説明
aboveレイヤー名Z順序において、現在のレイヤーのすぐ上に配置されるインラインレイヤーの名前。
backgroundURLインラインレイヤーのテキストや画像が重ねて表示される背景画像のファイル名またはURL。
belowレイヤー名Z順序において、現在のレイヤーのすぐ下に配置されるインラインレイヤーの名前。
bgcolorrgb(x,x,x)
#xxxxxx
色名		インラインレイヤーの背景に使用する色。
clip数値インラインレイヤーの表示領域（クリッピング領域）の座標。
heightピクセルインラインレイヤーの高さ（ピクセル単位）。
left数値インラインレイヤーの左端の位置。現在のインラインレイヤーが別のレイヤー（親レイヤーと呼ばれます）の一部である場合、位置は親レイヤーを基準とした相対位置になります。
nameレイヤー名インラインレイヤーの名前。
pagex数値ブラウザウィンドウを基準としたインラインレイヤーの左端の位置。
pagey数値ブラウザウィンドウを基準としたインラインレイヤーの上端の位置。
srcURLインラインレイヤー内に表示するページのURL。
top数値インラインレイヤーの上端の位置。現在のインラインレイヤーが別のレイヤー（親レイヤー）の一部である場合、位置は親レイヤーを基準とした相対位置になります。
visibilityshow
hide
inherit		インラインレイヤーを表示するかどうかを指定します。
widthピクセルインラインレイヤーの幅（ピクセル単位）。
z-index数値Z順序におけるインラインレイヤーの位置。z-indexの値が大きいインラインレイヤーほど、値が小さいインラインレイヤーよりも上に配置されます。

サンプルコード

次のコードを実行すると、<ilayer>タグの動作を確認できます。top属性やleft属性に正の値を指定すると対象の単語が下方向・右方向へ移動し、負の値を指定すると上方向・左方向へ移動します。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML ilayer Tag</title>
    </head>
    <body>
        This <ilayer top = "4">word</ilayer> is shifted down, while this
        <ilayer left = "10">one</ilayer> is shifted over. With a negative value,
        words can be moved <ilayer top = "-4">up</ilayer> and to the
        <ilayer left = "-10">left</ilayer>.
    </body>
</html>

繰り返しになりますが、<ilayer>タグは現行のブラウザでは動作しません。実際の開発では、display:inline-blockやposition:relativeといったCSSを活用して、同じ視覚効果を実現することをおすすめします。

  1. HTML Webページにオーディオプレーヤーを追加する方法

    HTMLでのオーディオ再生の基本Webページに音声を埋め込むには、HTMLの<audio>要素を使用します。この要素にcontrols属性を追加すると、再生・一時停止・音量調整などができるオーディオプレーヤーがブラウザ上に表示されます。対応している音声フォーマットHTMLの<audio>要素でサポートされている主な音声フォーマットは以下の3つです。MP3（audio/mpeg）― 最も広く使われている形式で、ほぼすべてのブラウザで再生可能Wav（audio/wav）― 非圧縮の高音質形式だが、ファイルサイズが大きくなりがちOgg（audio/ogg）― オープンソースの

  2. HTMLで要素に値を追加するには？value属性の使い方を解説

    HTMLで要素に値を設定するには、value属性を使用します。value属性は、フォーム送信時にサーバーへ送られる初期値や、要素が持つ現在の値を指定するために使われます。 value属性が使用できる要素 value属性は、以下のHTML要素で利用できます。 <button> … ボタンのラベルとして送信される値 <input> … 入力フィールドの初期値 <li> … 順序付きリスト（<ol>）内での項目の開始番号 <option> … 選択肢としてサーバーへ送信される値 <meter> … 計測範囲内における現在の値