ページ 94-H5 チュートリアルプログラミングチュートリアル: H5 チュートリアルオンラインで学ぶ-php.cn

Article Tags

H5 チュートリアル

ホームページ

Technical articles

ウェブフロントエンド

H5 チュートリアル

HTML5 実践 - CSS を使用して画像ギャラリーを装飾するためのコード共有 (2)

前回の講義では、私たちのソリューションは jquery を使用して spam タグを作成しました。この講義では、:before および :after 疑似クラスを使用する、より良い解決策を使用します。 :before は、要素を追加するためによく使用されます。

Mar 23, 2017 pm 03:43 PM

HTML5，css，图片画廊

HTML5 の実践 - CSS3 メディアクエリの詳細な紹介

CSS2 を使用すると、画面やプリンターなどの特定のメディアタイプのスタイルを設定できます。 CSS3 は、より強力なメディアクエリを提供し、さまざまなメディアタイプに式を設定したり、さまざまな条件に応じてさまざまなスタイルを設定したりできます。たとえば、あるスタイルを大画面用に設定し、別のスタイルをモバイル用に設定することができます。この機能は非常に強力で、ページのコンテンツを変更せずに、さまざまなデバイスにさまざまなスタイル効果を提供できます。次のレッスンでは、このテクノロジーを使用するいくつかのサイトを紹介します。

Mar 23, 2017 pm 03:36 PM

HTML5，Media ，Queries

CSS3 メディアクエリを使用したレスポンシブデザインのための HTML5 実践コード共有

画面解像度は 320px (iPhone) から 2560px (大型モニター) 以上の範囲になりました。ユーザーは Web サイトにアクセスするためにデスクトップコンピューターを使用するだけでなく、携帯電話、ラップトップ、タブレットも使用します。したがって、Web サイトの幅を固定値に設定する従来の方法では、ニーズを満たすことができなくなりました。 Web デザインはこの新しい要件に適応する必要があり、ページレイアウトはアクセスデバイスのさまざまな解像度に応じて自動的に調整できる必要があります。このチュートリアルでは、html5 および CSS3 メディアクエリを使用して、クロスブラウザーのレスポンシブデザインを完成させる方法を紹介します。

Mar 23, 2017 pm 03:33 PM

HTML5，CSS3 ，Queries

HTML5 の実践 - 非レスポンシブデザインで ViewPort メタタグを使用する方法の紹介

レスポンシブデザインにおけるビューポートタグの重要性は誰もが知っていますが、非レスポンシブデザインでもビューポートタグが重要な役割を果たすことは知らないかもしれません。サイトがまだ応答しない場合は、この記事でビューポートタグを使用してモバイルデバイスでのサイトの表示効果を高める方法を説明します。

Mar 23, 2017 pm 03:29 PM

HTML5，ViewPort ，meta标签

HTML5 の実践 - CSS を使用した柔軟なビデオのコード共有

Elemin テーマ (最近デザインしたレスポンシブサイト) をコーディングしていたときに遭遇したフレームスキップの問題の 1 つは、埋め込みビデオのサイズ変更をより柔軟にする方法でした。 max-width:100% と height:auto を使用すると、HTML5 ビデオタグは適切に機能しますが、この解決策は iframe またはオブジェクトタグのインラインコードでは機能しません。何時間もの検索と実験を経て、ついに解決策を見つけました。この CSS トリックは、レスポンシブデザインを行うときに役立ちます。最終的なデモアドレスにアクセスし、ブラウザをズームして効果を確認できます。

Mar 23, 2017 pm 03:26 PM

HTML5，CSS，弹性视频

HTML5 実践 - レスポンシブデザインの 3 ステップ実装の詳細な紹介

レスポンシブ Web デザインにまだ慣れていない場合や初心者の場合、レスポンシブ Web デザインは少し複雑に感じるかもしれませんが、実際には思っているよりもはるかに簡単です。レスポンシブデザインをより早く学習できるように、3 つの簡単な手順でレスポンシブデザインの基本ロジックとメディアクエリをマスターできるこのチュートリアルを特別に作成しました (CSS の知識があることを前提としています)。

