2019.09.08SHAREツイートシェアはてブLINEPocketHTMLの属性とは、要素の設定をするためのものです。属性はひとつの要素に対していくつも設定できたり、書き方に一定のルールがあったりします。今回は属性の役割や書き方、さまざまな使い方などについての情報をお伝えしていきます。まとめ属性とは?htmlではどのような役割をしている?属性とはhtmlの要素に対して性質を与える役割をしています。設定し、htmlのタグがどのような振る舞いをするのかを規定するのが属性の主な役割です。imageタグの場合、src属性は画像のパスを規定します。width属性は画像の横幅を、height属性は画像の縦幅をといった具合です。htmlの要素ごとに利用できる属性は異なり、要素には複数の属性を同時に設定できます。属性はブラウザやブラウザのバージョンによっても挙動やデザインが異なることもあり、すべてのブラウザに有効でないものもあります。その場合はjavascriptやcssなどのスクリプトで機能を補完するなどの工夫をする必要があります。属性の書き方は=で結んで”で閉じる属性は「属性名=”属性の設定”」といった形式で設定する場合がほとんどです。中には属性名を要素のタグの中に記述するだけで設定完了できるものもありますが、多くの属性は右辺に設定の値を記入する必要があります。数値以外の文字列を設定する場合、ダブルクォーテーション(”)で囲むのがルールです。ダブルクォーテーションで囲んでいない場合、ブラウザが認識できない可能性もあります。エディターでも色分けがちゃんとできず、わかりやすいファイルになってしまうので注意が必要です。ちなみに数値であってもダブルクォーテーションで囲むことができます。すべての要素に共通「グローバル属性」とは?グローバル属性とはすべての要素で使うことができる属性のことです。html4でもいくつかグローバル要素が使うことが可能ですが、html5から使用可能な属性の数が大幅に増えました。グローバル属性はすべてのブラウザやバージョンに対応しているというわけではないので注意が必要です。古いバージョンのブラウザや、対応していないブラウザで使っても属性が反映されないので、すべてのブラウザで狙った効果を出したい場合は、対応していない場合の対策もしておく必要があるでしょう。多くの場合そういった属性未対応の対策はjavascriptやphpなどを使います。ブラウザによって対策をするのが大変な場合は、最初からjavascriptやphpなどで対応するようにするといいでしょう。代表的なグローバル属性をご紹介accesskey各要素に対するショートカットキーを設定することができます。半角英数の1文字を指定します。class主にcssのクラス名を記述します。クラス名を記述した要素に対してcssの該当クラスの効果が適用されます。class=”classname”>id要素に対し一意の名称を与える属性で、値には文字列を設定します。サーバサイドなどでデータの取得をする際によく用いられます。id=”idname”>style要素に対して、cssのクラスの効果を適用します。値には適用したcssのクラス名を記入します。style=”cssclass”>contenteditable要素の中の文章を編集できるようになります。リストの中身や、divの中の文章などが編集可能です。値はtrueで編集可、falseで編集不可です。contenteditable=”true”>tabindex文章のタブインデックスを指定できます。負の整数を指定するとタブ移動によるフォーカスがされなくなります。tabindex=”3”>title要素の概要を短い文字列で入力します。お弁当の写真を表示したimgタグの説明では「お弁当」と短く表記します。title=”画像です”>spellcheck要素内に入力された文章に対し、スペルチェックするかどうかを設定します。スペルチェックをする場合はtrue、しない場合はfalseを記入します。spellcheck=”true”>data-***ユーザーが独自のデータを属性に持たせることができます。data-以降の文字列をカスタマイズし、設定するデータを値に入力します。設定された値はサーバサイドなどで使われます。data-test=”testtest”>dir文章の右向き、左向きを判定する文字列をサーバサイドに送信することができます。dir=”key”と設定した場合、サーバサイドにはkeyの値に右向きか左向きかが反映されています。値は左から右へ読む場合はltr、右から左へ読む場合はrtl、自動判別の場合はautoの値が入っています。dir=”dirname”>draggable要素がドラッグできるかどうかを設定します。ドラッグ可能にする場合はtrue、不可能にする場合はfalse、ブラウザの仕様に従う場合はautoを設定します。draggable=”true”>dropzone要素がドラッグされてきた場合に行う処理を設定することができます。copyは要素をコピーするときに、moveは移動するときに、linkでは元データのリンク先を取得するときに使います。dropzoneではmimeタイプも指定可能です。「s:」は文字列の場合、「f:」はファイルの場合に設定します。f:image/png”></要素>hidden要素を隠す場合に使います。要素が表示されないようにする場合は、要素内にhiddenの属性を設定します。hidden>まとめいかがでしたか?htmlの属性について理解して頂くことはできましたか?属性は要素(タグ)に対して、性質を与えることができるものです。属性は要素に対して複数存在し、またひとつの要素に対して複数の属性を設定することができます。すべての要素に対して有効なグローバル属性も存在し、html5からはそのグローバル属性は数が増加しています。htmlの要素や属性は、ブラウザやブラウザのバージョンによっては対応していないものも多く、すべてのブラウザに対応させたい場合は注意が必要です。WEBCAMPは転職保証型のプログラミングスクールです。転職成功率は、98%!短期間で確実にスキルを身につけて、ひとりひとりに寄り添った転職サポートで、未経験からのエンジニア転職を叶えます!「未経験だから不安...」、「転職できるんだろうか...」などの不安があると思います。そんな不安や心配を解消する、無料のカウンセリングを実施しています。無理な勧誘や面倒な電話は一切ありませんので、お気軽にお越しください。WEBCAMPを運営しています。人生が変わるほど「グッとくる」成長体験を、プログラミング学習を通してお届けしています。【元自衛官】の人生を変えた半年!エンジニアへの道のり。WEBCAMPで安心してエンジニア転職を目指そう「スキルがないし...」「失敗したくないし...」カウンセラーがあなたのキャリアを真剣に考え、ご相談に乗ります。