共通属性

html

css

プロパティの値

sponsored links

サイト情報

このサイトについて

共通属性

HTML要素に付けることができる共通の属性。

id属性

HTML要素にid名を付けることができます。cssでデザインを指定するのに利用したり、要素に付けてページ内のリンク先にも使えます。
同じid名は同じページで重複できませんindex.htmlとtop.htmlなどファイルが別なら使えます。
例

<p id="name"></p>

指定できる値（id名）

半角英数字、ハイフン - 、アンダースコア _ コロン : ピリオド .
※最初の文字は半角のアルファベットでなければいけません。大文字と子文字は区別されます。

class属性

HTML要素にclass名を付けることができます。cssでデザインを指定するのに使われます。id属性とは違って同じ名前でも同じページのなかでいくつでも使うことができます。ページのデザインを一括で指定する時に便利です。
例

<p class="name"></p>

指定できる値（class名）

半角英数字など
※使える文字の制限がありません。ひらがなや漢字も使えますがブラウザの対応が心配な人は半角英数字を使ってください。

title属性

マウスポインタをtitle属性を付けた要素の内容に合わせると補足的な説明がでます。
例

<p title="簡単な説明ができます">title属性とは何か</p>

実際の表示

title属性とは何か

指定できる値（簡単な説明文）

漢字、カタカナ、ひらがな、半角英数字など

style属性

要素にstyle属性を付けるとその要素に直接スタイルシートでデザインを指定できます。
デザインの指定はプロパティと値で行います。
※プロパティ（スタイルシートの種類、この場合は文字色の指定）値（具体的なデザインの値、この場合はオレンジ色）
例

<b style="color: #FF9933;">オレンジ色の太字</b>

実際の表示
オレンジ色の太字

指定できる値（スタイルシート）

プロパティ: 値;

lang属性

言語コードを記述できる属性です。HTMLが日本語でかかられている場合はjaと値に書きます。
実際に使う場合はhtml要素に指定して使う場合が多いでしょう。
htmlではlang属性でも問題ありませんがxhtml1.1ではlang属性は廃止されました。xhtml1.1ではxml:langとなります。
例

<html lang="ja">

指定できる値（言語コード）

日本語「ja」英語「en」韓国語「ko」フランス語「fr」などの言語コード

dir属性

要素の内容であるテキストの方向を指定することができます。日本語は左から右に文章を書きますがアラビア語やヘブライ語などは右から左に文字を書きます。 dir属性を使えばテキストの方向を右から左に指定することができます。
例

<bdo dir="rtl">あいうえお</bdo>

実際の表示
あいうえお

指定できる値

左から右「ltr」、右から左「rtl」

accesskey属性

リンクなどにアクセスキーを指定することができます。キーボードの指定したキーを押すと要素ごとに特定の動作をします。
ブラウザによっても操作が異なります。IEはAlt押して指定したキーを押すと指定した要素の場所に移動するのでそのままEnterを押せばリンクをクリックしたときと同じ動作をします。MacではAltキーの代わりにCtrlを使います。
accesskey属性を付けられる要素・・・a要素 area要素 button要素 input要素 label要素 legend要素 textarea要素
例

<a href="index.html" accesskey="z">TOPに戻る（Z）</a>

実際の表示
TOPに戻る（Z）
IEだとこの場合はAltを押しながらキーボードのZを押すと指定した場所まで移動できます。その状態でEnterを押すとクリックできます。

指定できる値（キーボードのキー）

キーボードのキーを一つ指定します。
※ブラウザの機能にあるキー操作とは重複しないように気をつけてください。
A B D E F G H T Vなどは使わないほうがいいでしょう。

tabindex属性

tabindex属性を使えばページ内をキーボードのTabキーを使って移動する順番を指定することができます。
accesskey属性を付けられる要素・・・a要素 area要素 button要素 input要素 object要素 select要素 textarea要素
例

<a href="index.html" tabindex="2">TOPに戻る</a>
<a href="zoku.html" tabindex="1">共通属性</a>

実際の表示
TOPに戻る
共通属性
※ブラウザのSafariはinput要素やtextarea要素で作ったテキスト入力欄のみ効果があります。

指定できる値

移動する順番を整数で指定