HTML5チュートリアル単一の製品ページを作成する方法

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

この記事では、架空のプロジェクトに取り組み、iPhone 4Sを提供する単一の製品ページを作成します。このプロジェクトでは、以前の記事で説明した方法も実装します。の

要素と否定セレクタ.

始めましょう.

HTML5マークアップ

まず、作成する必要があります html 次のマークアップで文書化します。

    アップルiPhone 4  -  16GB
 まだ最も素晴らしいiPhone.
  
   
  高速デュアルコアA5チップまったく新しい光学系を搭載した8MPカメラも1080p HDビデオを撮影します。そしてシリを紹介します。それはまだ最も素晴らしいiPhoneです.
  製品の特徴
  フル1080pビデオ録画付き8メガピクセルカメラ
 シリ声助手
 iCloud
 エアプリント
 網膜ディスプレイ
 写真とビデオのジオタグ付け

HTML5仕様からいくつかの新しいタグを使います。 ヘッダ, hgroup, 図, セクション, そして私たちが以前に議論したことがあります。の 詳細 そして 概要 タグ.

しかし、私たちはこれらのタグを掘り下げるつもりはありません。そうしないのではなく、むしろこれらはあなたが他の場所で簡単に見つけることができる基本的なトピックです。ですから、あなたが本当にHTML5を初めて使うのであれば、これらのタグの以下の参考文献を読むことをお勧めします。彼らはそれらを包括的に説明しました：

セマンティックについて話そう
HTML5ヘッダ要素
hgroup要素
HTML5タグリファレンス

それでは、ページの最初の外観を見てみましょう。.

まあ、それはスタイルなしで賢明に見えます。一番上にはヘッダーがあり、次に画像、説明、そして最後に[今すぐ購入]ボタンのセクションがあります。それでは、このページを調べましょう。.

スタイル

このスタイルシートを使用してすべてのデフォルトスタイルを正規化し、グラデーションの背景を html タグ.

 html 高さ：100％;背景：＃f3f3f3;背景：-moz-linear-gradient（トップ、＃f3f3f3 0％、#ffffff 50％）;背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃f3f3f3）、カラーストップ（50％、＃ffffff））;背景：-webkit-linear-gradient（トップ、＃f3f3f3 0％、＃ffffff 50％）;背景：-o-linear-gradient（上、＃f3f3f3 0％、＃ffffff 50％）;背景：-ms-linear-gradient（上、＃f3f3f3 0％、＃ffffff 50％）;背景：線形勾配（上、＃f3f3f3 0％、＃ffffff 50％）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃f3f3f3"、endColorstr = "＃ffffff"、GradientType = 0）;

私たちの製品要素はすべての中に包まれていることを忘れないでください div 製品クラスで。そのため、ここでラッパーを中央に配置し、幅を約に設定します。 650px.

 .ラッパー幅：650ピクセル;マージン：自動。パディング：25px 0px。

ヘッダセクション

ヘッダーセクションには2つの見出しがあります h1 そして h4, それでは、これらの要素をスタイルしましょう。.

 h1、h4 font-family：Helvetica Neue、Arial、sans-serif;フォントの太さ：普通。マージン：0。  h1 フォントサイズ：24pt;  h4 フォントサイズ：16pt;色：#aaa;

そして、の下部に少しスペースを追加します ヘッダ 余裕を持って.

 header margin-bottom：20px;

ヘッダの右側を見ると、その側にはたくさんの空白があるでしょう。.

それでは、Appleのロゴもそこに入れてはどうでしょうか。.

 header margin-bottom：20px;背景：url（ '…/https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png'）

製品イメージ

次に、画像を左にフロートさせ、画像の最大幅を 350px.

 図フロート：左。図img 最大幅：350ピクセル;

画像は左にプッシュされているので、次にdescriptionセクションを右に浮かせて幅をに設定します。 300px.

 section font-family：Tahoma、Arial、sans-serif。行の高さ：150％。フロート：右。幅：300ピクセル。カラー：＃333。

これまでの結果を見てみましょう.

見栄えは良くなりましたが、detailsタグはまだ機能しません（Chromeを除く）。次にボタンのスタイルを設定しましょう。.

ボタン

