テキストをコピペするときにスタイルごとコピーされちゃうのってどんな仕組み？ - Qiita
概要 文章をコピペしてエクセルに張り付けたときに、画面のスタイルもコピーされてしまって困ったことはありますか？ありますよね！ （↓こんな感じ） 私もよくやってしまうのですが、実際にどのような処理が行われているのかよく分かっていませんでした。理解を深めるためにも、自分で実装して謎を解いていきたいと思います。 3つパターンの処理を実装 比較のため、プレーンテキスト・HTMLテキスト・リッチテキストのコピー機能をサンプルプログラムを実装してみました。 （リッチテキストのコピーが、範囲選択してコピペしたときと同じ機能を想定しています。） HTMLファイル 画面表示されるHTMLは下記のような感じです。各コピー処理でid="message"の部分を固定でコピーするようにします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"
【HTML】フォームバリデーションの実装方法をもう一度見直してみる【生JavaScript】
//html <input type="text" id="text" required> <span id="errorMessage"></span> //js const input = document.getElementById('text'); const errorMessage = document.getElementById('errorMessage'); if (input.checkValidity()) { // 標準のバリデーション機能 errorMessage.textContent = input.validationMessage; // 標準のバリデーションメッセージ } 標準機能を用いたバリデーション なにが嬉しいの？ Web APIにはクライアントのバリデーションに必要な機能が標準でいくつも実装されており、これらを利用することで「自分で書くコード
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
It's time to lazy-load offscreen iframes! | Articles | web.dev
<iframe src="https://example.com" loading="lazy" width="600" height="400"></iframe> This demo of <iframe loading=lazy> shows lazy-loading video embeds: Why lazy-load iframes? Third-party embeds cover a wide range of use cases, from video players to social media posts to ads. This content is often not immediately visible in the user's viewport, but users still pay the cost of downloading data and c
「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita
続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
話題の Portals を使った画面遷移 UX の未来 | ウェブボウズ
ご無沙汰しております。ウェブボウズを立ち上げて 1 年が経ちました。皆さま如何お過ごしでしょうか。私は、この 1 年間ひとつもブログポストできていません。さらには私の坊主頭（スキンヘッド）にちなんでウェブボウズという名前をつけた個人ブログでありましたが、5 年間共にしたこの Hair-less style から心機一転して 2019 年は髪を育んでいく方針を固めましたので、もはやボウズでもなくなってます。変わり続けることだけが普遍であると胸に刻んで今年も強く生きていきたいと考えております。 さて、最近 Signed HTTP Exchanges やら Performance Budget やらさまざまな面白いことに関わらせていただいて忙殺と幸せを噛み締めている中でも、Chrome Dev Summit 2019 でも大きくフィーチャーされました Portals という新しい HTML 要素
Fabricator - 自作UIツールキットのベースに
ここ数年ではUIツールキットと呼ばれるデザインテンプレートが多く出てきました。もっとも有名なところではBootstrap、Foundationなどが知られています。 そんなUIツールキットを自作できるのがFabricatorです。階層構造でファイルを管理し、スタイルガイドなども生成してくれます。 Fabricatorの使い方 デモです。デモなのでスタイル設定はほとんどされていません。2ペインでメニューとコンテンツに分かれています。 各コンポーネントのページです。本当はここに装飾を施した状態で表示されます。 テーブルやテキストエリアなど。 フォーム。 HTMLタグの確認もできます。 Fabricatorを使うことで、自社サービスのデザインを統一したり、新しく入った人でもすぐにデザインにかかることができるでしょう。何よりすべてのスタイルガイドが一覧できることで品質維持にもつながるはずです。 F
Ratchet
Build mobile apps with simple HTML‚ CSS‚ and JS components. Download Ratchet Currently v2.0.2 Tweet Follow @GoRatchet Code licensed under the MIT License and the docs are licensed under CC BY 3.0. Ratchet was lovingly crafted by Connor Sears. Currently v2.0.2 · Issues · Releases · Legacy v1.0.2 Docs
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。Read less
フレームワーク対決！Angular VS React仮想パネルディスカッション
フレームワーク対決！Angular VS React仮想パネルディスカッション 吉川 徹 特集企画「アプリケーションアーキテクチャ最前線」では、さまざまな視点からアプリケーションアーキテクチャをエキスパートたちに語っていただきます。今回は、今話題のAngularJSなどのJavaScript MVCフレームワークの台頭と進化、そして新しいアーキテクチャであるFluxとそのフレームワークであるReactなどについて、既に先行して学んでいるエキスパートたちにその知見を聞いてみました。 今回はフレームワーク対決ということで、エキスパートたちがAngularとReactという陣営に分かれ、それぞれのフレームワークについて疑問点をぶつけたり、議論したりする仮想パネルディスカッションという形式でお伝えします。単なるパネルディスカッションとは違って、キーワードは「プロレス」です。まさかりの投げ合い、di
JavaScript Hand Tracking·HTML5/JavaScriptによる手の認識ライブラリ MOONGIFT
CV（コンピュータビジョン）はここ数年でどんどん盛り上がっています。2Dもあれば3Dによる認識もあります。認識精度があがることで、様々なアプリケーション、サービスが生まれてくるでしょう。 まるで映画の中のコンピュータのような世界ができるかも知れません。それをWeb上で手軽に体感できるのがJavaScript Hand Trackingです。 JavaScript Hand Trackingの使い方 こちらがデモです。手の部分が赤い線で認識しています。 動かしても認識が追従しています。 動画によるデモ。手の形を変えても認識しているのが分かるでしょうか。 JavaScript Hand TrackingはWebカメラだけで手軽に手の認識技術が試せ、遊ぶことができます。肌の色は設定で認識幅を調整できるようになっています。 JavaScript Hand TrackingはHTML5/JavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popover API - JavaScript不要、HTMLのみでポップオーバーUI
html-best-practices/README.ja.md at main · hail2u/html-best-practices
Free Open Source Tailwind CSS Components | HyperUI
GitHub - YusukeHirao/markuplint: A Linter for All Markup Languages.
GitHub - sampotts/plyr: A simple HTML5, YouTube and Vimeo player
W3Schools.com
Cachet: The Open Source Status Page System
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
