ホーム HTML CSS XML JAVASCRIPT   PHP SQL MORE...   リファレンス 事例集    

HTML5 チュートリアル

HTML5 ホーム
HTML5 概要
HTML5 新しい要素
HTML5 ビデオ
HTML5 ビデオ/DOM
HTML5 オーディオ
HTML5 キャンバス
HTML5 Geolocation
HTML5 Web ストレージ

HTML5 フォーム

HTML5 Input タイプ
HTML5 フォーム要素
HTML5 フォーム属性

HTML5 リファレンス

HTML5 タグ
HTML5 属性
HTML5 イベント
HTML5 キャンバス 2d
HTML 妥当な DTD

HTML5 タグ

<!-->
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article>
<aside>
<audio>
<b>
<base>
<basefont>
<bdi>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command>
<datalist>
<dd>
<del>
<details>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>
<fieldset>
<figcaption>
<figure>
<font>
<footer>
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header>
<hgroup>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark>
<menu>
<meta>
<meter>
<nav>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>
<p>
<param>
<pre>
<progress>
<q>
<rp>
<rt>
<ruby>
<s>
<samp>
<script>
<section>
<select>
<small>
<source>
<span>
<strike>
<strong>
<style>
<sub>
<summary>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>
<title>
<tr>
<track>
<tt>
<u>
<ul>
<var>
<video>
<wbr>

HTML5 class 属性

HTML5 グローバル属性 HTML5 グローバル属性

HTML文書の class 属性使用:

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>

<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph. :)</p>

</body>
</html>

Try it yourself »
(他の例が、このページの下にあります)

ブラウザ・サポート

Internet Explorer Firefox Opera Google Chrome Safari

class 属性は、主要な全ブラウザがサポートしています。


定義と用法

class 属性はスタイルシートで指定されたクラスを参照します。

クラス属性は、主にスタイルシートのクラスをポイントするために使用します。 しかし、指定したクラスを使用してHTML要素を変更する(HTML DOMを介して)JavaScriptで使用することもできます。


HTML 4.01 と HTML5 との相違点

なし。


チップスと注意事項

注: class 属性は、次の HTML 要素には使用することができません : base、head, html、meta、param、script、style、title。

チップ: 例えば、<span class="left_menu important"> のように、 一つの HTML 要素へ複数のクラスを割当てることができます。 これで、1つのHTML要素に対して複数のCSSクラスを組み合わせることができようになります。

チップ: 数字でクラス名を開始しないでください! これは、ほとんどのブラウザがサポートしていません。


構文

<element class="classname">

属性値

説明
classname スタイルシートで指定されたクラスを参照する。 1つの要素に複数のクラスを指定するには、スペースでクラス名を区切る


Examples

Try it Yourself - 例

1つの要素へ複数のクラスを追加
1つの要素へ複数のクラスを追加する方法。


HTML5 グローバル属性 HTML5 グローバル属性