定義リスト <DL> <DT> <DD>

<DL>タグについて

定義型のリストを作成します。<DL>タグでリスト本体を定義し、<DT>タグでリストの項目を定義し、<DD>タグにそのリストの内容を記述します。

<DT>タグについて

リストの項目を定義します。
終了タグは省略することもできますが、表示がおかしくなるブラウザもあります。

<DD>タグについて

リストの内容を記述します。
終了タグは省略することもできますが、表示がおかしくなるブラウザもあります。

サンプル

リスト 項目をここに書きます ここに項目の説明などを書きます 項目２ サンプルサンプルサンプル 項目３ サンプルサンプルサンプルサンプル 項目４ サンプルサンプルサンプルサンプルサンプル

サンプル・ソース

緑の文字が変更箇所で、赤い文字が対応するタグ・属性です。

<H2>リスト</H2> <DL> <DT>項目をここに書きます</DT><DD>ここに項目の説明などを書きます</DD> <DT>項目２</DT><DD>サンプルサンプルサンプル</DD> <DT>項目３</DT><DD>サンプルサンプルサンプルサンプル</DD> <DT>項目４</DT><DD>サンプルサンプルサンプルサンプルサンプル</DD> </DL>

解説・注意点など

<DL>～</DL>には<DT>タグ、<DD>タグ以外書くことはできません。

Googleが公開したHTML5の開発を支援するサイト「HTML5 Rocks」

GoogleはHTML5に関する文書やリュートリアル、APIマニュアルなどをまとめたサイトをHTML5Rocksとして公開した。 HTML5を使ったコンテンツを開発する場合に利用できるように工夫されている。現段階で提供されているコンテンツは次のとおり。

・Presentation – HTML5を使って作成されたHTML5の機能を紹介するプレゼンテーションおよびサンプル
・HTML5 Playground – HTML5の機能を試すためのオンライン実験環境
・Tutorials – HTML5チュートリアル。どのブラウザに対応しているかの情報もあり
・Resources – HTML5関連サイトへのリンク集

HTML5はまだ策定段階にあるが、WebコンテンツやWebアプリケーションにとって重要な機能を多数持っており、次世代技術基盤として注目度が高い。Googleはこうした情報サイトを提供することでWebデベロッパやWebデザイナへHTML5の普及を推進する狙いがあるとみられる。

HTML5で追加されたFormの新属性 placeholder autofocus

HTML5ではformに関する新しい機能も追加されました。今回はその中でautofocus属性とplaceholder属性を紹介したいと思います。

■autofocus属性

autofocus属性をあらかじめ指定しておくと、画面が表示された際に、指定した要素にフォーカスがあたります。

■placeholder属性

placefolder属性は、未入力状態の指定要素に、指定した文字列をガイド文字列として表示しておくことができます。
検索ボックスなどによく使われているアレですね。

サンプルコード

1	<form method="post">

2

<ul>

3	<li><input type="text" placeholder="指定したガイド文字列を表示" ></li>

4	<li><input type="text" placeholder="フォーカスがあたります" autofocus></li>

5	<li><input type="text" placeholder="指定したガイド文字列を表示"></li>

6

</ul>

7

</form>

実行結果

今までJavaScriptを使わないと実装できなかった機能が、HTMLだけで簡単に実現できるのでとても便利ですね。