• html webpack プラグインの使い方のチュートリアル

    を使用します。 html-webpack-plugin プラグイン を使用してページを起動することができます。 htmlページをメモリに格納する ページの読み込み速度を向上させるために また index.htmlページで紹介されているJSファイルのパスを自動的に設定します。 使用するための前提条件 プロジェクトにWebpackがインストールされていること 使用の

    2022-01-07 17:25:04
  • htmlのドラッグ&ドロップによるコンテンツ位置の2つの実装方法

    テスト:クローム v80.0.3987.122 動作確認 通常のラベルの位置をドラッグ&ドロップする方法と、キャンバスのテキストボックスの位置をドラッグ&ドロップする方法の2種類があります。 1. タブ要素をマウスでドラッグして任意の位置に移動できるようにする デモアドレス cssコード #range { position: relative;

    2022-01-07 16:43:15
  • htmlテーブルの比較幅のオーバーフローを解決する方法

    テーブルの幅が広いとオーバーフローすることがあります。 例えば、leftとrightの2つのdivがあるとします。右のdivにテーブルがあっても、幅が広ければ、右のdivではなく、その下に表示される可能性が高いです。この場合、このテーブルの幅は次のように指定すればよい。 コピーコード コードは以下の通りです。 <table style='width:85

    2022-01-07 16:34:40
  • HTMLコードによる画像断片化読み込み機能

    今日はこんな感じの断片化された画像の読み込み効果を実装します。 これを3つのステップで行っています。 htmlの構造を定義する 画像の分割 アニメーション関数の作成 htmlの構造を定義する ここで必要なのは、canvas要素だけです。 <html> <body> <canvas

    2022-01-07 16:26:57
  • 詳細 HTMLフォントはline-heightを使用して、まだ垂直方向の中央に配置することができません解決策

    と の画像では、当然ながら、quot;next" のテキストを水平方向だけでなく垂直方向にもセンタリングしたいので、以下のようなコードを記述します。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <st

    2022-01-07 15:58:05
  • テーブルの適応とオーバーフローの設定詳細

    1. テーブルリセットの2つの属性 1border-collapse: collapse; /* テーブルのマージボーダーモデルを設定します */ border-spacing: 0; /* 表に現れるセル間の間隔を0にする */。 コード <div class="fz"> <div style="width: 600px;" class

    2022-01-07 15:55:41
  • htmlのボタン自体を中央寄せにする方法

    htmlボタン自体を中央に配置するにはどうすればよいのでしょうか?以下のように、親タグにcentering属性を設定するとよいでしょう。 <html> <body> <center><button onClick="myClick()">hit me</button></center> <script&g

    2022-01-07 15:22:14
  • Htmlページサポートダークモード実装

    19年以来、AndroidとIOSプラットフォームは、ダークモードを再生し始めている。もちろん、これには何の問題もありませんが、私たちのページがダークモードで開かれたとき、ユーザーは即座に大きな伝統的な白の色に目がくらんでしまうでしょう。 ここでは、ページをダークモードに対応させる方法について簡単に説明します。 準備する 実は、cssでprefers-color-sch

    2022-01-07 15:02:31
  • HTMlのシームレススクロールマーキー効果

    marquee>タグは一対のタグで、最初のタグ <marquee> と最後のタグ </marquee> の間のコンテンツがスクロールするコンテンツです。marquee>タグの主な属性は、behavior, bgcolor, direction, width, height, hspace, vspace, loop, scrollamount, scrolld

    2022-01-07 14:33:07
  • HTMLでカメラを読み込む方法

    効果 全体的な効果。 動画の読み込み中です。 写真撮影を行う。 ステップ1:HTML要素の作成 まず、HTML5のドキュメントを作成します。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitle

    2022-01-07 13:57:41
  • HTMLでdivを入れ子にした場合のマージンが効かない問題の解決法

    divの中にdivを入れ子にしている場合、marginが効かない問題の解決策を以下に示します。 ちなみに、marginの定義と使い方は以下の通りです。 divのネストを行うためのHTMLコードです。    https://www.python.org/ftp/python/2.7.8/Python-2.7.8.tgz    tar

    2022-01-07 13:46:28
  • ウェブフロントエンドにおける小さなベクターアイコンの使用について

    前置き フロントエンドのページを書くとき、小さなアイコンなどの画像を使うことが多いのですが、画像を使うとコードの書き方が面倒になります。 I. 画像操作方法の紹介 まず、URLを入力します。https://www.iconfont.cn/ (b) URLを思い出せない場合は、検索することもできます。Alibaba vectorで検索すれば、URLが出てきま

    2022-01-07 13:44:17
  • QuillエディタにカスタムHTMLレコードを挿入する例

    2020年になり、のどが渇いた人間は、もはや単純なテキストでは満足しないので、テキストの様々なスタイルを運ぶ空想がある、しかし、テキストだけでは十分ではありません、我々はより見栄えのソフトコピーを送信するように、編集時にユーザーがカスタムメッセージタイプの様々を挿入できるようにする必要があり、この記事があるように。 前置き Quillエディタに付属するリッチテキストのフィルタリング(

    2022-01-07 13:07:54
  • HTML to PDFのピュアクライアントサイドおよびピュアサーバーサイドの実装プログラム

    必要条件 ユーザーがフォームに入力し、保存をクリックすると、PDFを直接ダウンロードすることができます。 ソリューションのアイデア サーバーサイドの生成 アイデア Google Chromeは17年にChrome Headless機能を独自に開発し、それと並行してpuppeteerを発売したが、これはインターフェースレスだがサーバー機能的な機

    2022-01-07 13:02:32
  • HTMLのテーブルの行間を変更する方法の例

    HTMLのテーブルを使うときに行間を変更する必要があることがありますが、margin、padding、collapseなどを変更してもあまりうまくいきません。ここで、便利なヒントを見つけました。display属性+marginで実現します。 例 #coding=utf-8 import sys def func(depth): depth += 1 print "Now

    2022-01-07 12:51:30
  • HTMLがフロートをクリアする2つの方法

    I. フロートをクリアする一つの方法 直前の親要素の高さを設定します。注意:企業での開発では、できれば高さを指定しないでください。 image.setImageURI(null) image.setImageURI(Uri.fromFile(File(path))) 2つ目は、フロートをクリアする方法です 以下の属性にclear属性を追加します

    2022-01-07 12:27:40
  • HambergurMenu (ハンバーガースタイルのメニュー)のHTML+Sass実装

    数日前に海外の人がHTML+CSSでHamburgerMenuを実装している動画を見て、最近Sassを見ていたので、Sassを使って実装してみました。 最終的にはこのような感じになりました。 VS Codeでのファイル構造(scssファイルのコンパイルにはeasy sassが使用されます)。 ページ構成(index.html)。 _config.scss。

    2022-01-07 12:25:17
  • HTMLページにSVGを挿入するための様々な方法

    SVG(Scalable Vector Graphics)とは? Scalable Vector Graphicsは、XML構文に基づく画像フォーマットです。他の画像フォーマットがピクセル処理に基づいているのに対し、SVGは画像の形状記述の一部であるため、基本的にテキストファイルであり、サイズも比較的小さく、拡大縮小しても歪むことがないのが特徴です。 svgタグの挿入

    2022-01-07 11:19:12
  • 画像が存在しない場合、HTMLでデフォルト画像を表示する例

    画像リンク <img src="" /> URLが有効かどうかをjsで判断したい場合 404ならデフォルト画像パスをロードする。 <img src="xxx" οnerrοr="this.src=default image address"/> 画像タグimgのonerrorイベント <img src="pic.gif" οnerrοr="jav

    2022-01-07 10:50:35
  • htmlページでjsonデータを表示・整形する方法

    htmlページでのjsonデータの表示と書式設定 I. 効果画像を表示する 説明情報です。 キーとなる値はすべて赤くハイライトされており、重要なパラメータであることを示しています。 数値型はオレンジ、文字列型はグリーン、ブーリアン型はブルーと、異なる色でマークされています。 II. ソースコードの表示 <!DOCTYPE ht

    2022-01-07 10:43:15