【9月枠も残りわずか】転職保証コース

【HTML初心者入門】属性ってそもそも何を意味するの?使い方も解説!

 

HTMLの属性とは、要素の設定をするためのものです。属性はひとつの要素に対していくつも設定できたり、書き方に一定のルールがあったりします。今回は属性の役割や書き方、さまざまな使い方などについての情報をお伝えしていきます。

属性とは?htmlではどのような役割をしている?

属性とはhtmlの要素に対して性質を与える役割をしています。対象のタグのリンク先、幅、使用可能不可能、最大文字数などを設定し、htmlのタグがどのような振る舞いをするのかを規定するのが属性の主な役割です。

例えばimageタグの場合、src属性は画像のパスを規定します。width属性は画像の横幅を、height属性は画像の縦幅をといった具合です。htmlの要素ごとに利用できる属性は異なり、要素には複数の属性を同時に設定できます。属性はブラウザやブラウザのバージョンによっても挙動やデザインが異なることもあり、すべてのブラウザに有効でないものもあります。

その場合はjavascriptやcssなどのスクリプトで機能を補完するなどの工夫をする必要があります。

属性の書き方は=で結んで”で閉じる

属性は「属性名=”属性の設定”」といった形式で設定する場合がほとんどです。中には属性名を要素のタグの中に記述するだけで設定完了できるものもありますが、多くの属性は右辺に設定の値を記入する必要があります。

また数値以外の文字列を設定する場合、ダブルクォーテーション(”)で囲むのがルールです。ダブルクォーテーションで囲んでいない場合、ブラウザが認識できない可能性もあります。

またエディターでも色分けがちゃんとできず、わかりやすいファイルになってしまうので注意が必要です。ちなみに数値であってもダブルクォーテーションで囲むことができます。

すべての要素に共通「グローバル属性」とは?

グローバル属性とはすべての要素で使うことができる属性のことです。html4でもいくつかグローバル要素が使うことが可能ですが、html5から使用可能な属性の数が大幅に増えました。

グローバル属性はすべてのブラウザやバージョンに対応しているというわけではないので注意が必要です。古いバージョンのブラウザや、対応していないブラウザで使っても属性が反映されないので、すべてのブラウザで狙った効果を出したい場合は、対応していない場合の対策もしておく必要があるでしょう。

多くの場合そういった属性未対応の対策はjavascriptやphpなどを使います。ブラウザによって対策をするのが大変な場合は、最初からjavascriptやphpなどで対応するようにするといいでしょう。

代表的なグローバル属性をご紹介

accesskey

各要素に対するショートカットキーを設定することができます。半角英数の1文字を指定します。

class

主にcssのクラス名を記述します。クラス名を記述した要素に対してcssの該当クラスの効果が適用されます。

HTML
<要素 class=”classname”>

id

要素に対し一意の名称を与える属性で、値には文字列を設定します。サーバサイドなどでデータの取得をする際によく用いられます。

HTML
<要素 id=”idname”>

style

要素に対して、cssのクラスの効果を適用します。値には適用したcssのクラス名を記入します。

HTML
<要素 style=”cssclass”>

contenteditable

要素の中の文章を編集できるようになります。リストの中身や、divの中の文章などが編集可能です。値はtrueで編集可、falseで編集不可です。

HTML
<要素 contenteditable=”true”>

tabindex

文章のタブインデックスを指定できます。負の整数を指定するとタブ移動によるフォーカスがされなくなります。

HTML
<要素 tabindex=”3”>

title

要素の概要を短い文字列で入力します。例えばお弁当の写真を表示したimgタグの説明では「お弁当」と短く表記します。

HTML
<要素 title=”画像です”>

spellcheck

要素内に入力された文章に対し、スペルチェックするかどうかを設定します。スペルチェックをする場合はtrue、しない場合はfalseを記入します。

HTML
<要素 spellcheck=”true”>

data-***

ユーザーが独自のデータを属性に持たせることができます。data-以降の文字列をカスタマイズし、設定するデータを値に入力します。設定された値はサーバサイドなどで使われます。

HTML
<要素 data-test=”testtest”>

dir

文章の右向き、左向きを判定する文字列をサーバサイドに送信することができます。dir=”key”と設定した場合、サーバサイドにはkeyの値に右向きか左向きかが反映されています。

値は左から右へ読む場合はltr、右から左へ読む場合はrtl、自動判別の場合はautoの値が入っています。

HTML
<要素 dir=”dirname”>

draggable

要素がドラッグできるかどうかを設定します。ドラッグ可能にする場合はtrue、不可能にする場合はfalse、ブラウザの仕様に従う場合はautoを設定します。

HTML
<要素 draggable=”true”>

dropzone

要素がドラッグされてきた場合に行う処理を設定することができます。copyは要素をコピーするときに、moveは移動するときに、linkでは元データのリンク先を取得するときに使います。

dropzoneではmimeタイプも指定可能です。「s:」は文字列の場合、「f:」はファイルの場合に設定します。

HTML
<要素 dropzone=”copy f:image/png”></要素>

hidden

要素を隠す場合に使います。要素が表示されないようにする場合は、要素内にhiddenの属性を設定します。

HTML
<要素 hidden>

まとめ

いかがでしたか?htmlの属性について理解して頂くことはできましたか?

属性は要素(タグ)に対して、性質を与えることができるものです。属性は要素に対して複数存在し、またひとつの要素に対して複数の属性を設定することができます。

すべての要素に対して有効なグローバル属性も存在し、html5からはそのグローバル属性は数が増加しています。

ただしhtmlの要素や属性は、ブラウザやブラウザのバージョンによっては対応していないものも多く、すべてのブラウザに対応させたい場合は注意が必要です。

 

10月枠も残りわずか!!

エンジニア転職を目指すなら…

転職保証付きのプログラミングスクール

で未経験からエンジニアを目指そう!

 

転職保証コースは質の高いカリキュラムで転職成功率98%

✔︎未経験からの転職 ✔︎会社の将来が不安 ✔︎給与や待遇に不満がある