• 投稿者:
  • 投稿コメント:0件のコメント
  • 投稿カテゴリー:HTML
  • 投稿の最終変更日:2021年3月23日

属性はHTMLの要素に関する追加情報を提供します。


スポンサーリンク


HTML 属性

  • すべてのHTML要素は 属性を持つことができます
  • 属性は要素に関する 追加情報 を提供します
  • 属性は常に 開始タグで指定されます
  • 属性は通常、名前と値のペアで次のようになります。: name=”value”

href属性

HTMLリンクは<a> タグで定義されます。. リンクアドレスは href 属性で指定されます。:

例文

<a href=”https://www.berry.com”>これはリンク</a>

このタグ <a> は後半で詳しく学びます


スポンサーリンク

src 属性

HTML画像は <img> タグで定義されています。

画像ソースのファイル名は次のsrc 属性で指定されます。:

例文

<img src=”img_girl.jpg”>

幅と高さの属性

HTML画像には、画像の幅と高さを指定する属性widthheight 属性もあります。:

例文

<img src=”img_girl.jpg” width=”500″ height=”600″>

幅と高さはデフォルトでピクセル単位で指定されます。したがって width=”500″ は 500 幅500ピクセルを意味します。

詳しく学ぶにはHTML 画像チャプターを参照することをお薦めします。


スポンサーリンク

alt属性

alt 属性は画像を表示できない場合、代替テキストを指定します。

この値 alt スクリーンリーダーによって読み取ることができます。
このようにして、Webページを「聴いている」誰か、例えば視覚障害者は、その要素を “「聞く」” ことができます。

例文

<img src=”img_girl.jpg” alt=”Girl
with a jacket”>

この alt 属性は画像を表示できない場合(たとえば、存在しない場合)も、便利です。:

例文

存在しない画像を表示しようとするとどうなるか:

<img src=”img_typo.jpg” alt=”Girl
with a jacket”>

style属性

style 属性は、色、フォント、サイズなどのように、要素のスタイルを指定するために使用されます。

例文

<p style=”color:red”>This is a paragraph.</p>

このチュートリアルの後半および
CSS トライアルで、スタイリングの詳細について学べます 。


スポンサーリンク

lang属性

HTML文書は <html> タグで宣言できます。

言語は lang で宣言されています。

言語を宣言することは、ユーザー補助アプリケーション(スクリーンリーダー)や検索エンジンにとって重要です。:

<!DOCTYPE html>
<html lang=”en-US”>
<body>

</body>
</html>

The first two letters specify the language (en). If there is a dialect, add two more letters (US).


title属性

ここでは title<p>要素に属性が追加されています。段落の上にマウスを移動すると、title属性の値がツールチップとして表示されます。:

例文

<p title=”I’m a tooltip”>
This is a paragraph.
</p>

スポンサーリンク

おすすめ:小文字の属性を使う

HTML 5規格は小文字の属性名を必要としません。

title属性は、 titleTITLEように大文字または小文字で書くことができます。

W3CはHTMLでは小文字を 推奨 しており、 XHTMLのようなより厳密な文書タイプには小文字を 要求しています。

私は、常に小文字の属性名を使用します。


おすすめ:属性値の見積もり

HTML 5規格では、属性値を引用符で囲む必要はありません。

href 属性は”” で書くこと:

 悪い

 <a href=https://www.berry.com>

 良い

 <a href=”https://www.berry.com”>

W3Cは引用符(””)を付けることを 推奨 していて XHTMLのようなより厳密な文書タイプは引用符を 要求 しています。

たまに 必ず 引用符を使用する必要があります。この例では、title属性がスペースを含んでいるため、正しく表示されません。:

例文

<p title=About berry>

引用符を使用するのが最も一般的です。引用符を省略するとエラーが発生する可能性があります。

属性値は常に 引用符で囲みます。


スポンサーリンク

一重引用符または二重引用符

属性値を囲む二重引用符はHTMLで最も一般的ですが、一重引用符も使用できます。

状況によっては、属性値自体に二重引用符が含まれている場合は、一重引用符を使用する必要があります。 :

<p title=’John “ShotGun” Nelson’>

もしくは:

<p title=”John ‘ShotGun’ Nelson”>

まとめ

  • すべてのHTML要素は属性を持つことができます
  • この title 属性は追加の “ツールチップ” 情報を指定します。
  • href 属性は、リンクのアドレス情報を指定します
  • widthheight は、画像のサイズ情報を提供します。
  • この alt 属性はスクリーンリーダーにテキストを表示します
  • 常に小文字 の属性名を使うこと
  • 常に引用符(クォート) で属性値を挟む


テスト エクササイズ演習

エクササイズ:

Add a tooltip to the paragraph below with the text "About berry". 演習を開始する

-->


Test Yourself with Exercises!


-->


Test Yourself with Exercises!

Exercise 1 » Exercise 2 » Exercise 3 » Exercise 4 » Exercise 5 »
-->

スポンサーリンク

HTML 属性

以下は、HTMLでよく使用されるいくつかの属性のアルファベット順リストです。これについては、このチュートリアルで詳しく説明します。:

属性 説明
alt 画像を表示できない場合に、画像の代替テキストを指定します。
disabled 入力要素を無効にするように指定します
href リンクのURL(ウェブアドレス)を指定します
id 要素の一意のIDを指定します
src 画像のURL(ウェブアドレス)を指定します
style 要素のインラインCSSスタイルを指定します
title 要素に関する追加情報を指定します(ツールチップとして表示されます)。

各HTML要素の全属性の完全なリストは、:
HTML Attribute 辞典.

コメントを残す