HTML5

および

タグの使い方

この記事は私たちの一部です 「HTML 5 / CSS 3チュートリアルシリーズ」 - あなたをより良いデザイナーや開発者にするためのお手伝いをします. ここをクリック 同じシリーズの他の記事を見る.

HTML5で利用可能ないくつかの新しいタグの中で、仕様（例： 図, figcaption, そして さておき）, 細部 そして 概要 私の意見では、タグが最も便利です。これらの新しいタグを使用すると、長いコンテンツの一部を非表示にして概要のみを表示できます.

私たちは実際にこの効果をよく目にすることがありますが、それらのほとんどは依然としてJavaScriptまたはその兄弟であるjQueryに基づいて構築されています。さて、これらの新しい要素を使って - 詳細 そして 概要 - 物事は簡単になります.

それでは、実際のシナリオでタグがどのように機能するかを見てみましょう。.

このデモでは、製品の説明をまとめます。最初に「details」タグを作成してから、次の例のように、その中に「summary」タグとともにすべてのコンテンツを配置しましょう。

 
 
MacBook Proの仕様
 
 
13.3インチLEDバックライト付き光沢ワイドスクリーンディスプレイ 端から端まで、途切れのないガラス（解像度1280 x 800ピクセル）.
 
2.4 GHz Intel Core i5デュアルコアプロセッサ 優れたマルチタスクを実現する3 MBの共有L3キャッシュ.
 
インテルHDグラフィックス3000 メインメモリと共有する384 MBのDDR3 SDRAM.
 
500 GBシリアルATAハードドライブ （5400 RPM）
 
4 GBのインストール済みRAM （1333 MHz DDR3、最大8 GBをサポート）
 
 
 

その例では、私はMacBook Proの仕様詳細を追加しました、そして今、ブラウザがそれらのタグをどのようにレンダリングするか見てみましょう。.

上記のデモをより賢明にするために、詳細の上に製品のタイトルと説明を追加しました。それで、あなたはどう思いますか？とても簡単ですよね?

ブラウザのサポート

ただし、このタグをWebサイト全体に適用しようとする前に、detailsタグとsummaryタグは現在Chrome 12以降でのみサポートされていることに注意してください。.

最新のFirefoxでさえまだそれらをサポートしていません.

そのため、このタグを適用したい場合は、サポートされていないブラウザ用の代替機能を含める必要があります。良いニュースです、それは簡単です。あなたは自動的に古いブラウザのタグ機能を複製するでしょう、この詳細polyfillを使うことができます.

このファイルをダウンロードしてjQuery（最低1.7以上）と共にHTMLドキュメントにリンクし、必ず本文を閉じるタグの前に置いてください。.

そして、headタグの内側に、IE 8以前のHTML 5shivを含めるために次の条件タグを挿入します。そうしないと、Internet Explorerはこれらの新しいタグを認識しません。.

それでは、Internet Explorerでそれがどうなるか見てみましょう。

そしてそれは今Internet Explorerでも同様に動作します.

• デモ
• ソースをダウンロード

結論

JavaScriptやjQueryを使ってこのような表示/非表示の効果を作成するのは実際には比較的簡単ですが、ブラウザからネイティブにサポートすることは、多くの人にとって間違いなくはるかに簡単な解決策です。あなたがJavaScriptでそれをしたいのかHTML5でそれをしたいのかにかかわらず、それはあなたの決断です。読んでくれてありがとう、そして私はあなたがそれを楽しんだことを望みます.