ホーム>Web デザインのチュートリアル> HTMLチュートリアル
すべて Dreamweaver チュートリアル JavaScript チュートリアル HTMLチュートリアル CSS チュートリアル ヒントとコツ DHTML チュートリアル ウェブ特殊効果 WEB標準化
HTMLチュートリアル
  • モバイル端末上でHTML5で長押しイベントをシミュレートする実装方法

    モバイル端末上でHTML5で長押しイベントをシミュレートする実装方法

    この記事を書いた理由 最近、ラベルを長押ししてフローティング削除ボタンを表示したいというリクエストを受けました。この要件は実際にはアプリでは非常に一般的ですが、モバイル H5 では長押しイベントがないため、このイベントを自分でシミュレートする必要があります。おおよその効果は次のとおりです。 ps: gif を作成するには、アプリをダウンロードし、電子メールで送信する必要がありました。
    2025-01-18
  • 左右幅固定ミドルアダプティブHTMLレイアウトソリューションの詳細説明

    左右幅固定ミドルアダプティブHTMLレイアウトソリューションの詳細説明

    この記事では、左右幅固定ミドル HTML">アダプティブ HTML レイアウト ソリューションの詳細な説明を紹介し、皆さんと共有します。詳細は次のとおりです。 a. フローティング レイアウトの HTML 構造を次のように使用します。<div class=box><div class=left>左</div>
    2025-01-18
  • HTML5 および小さなプログラムは、写真の回転、圧縮、アップロードの機能を実装します。

    HTML5 および小さなプログラムは、写真の回転、圧縮、アップロードの機能を実装します。

    元のアドレス: github.com/whinc/blog/… 最近、コメントの投稿リクエストを受け取りました。ユーザーはコメントを入力し、写真を撮るか、アルバムから写真を選択してアップロードできます。つまり、グラフィックとテキストがサポートされています。コメント。 H5 と小規模プログラムの両方で同時に実装する必要があるため、この要件では画像を処理するための多くの場所が必要になります。この記事では、H5 側での画像処理の実践について説明します。
    2025-01-18
  • HTML5ビデオ再生（ビデオ）、JavaScript制御ビデオサンプルコード

    HTML5ビデオ再生（ビデオ）、JavaScript制御ビデオサンプルコード

    具体的なコードは次のとおりです。<html lang=en><head><meta charset=UTF-8><title> Documenttitle><style>figcaption {text-align: center;line-height:
    2025-01-18
  • 従来の HTML ページのモジュール読み込みを実装する方法

    従来の HTML ページのモジュール読み込みを実装する方法

    Web サイトの場合、ヘッダー、フッター、ユーザー列など、多くのページ間に多数の共有モジュールがあります。バックエンド ビュー エンジンを備えたフレームワークの場合、これらの共有は比較的簡単に抽出できます。たとえば、asp.net mvc には、ビュー テンプレート関数を共有できる統合レイアウトの MasterPage、@Section などの関数があります。でもHさんにとっては
    2025-01-18
  • HTML5 でダイアログ要素を試してみることについての簡単な説明

    HTML5 でダイアログ要素を試してみることについての簡単な説明

    ダイアログ ボックス (モーダル ボックスやフローティング レイヤーとも呼ばれます) は、Web プロジェクトでのユーザー インタラクションの重要な部分です。私たちが使用する最も一般的なものは、js のalert() とconfirm() です。ただし、このダイアログ ボックスは美しくないため、使用できません。スタイルはカスタマイズできるため、開発プロセスでは通常、独自のニーズに応じてホイールを構築するか、サードパーティ製のホイールを使用します。ダイアログボックス
    2025-01-18
  • Canvas を使用してガシャポンマシンのアニメーション効果を実装するサンプルコード

    Canvas を使用してガシャポンマシンのアニメーション効果を実装するサンプルコード

    あっという間にインターン生活が2ヶ月になりました。 今月の課題は、ガシャポンの抽選イベントを行うことです。フロントエンドに残す 最大の課題はガシャポンマシンのアニメーションを実現することだけでした。背景はネットでガシャポンのアニメーションを見つけてワクワクしていたのですが、CSSを使って直接アニメーションさせていることが分かりました。
    2025-01-18
  • html5/css3レスポンシブページ開発のまとめ

    html5/css3レスポンシブページ開発のまとめ

    1. アダプティブとレスポンシブの違い アダプティブはすべての端末に適応するテンプレートのセットですが、各デバイスで表示されるレイアウトは同じであり、一般に幅アダプティブとして知られています。一連のレスポンシブ テンプレートはすべての端末に適応しますが、各デバイスで表示されるレイアウトは異なる場合があります。レスポンシブ/アダプティブ Web デザインでは、さまざまなデバイスと互換性を持たせるために多くの作業が必要になり、コードが煩雑になり、読み込み時間が長くなります。
    2025-01-18
  • Canvas を使用して貪欲なスネークを段階的に書く方法を教えます

    Canvas を使用して貪欲なスネークを段階的に書く方法を教えます

    以前、MOOC で Canvas ビデオを数エピソード見たことがあり、何かを書く練習をしたいと常々思っていました。 Snake は比較的簡単な気がします。私も学生時代に C 言語の文字版を書きましたが、それでも意外と問題が多かったです。最終的な効果は以下の通りです（画像が大きすぎると時間がかかりすぎます。GIFを録画するソフトには時間制限があります...） まず、ゲーム領域を定義します。蛇
    2025-01-18
  • rem適応レイアウトの詳細説明

    rem適応レイアウトの詳細説明

    現在、携帯電話にはさまざまな種類があり、iPhone シリーズはもちろん、Android 携帯電話にも無数の種類があるため、すべての携帯電話に一連のレイアウト スタイルを記述することは不可能です。これは、フロントエンドでは不可能です。もちろん、合理的な解決策を見つけるために、ますます卓越性を追求するよう努めています。 rem はアダプティブ レイアウトに使用されます。達成するための適応
    2025-01-18
  • html5 postMessage フロントエンド クロスドメインおよびフロントエンド リスニング メソッドの例

    html5 postMessage フロントエンド クロスドメインおよびフロントエンド リスニング メソッドの例

    場合によっては、フロントエンドのシングル サインインなどの愚かな要件に遭遇することがあります。必要に応じて、解決策を考える必要があります。ここでは、postMessage のクロスドメイン情報送信とストレージ監視を使用する、シンプルなフロントエンド シングル サインイン ソリューションを紹介します。この記事で使用されるナレッジ ポイントは、静的リソース サービス、クロスドメイン、p の koa の設定です。
    2025-01-18
  • HTML5 IndexDB を使用して画像とファイルを保存する例

    HTML5 IndexDB を使用して画像とファイルを保存する例

    先日、画像やファイルを localStorage に保存する方法について書きましたが、それは今日私たちが利用できる実用主義についてでした。 ただし、localStorage にはパフォーマンスへの影響があり、これについては後のブログで説明します。将来的に望ましいアプローチは IndexedDB を使用することです。
    2025-01-18
  • HTMLでのフォーム送信の実装

    HTMLでのフォーム送信の実装

    フォーム送信コード 1. ソースコード解析<!DOCTYPE html><html lang=en><head><meta charset=UTF-8>
    2025-01-18
  • Canvasパズル機能の実装コード例

    Canvasパズル機能の実装コード例

    最近、プロジェクトに取り組んでいるときに写真コラージュ機能に出会ったので、ここでカプセル化されたキャンバス コラージュ機能を共有します。質問がある場合、またはより良い方法がある場合は、プライベートでチャットしてください。実装のアイデアに感謝します。これは主に画像のリンク、画像の幅、画像の高さをサーバー経由で取得します。
    2025-01-18
  • HTML スクリーンショットを取得し、ローカル画像として保存するための実装コード

    HTML スクリーンショットを取得し、ローカル画像として保存するための実装コード

    具体的なコードは次のとおりです。<!DOCTYPE html><html><head><meta charset=UTF-8><title> html2canvas_download</title>
    2025-01-18
前のページ 141516171819202122次のページ