Mar 23, 2017 pm 03:12 PM

HTML5，响应式设计

HTML5実践 - CSS3を使ったGoogle落書きアニメーションの完成方法を詳しく解説

ここで強調しておく必要があるのは、IE が CSS3 のアニメーションプロパティをサポートしていないということです。私はこの邪悪な IE について再度不満を述べます。しかし、これを css3 を採用しない理由にすることはできません。

Mar 22, 2017 pm 04:22 PM

HTML5，css3，google涂鸦

CSS を使用して三角形を作成し、CSS3 を使用して 3D 四面体を作成する HTML5 の実践的なコードの詳細な説明

最初に共有したいのは、div+css を使用して三角形を作成する方法です。ここでは、最初に関連するコードを貼り付けてから、原理を説明します。

Mar 22, 2017 pm 04:19 PM

HTML5，css，CSS3

HTML5 の実践 - CSS3 を使用して画像スタイルを強化するためのサンプルコード

CSS3 では、box-shadow と border-radius が画像に直接使用されている場合、ブラウザーはそれらを適切にレンダリングできません。ただし、画像を背景画像として使用すると、追加されたスタイルブラウザで適切にレンダリングできます。 box-shadow、border-radius、transition を使ってさまざまな画像スタイルの効果を作成する方法を紹介します。

Mar 22, 2017 pm 04:15 PM

HTML5，css3，图片样式

HTML5 ガイド (4) - Geolocation の使用方法の詳細な説明

今日学習するのは、Geolocation を使用して測位機能を実装することです。 Geolocation オブジェクトは、次のメソッドを提供する navigator.geolocation を通じて取得できます。

Mar 22, 2017 pm 04:09 PM

html5，Geolocation

HTML5ガイド(3) ～ドラッグ＆ドロップ機能の実装～

この記事の内容はhtml5でhtml要素のドラッグ＆ドロップ機能を実装する方法についてです。 html5 より前は、ドラッグアンドドロップを実装するには js を使用する必要がありました。現在、html5 では内部でドラッグアンドドロップ機能がサポートされていますが、もう少し複雑な機能を実装するには、やはり js の助けが不可欠です。以下にいくつかの例を見てみましょう。

Mar 22, 2017 pm 04:05 PM

html5，拖拽功能

HTML5 ガイド (2) - ドキュメントメタデータの操作の詳細な紹介

compatMode 属性は、ブラウザが現在のドキュメントをどのように処理するかを示します。世の中には非標準の HTML が大量に存在するため、ブラウザは HTML 仕様に準拠していないにもかかわらず、これらのページを表示しようとします。一部のコンテンツはブラウザ戦争の初期に存在していた独自の機能に依存しており、これらのプロパティは仕様に準拠していません。 compatMode は、次のように 1 つまたは 2 つの値を返します。

Mar 22, 2017 pm 04:01 PM

html5，Document ，metadata

HTML5 Canvas はバックギャモンゲーム (画像とテキスト) のコード共有を実装します。

私は以前に C# の WinForm で GDI+ を使用したり、Java グラフィックパッケージを使用してバックギャモンを作成したりしたことがあったので、この論理的な考え方には慣れていましたが、最近 HTML5 のキャンバス描画機能 (通常、企業はこれらを使用しません) を見直したいと思いました。もちろんバックギャモンを作ったわけではありません。以前のクライアントコードを参考にして、以前の勝敗判定アルゴリズムとコンピューターAI（ネットワーク借用）アルゴリズムだけを使用しています。もちろん、html5で作られたバックギャモンもたくさんあります。と Baidu がありますが、どちらか一方を自分で実装するのは常に良いことです。これ以上の話はやめて、本題に入りましょう。 ^_^

Mar 22, 2017 pm 03:43 PM

HTML5 ，Canvas，五子棋游戏