ボタンのスタイルについては、Apple.comストアのものをまねます。そして、これはあなたがボタンのためにあなたのスタイルシートに入れる必要があるすべての構文です。.

 ボタン背景：＃36a9ea;背景：-moz-linear-gradient（上、＃36a9ea 0％、＃127fd2 100％）。背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃36a9ea）、カラーストップ（100％、＃127fd2））。背景：-webkit-linear-gradient（上、＃36a9ea 0％、＃127fd2 100％）;背景：-o-linear-gradient（上、＃36a9ea 0％、＃127fd2 100％）。背景：-ms-linear-gradient（上、＃36a9ea 0％、＃127fd2 100％）;背景：線形勾配（上、＃36a9ea 0％、＃127fd2 100％）。 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃36a9ea"、endColorstr = "＃127fd2"、GradientType = 0）;ボーダー：1ピクセルソリッド＃00599d。色：#fff;パディング：8px 20px。 -webkit-border-radius：3px。 border-radius：3ピクセル。 -webkit-box-shadow：0px 1px 1px 0px rgba（0、0、0、.1）、インセット0px 1px 0px 0px rgba（250、250、250、.3）。ボックスシャドウ：0px 1px 1px 0px rgba（0、0、0、.1）、インセット0px 1px 0px 0px rgba（250、250、250、.3）。 text-shadow：0ピクセル1ピクセル1ピクセルx 156cc4。フィルタ：ドロップシャドウ（色=＃156cc4、offx = 0、offy = 1）。フォントサイズ：10pt。 ボタン：ホバー背景：＃2f90d5;背景：-moz-linear-gradient（上、＃2f90d5 0％、＃0351b7 100％）。背景：-webkit-gradient（線形、左上、左下、カラーストップ（0％、＃2f90d5）、カラーストップ（100％、＃0351b7））。背景：-webkit-linear-gradient（上、＃2f90d5 0％、＃0351b7 100％）。背景：-o-linear-gradient（上、＃2f90d5 0％、＃0351b7 100％）。背景：-ms-linear-gradient（上、＃2f90d5 0％、＃0351b7 100％）。背景：線形勾配（上、＃2f90d5 0％、＃0351b7 100％）。フィルタ：progid：DXImageTransform.Microsoft.gradient（startColorstr = "＃2f90d5"、endColorstr = "＃0351b7"、GradientType = 0）;ボタン：アクティブ背景：＃127fd2; -webkit-box-shadow：インセット0px 2px 1px 0px rgba（0、47、117、5）、0px 1px 1px 0px rgba（0、0、0、0）。ボックスシャドウ：インセット0px 2px 1px 0px rgba（0、47、117、0.5）、0px 1px 1px 0px rgba（0、0、0、0）。

今すぐボタンが良く見えるはずです.

Internet Explorerの問題

いつものようにIE（Internet Explorer）はいつも何らかのトラブルを引き起こします。 9より小さいIEでこれを開くと、ページのスタイルは変更されません。.

これは、Internet Explorerが新しい要素を認識しないためです（セクション, ヘッダ, など）指定したスタイルは適用に失敗します。したがって、次のステップでは、この問題を解決するために取り組みます。.

ブラウザサポートのテスト

前回の投稿では、このpolyfillを使用してdetails要素のブラウザサポートに取り組んできました。サポートされていないブラウザで動作するように。ただし、今回はModernizrを使用してさまざまな方法を試します。.

公式サイトから, 「Modernizrは、次世代の次世代のビルドを支援するオープンソースのJavaScriptライブラリです。 HTML5 そして CSS3-パワードウェブサイト「. 技術的には、Modernizrは特定の新しい要素と機能についてブラウザサポートをテストします。サポートが提供されていない場合は、さまざまなスタイルを提供しているのか、それとも ポリフィル. この場合は、詳細と要約要素をテストするためにModernizrを使用します。.

Modernizrに行き、そのダウンロードページに進んでください。.
ダウンロードページでは、Modernizrはライブラリを設定するためのいくつかのオプションを提供しているので、あなたはあなたがあなたのウェブサイトに本当に必要な特定の機能を選択するだけでよいです。この場合、以下が必要です。
- HTML5Shiv 3.4
- CSSクラスを追加する, この機能は自動的にhtmlタグにクラスを挿入します.
- の Modernizr.load,
- コミュニティアドオンボックスに行き、選択して下さい 要素詳細,
- 拡張性セクションで、選択します。 Modernizr.addTest.
ファイルを生成してダウンロードする.
あなたのHTMLにリンクして、Internet Explorerでページをリロードしてください。 Internet Explorerがタグを認識できるようになったため、ページはスタイル設定されているはずです。.

また、source要素またはinspect要素を表示すると、htmlタグに詳細なしクラスが挿入されていることがわかります。ページをプレビューしているブラウザを示します。現在details要素をサポートしていません。 @@@@ [この文は理解できない。 ]

その後、このクラスをフックとして使用してフォールバックを作成できます。これは次の手順で行います。.

フォールバック

このステップで私達は同じように提供します 詳細 他のブラウザ（Chromeを除く）の要素機能。前回の記事では、このステップはこのスクリプトを使用して自動的に行われましたが、今回は自分で作成します。.

注意： 前回の記事から少しだけレビューしてください。 details要素は現在Chromeブラウザでのみサポートされています.

それでは、最初にCSSの作業を始めましょう。.

summaryタグでは、カーソルモードをpointerに変更しているので、クリック可能であることがわかります。.

 summary cursor：pointer;フォントサイズ：12pt。アウトライン：0;

details要素の上下に余白を空けてスペースを追加する.

 詳細マージン：20px 0px;

デフォルトでは、要約タグには矢印が付きます。しかし、ここでそれをプラスマイナスのアイコンに置き換えたいと思います。.

注意： 先に進む前に、私は以前Fugueによってこのコレクションからアイコンをダウンロードし、それらを1つのファイルにダウンロードしてスプライトしました。.

before擬似要素を追加して、背景としてアイコンを添付しましょう。この時点では、背景の位置はプラスのアイコンが表示される上部にあります。.

 詳細>概要：前幅：16ピクセル;高さ：16ピクセル。表示：インラインブロック。内容： "！重要。背景：url（ '…/https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png'）中央揃えなし;マージン右： 5ピクセル;位置：相対;上：2ピクセル;

次に、details要素が開いていると、背景の位置が一番下に移動し、マイナスのアイコンが表示されます。.

 詳細[開く]>概要：前に、details.open>概要：前にbackground：url（ '…/https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png' ）繰り返しのない中央の底。

の [開いた] signはセレクタです。この場合、それはサポートしているブラウザでdetails open属性を選択します.

最後に、デフォルトでChromeに表示されている矢印を非表示にします。.

 詳細>概要::  -  webkit-details-marker 表示：なし;

それから、しばらくブラウザで結果を見てみましょう。.

デフォルトの矢印はアイコンに置き換えられました。Chromeで表示されている場合は、クリックするとすでにトグル効果があります。それに応じてアイコンが変わります。しかし、他のブラウザではまだ何も起こりません。したがって、次のステップでは、jQueryを使って効果を再現しようとします。.

jQueryによるトグル効果

jQueryの部分から始める前に、Ian Devlinにインスピレーションを与えてくれたことに感謝します。以下のスクリプトは実際には彼のものを少し修正したものです。.

サマリータグを格納する変数を作成しましょう.

 var summary = $（ 'details summary'）;

次に、要約のすべての兄弟要素をで囲みます。 div.

summary.siblings（）。wrapAll（ '
;）

そしてdetails要素がopenクラスを持たない場合はそのdivを隠します.

$（ 'details：not（.open）summary'）。兄弟（ 'div'）。hide（）;

要約がクリックされると、隠されたdivが表示され、逆に、divが最初に開かれたときは隠されます。.

 summary.click（function（）$（this）.siblings（ 'div'）。toggle（）; $（ 'details'）。toggleClass（ 'open'）;）;

これらの関数がサポートされていないブラウザでのみ実行されるようにするために、これらをこの条件文の内側にラップします。.

 if（$（ 'html'）。hasClass（ 'no-details'））//コードはここに移動します

そして、以下は私たちが持っているコードです：

 if（$（ 'html'）。hasClass（ 'no-details'））var summary = $（ 'details summary'）; summary.siblings（）。wrapAll（ '
;） $（ 'details：not（.open）summary'）。兄弟（ 'div'）。hide（）; summary.click（function（）$（this）.siblings（ 'div'）。toggle（）; $（ 'details'）。toggleClass（ 'open'）;）;

それではブラウザでテストしましょう。トグル効果は、すべてのブラウザで機能するはずです。私は個人的に確認しました（Internet Explorer 7まで）。.

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

ヒント： 代わりにあなたが変更することができます .トグル（） と .slideToggle（） スライド効果を作成します。また、最初に詳細を開きたい場合は、details要素でopenクラスを追加することができます。.

結論

HTML5を使用して単一の製品ページを作成し、サポートされていないブラウザ用にデバッグし、さらに詳細要素用のトグル効果を独自に複製するまでのすべてのステップを経てきました。.

しかし、私はこの記事ですべてを詳細に説明したわけではないので、何かを片付けたい場合は、下のコメントボックスに質問を投稿してください。.