「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
そうなんです。 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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (Layout Shift) が生じる問題がありました. この問題を解決するため以前より, アスペクト比を埋め込むための新たな属性の導入が提案されていました. しかし最近議論に動きがあり, 既存の属性を利用する方法が提案され, ブラウザに実装され始めています. ここでは問題の背景, 提案と議論の変遷, そして開発者が取るべき対応について紹介します. はじめに img タグと Layout Shift intrinsicsize 属性 intrinsicsize
web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 遅延読み込みのloading属性とは 遅延読み込みの現代的なアプローチ パフォーマンスとLighthouseスコアの向上 最大のパフォーマンスを得るための画像最適化テクニック はじめに 画像の遅延読み込みは比較的簡単に実装でき、パフォーマンスを大幅に向上させることができるため、Webサイトを最適化するために使用される選択肢の1つです。遅延読み込みで
imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法
レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登場した2つの優れた解決方法を紹介します。 Avoiding <img> layout shifts by Jake Archibald (@jaffathecake) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レイアウトシフトとは aspect-ratioプロパティによるレイアウトシフトの回避方法 widthとheightによるレイアウトシフトの回避方法 どちらの方法を使用すべきか レイアウトシフトとは デフォルトでは、<im
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。 レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット 新しい画像フォーマットを読み込むための取り組み 最初のステップ: picture要素でwebp画像を読み込むには 完全版
最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便利なスタイルを紹介します。 最近のリセットCSS、また設定しておきたスタイルや一部のブラウザ用に設定しておきたスタイルは、下記をご覧ください。 2023年、現在の環境に適したリセットCSSのまとめ img要素に設定しておきたスタイルは、こちら。 img { max-width: 100%; /* 1 */ height: auto; /* 1 */ vertical-align: middle; /* 2 */ font-style: italic; /* 3 */ background-repeat: no-repeat; /* 4 */ background-size:
CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ
Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な使い方を紹介します。 Min and Max Width/Height in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに widthプロパティにおけるminとmax heightプロパティにおけるminとmax minとmaxプロパティの効果的な使い方 メモ リソース はじめに 要素の幅をその親に対して相対的にすると同時に、
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
この記事は2023年7月19日時点の Chrome の最新版 115.0.5790.98 を使って検証しました。今後 Chrome の実装によって挙動が変わる可能性はございます。 はじめに 画像表示のパフォーマンス改善において、「decoding="async" をつけましょう」というのをよく見かけますが、おそらくほとんどの人がその実際の挙動を理解していない、あるいは誤った認識をしていると思います。今回詳しく調べる前の僕も含めて。 loading と decoding の違い 画像のパフォーマンス改善で decoding="async" のほかに、もう一つよく言及されるのが loading="lazy" です。decoding 属性について詳しく見る前に、まずは loading 属性との違いについて理解したほうがいいと思います。 loading とは、ブラウザがどのように画像を読み込むかを
国際通貨基金（ＩＭＦ）のゲオルギエワ専務理事（写真左）は１２日、ロシア経済について、経済成長は大規模な軍事費に支えられているものの、人口の流出と技術不足を受け、厳しい局面を迎えるとの見方を示した。２０２３年１２月撮影（２０２４年 ロイター/Julia Nikhinson） [１２日 ロイター] - 国際通貨基金（ＩＭＦ）のゲオルギエワ専務理事は１２日、ロシア経済について、経済成長は大規模な軍事費に支えられているものの、人口の流出と技術不足を受け、厳しい局面を迎えるとの見方を示した。
例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の画像を表示する という風に、大きさの異なる画像を出し分けたいときに使うのがsrcset属性です。 srcset属性のデモページ（ソース） ※後述していますが、ChromeやSafariの場合はスーパーリロードしないと画像が切り替わりません 例えば、以下のように書くと <img srcset="small.png 400w, medium.png 640w, large.png 1024w" src="large.png" /> imgタグは、
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 （HTMLの標準規格書より） マジでこれに尽きる。 具体例 例１：ロゴ ❌ 間違ったマークアップ
Intro 長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。 ここでは、特に画像 <img> に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解説する。 画像最適化シリーズ第 5 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 > 画像最適化戦略 Lazy Loading 編 Lazyloading 画像や iframe の埋め込みは、読み込むサイズも大きく、処理が同期であるため、レンダリングのボトルネックになりやすく、それらが多いページでは初期表示の遅延の原因となることが多くあった。 特に縦に長いページでは、最初にユーザが見えている領域 (Above the Fold) では表
Intro <img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。 この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。 その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。 srcset attribute まず以下のようなコードを考える。 <style> body { margin: 0; } </style> <body> <img id=hero_image src=320x240.png srcset=" 320x240.png 320w, 640x480.png 640w, 800x600.png 800w, 1024x768.png 1024w, 1280x960.png 1280w
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro
真摯に人生と向き合っています 毎日さまざまな話題のエントリーが生まれるはてなブログの中から「旬な話題」をピックアップする企画「はてなブログで話題」。今回は「中年の危機」をテーマに記事を紹介します。 「何もやる気が起きないのに、何もしていないことに焦りを感じ」ることに危機感を抱く id:fujipon さんによる、「煮詰まった中年」の気分転換の方法を募るエントリーが、2022年10月第1週のはてなブログランキングにランクインしました。 シロクマ（id:p_shirokuma）さんは、「行き詰った中年男性」の気分転換について、以下のように回答しています。 中年男性に限らず、閉塞感のある日常を変えるのは、驚きや感動や好奇心だと思います。ときめきやきらめき、ドーパミンが出るような体験だとも思います。もし、私が閉塞感のある日常に置かれているとしたら、そのような体験を突破口とみなし、それらを求めにかか
Chromeのloading属性は、指定しなくてもデフォルトで"lazy"の挙動となりうる ～loading属性の落とし穴から学ぶ、機能拡張と初期値・デフォルト挙動の話～ - Qiita
Chromeのloading属性は、指定しなくてもデフォルトで"lazy"の挙動となりうる ～loading属性の落とし穴から学ぶ、機能拡張と初期値・デフォルト挙動の話～CSSJavaScriptChrome 【事前知識】loading属性について Chromeのimg・iframe要素には、loading属性というものがある。 こいつをHTMLでloading="lazy"のように指定すると、遅延読み込みする（画像等がスクロール等で画面内に入ってきた時に初めて読み込み始める）。 こうすることで、時間がかかる無駄な読み込みが抑えられ、ページ表示速度が速くなったり、通信量を減らせたりする。 値には次の3種類があり、"lazy"が遅延読み込みオン、"eager"は遅延読み込みオフ（遅延せず愚直にすぐ読み込み）、"auto"はlazyかeagerかをChromeがネットワーク速度などを考えて自動
GitHub - yuiseki/twint-gyazo: Pythonで書かれた、Twitterの指定したユーザーの画像を全部Gyazoにアップロードするスクリプト
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
画像の読込処理の違い ページ作成日 2019年12月19日 ページ更新日 2021年3月2日 著者: 竹洞 陽一郎 Webページにおいて、画像は重要な役割を果たしており、高解像度化と利用される枚数は増えていく傾向にあります。 その一方で、画像は、従来どおりの実装をしていると、HTMLのパース処理を遅延させる要因となります。 画像をいかに遅延要因としないようにするかの処理として、decoding="async"とloading="lazy"の違いを解説します。 decoding属性は、画像のデコード処理に関しての指示をユーザエージェントに明示する属性です。 decoding="async"と指定することで、画像のデコード処理を非同期にバッググラウンド処理し、他のコンテンツの表示処理が終わった時に更新処理で画像を一緒に出します。 記述の仕方としては、以下のようになります。 <img class
2022/10/29 追記・注意事項 執筆から1ヶ月半ほどですが、この記事の内容は既にだいぶ古いです。お絵描きAI進歩速すぎる。 Waifu Diffusionは1.3からpromptソートが無意味になり、アンダーバーも不要になり、 ていうかそもそもモデル何でもいいならNovel AIの流出モデルを使った方が比べ物にならないほど質がいいです。 アプリもNMKDは最新トレンドについてこれてないのでAutomatic web ui一択になってます。 もういちいち更新する気も起きないのでこの記事は当時の状況を記す歴史資料として残します。 最新情報は他の記事を当たってください。 前置き この記事ではWaifu Diffusionを扱います。 意外と知らずに使っている方もいるようなのでここで念押ししておきますが、Waifu DiffusionはDanbooruという真っ黒もいいとこな無断転載天国サイ
Result 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目が対策した場合+画像が無い時。 3番目が対策した場合+画像がある時。 何もしなければ1番目の表示になります。 対策すると2番目のように任意のスタイルで表示されます。 対策した場合でも3番目のように画像があれば影響を受けません。 cssご存知のように基本的にはimgに疑似要素は使う事が出来ません。 が、デモのように画像が存在しない時は使う事が出来るようなのでそれを利用してスタイリングする、みたいな話です。 img { display: inline-block; font-family: Arial, sans-serif; font-weight: 300; line-height: 2; text-align: center; min-width: 300px; min-height: 50p
Optimize Cumulative Layout Shift Stay organized with collections Save and categorize content based on your preferences. Cumulative Layout Shift (CLS) is one of the three Core Web Vitals metrics. It measures the instability of content by combining how much visible content has shifted in the viewport with the distance the affected elements moved. Layout shifts can be distracting to users. Imagine yo
alt属性をよくわかっていなかった私が代替テキストを書けるようになった話 - Pepabo Tech Portal
こんにちは。最近の猛暑に生存の危機を感じています、コーポレートデザインチームのmewmo(@mewmoppel)です。 突然ですがみなさん、alt属性ってご存知ですか？ alt属性とは、HTML文書においてimg要素に付随する属性のひとつで、画像によって伝えたい内容を説明するための代替テキストを提供します。最近ではTwitterやInstagramといったSNSでも代替テキストを用意できるようになり、より私たちの生活にとって身近なものになっているのではないでしょうか。 そんなalt属性について、最近私がやってしまった失敗とその改善から学んだことをこの場で紹介したいと思います。 alt属性はなぜ必要なの？ alt属性のここがよくわかっていなかった！ 代替テキストを適切に書くためのコツ 1. 画像をなくしてもページの文意が同等レベルで伝わる 2. スクリーンリーダーで読み上げたときに何の画像な
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
By default, an <img> takes up zero space until the browser loads enough of the image to know its dimensions: When you run the demo, you'll see the <figcaption> immediately. Then, after a few seconds, this paragraph and subsequent page content shifts downwards to make room for the image. This makes the user experience massively frustrating, as content moves out from under the user's eyes/finger/poi
The Humble <img> Element And Core Web Vitals — Smashing Magazine
Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from Addy’s new book (also, check a free PDF preview). The humble <img> element has gained some superpowers over the years. G
コア ウェブ バイタルのCLSをチョー簡単に改善する方法（めっちゃカンタン）【SEO情報まとめ】 | 海外&国内SEO情報ウォッチ
グーグル検索ランキング要因になる予定の「コアウェブバイタル」だが、何をどう改善すればいいかわからない人もいるだろう。 そこで、技術がわからなくてもHTMLだけでだれでもカンタンに実現できる、コアウェブバイタル指標の改善方法をお教えする。本当にカンタンだ。 それ以外にも、今週は良いトピックが満載だ。 「グーグル社員おすすめのSEOプラグイン」 「サイトマップにURLを記載する順序」 「画像の品質が検索ランキングに影響！？」 「グーグルでよく検索される購買クエリ」 などなど、気になる見出しがあったら（なくても）ぜひ2ページ目まで見ていってほしい。 グーグル社員おすすめの、SEOにいちばん強いプラグインはどれ？画像の品質は検索ランキングに影響するのか？ → 実はYES（なるほど）サイトマップに記載するURLの順番はクロールの優先度に関係するのか？Googlebotが漫画を読めるようになった!?グ
positionを使って要素を配置する際、その要素を中央に配置したいといったことはよくあると思います。その場合どうすしたらいいのか悩まれた経験はありませんか？ 今回は、positionで、要素の幅が確定していなくても上下中央、左右中央、上下左右中央に配置できるcssの設定方法をご紹介します。 positionとtranslateを使って要素を中央に配置する方法 具体例と解説 それでは、具体例を示しながら実際の設置方法を解説していきたいと思います。 例は、画像の上にテキストを配置するケースで、テキストの配置位置は、上下左右中央になるようにする場合です。 完成イメージは下記図になります。（わかりづらいかもしれませんが、水色部分が画像[img]だと仮定してください） 図 それでは、具体的にソースを示してから解説していきたいと思います。 まずは、htmlとcssをご確認ください。 html
大量の画像を含むWebページは、一般に表示速度が遅くなりがちです。 imgタグを使って、普通に実装すると次のような現象が起きてしまいます。 画像の読み込みが終わるまでブラウザが重くなり、画面操作に支障が出る ネットワークやサーバーの負荷が瞬間的にひっ迫する PageSpeed Insightsで低スコアになる これだと、サイト利用者にとっても、サーバー側にとっても、いいことはないですね。 対処方法として、スプライト画像を使うとか、CDNを使うとか、Expiresヘッダを設定するとか様々な方法がありますが、Webフロント側でお手軽にできる対策が画像を遅延ロードできるJavaScriptライブラリ「Lazy Load」の導入です。 今回は、Lazy Load で画像を遅延ロードする方法を解説します。 遅延ロードとは？ 画像の遅延ロードとは、ブラウザの画面領域内に存在する画像のみをロードし、画面
ブログ記事の本文などで幅100%の画像を配置する場合、縦長の画像がやたらでかくなってしまったりなど、画像のアスペクト比によってその印象が大きく違ってしまうことがある。これをアスペクト比に関わらず大きさが揃って見えるようにしたい。それには各画像の面積が同じになるように幅をコントロールできればいいのではと考え、CSSでやってみた。 まず基準になる画像として、もっとも横長な画像のアスペクト比を決める。ここでは例として16 : 9とする。この16 : 9画像の幅を100%として、それ以外のアスペクト比の画像の相対的な幅を求めていく。 HTMLでは、各img要素のstyle属性に、アスペクト比を分数形式にしてカスタムプロパティとして指定する。 <img src="cat.jpg" style="--aspect-ratio: 16/9;"> <img src="dog.jpg" style="--a
WebP対応をしたらサイトが軽くなったので、最も対応しやすい方法を解説します | Blog | 株式会社イロコト | ゲーム･アニメ等のエンタメ系Web制作&運用会社
こんにちは、Webコーダーのばやしです。 さっそくですが、皆様は「WebP対応」していますか？ 「対応していないブラウザへの対応が面倒・・・」 「そんなにサイト速度が大きく変わらないならPNG,JPGで十分」 と考えている方も多いかと思います。かくいう私も同じように考えていました。 とはいえ、いつまでも見てみぬふりをするのは良くないと思い、この度調査の上弊社サイトで実践しました。 そもそもWebPとは そもそも「WebP」とは何でしょうか。さっそくWikipedia先生に聞いてみましょう。 WebP（ウェッピー[2]）は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。 https://ja.wikipedia.org/wiki/WebP まさにこの記載通りのもので、従来のWebページに使われる「JPG・PNG・GIF」などと替わって通信量削減や
UI操作＆超多機能な「Stable Diffusion web UI」をローカルで使う方法 | くいなゲームズ -KUINA GAMES-
「Stable Diffusion web UI」をダウンロードする それでは、いよいよ「Stable Diffusion web UI」をインストールしていきましょう。 GitHubのサイト（https://github.com/AUTOMATIC1111/stable-diffusion-webui）にアクセスしてzipファイルをダウンロードして、解凍します。 Hugging Faceからモデルをダウンロードする Hugging Faceのサイト（https://huggingface.co/CompVis/stable-diffusion-v-1-4-original）にアクセスして「sd-v1-4.ckpt」ファイルをダウンロードしましょう。 あらかじめライセンスに同意していないとダウンロードページは表示されません ダウンロードしたファイルの名前を「model.ckpt」に変更して
良い画像の説明を作成する方法 | Xヘルプ
<path opacity="0" d="M0 0h24v24H0z" /> <path d="M17.207 11.293l-7.5-7.5c-.39-.39-1.023-.39-1.414 0s-.39 1.023 0 1.414L15.086 12l-6.793 6.793c-.39.39-.39 1.023 0 1.414.195.195.45.293.707.293s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.023 0-1.414z" /> </svg>" data-icon-arrow-left="<svg width="28px" height="28px" viewbox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
CSSのみで、クリックするとGIFアニメが再生されるやつ
Result 画像をクリックするとGIFアニメが再生される、みたいなやつです。 マウスホバーで再生というお手軽な方法もあるけど、クリック再生はこれはこれで利用シーンがあるんじゃないかなと。 方法はこの手のトリックではお馴染みのinputを利用する形となります。 csslabel.clicktogif {/*再生ボタン*/ background: url('image.png') DimGrey no-repeat center center; display: block; float: left; } label.clicktogif:hover, label.clicktogif:focus-within {/*再生ボタン、マウスホバー用*/ background: url('hover.png') DarkSlateGrey no-repeat center center; disp
Err... thanks for the technical explanation. But what does this actually mean in real life? Which setting should you use? Does it even matter? And if it does, why don't those clever browser engineers just set it to the best setting? Well recently I ranted on Twitter about this (as I am often want to do!) in a long thread that really should have been a blog post. So here is that blog post. Some mis
Googleが発表した、WebページUX指標「コアウェブバイタル」には、「LCP」「FID」「CLS」の3つの指標があります。詳しくは Web担当者フォーラムの【重要】コアウェブバイタルとは？ グーグルのUX指標LCP/FID/CLSの意味や基準値をわかりやすく解説【SEO情報まとめ】に書かれています。 この中のCLS（Cumulative Layout Shift）とは「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標です。例えば画像を読み込む際、その画像サイズが指定されていなく、画像の次にはテキストが書かれていたとします。この場合、テキストの方が軽いため先に読み込まれます。まずテキストが読み込まれ、その間に画像が読み込まれますが、ブラウザは画像サイズが分かりません。読み込みながら「あ、この画像は500 x 500の画像だったのか」と理解し、テキストの上に縦横500の余白を作り、
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
幅固定のコンテンツ内で画面幅いっぱいに要素を広げて配置する
コンテンツの幅固定で左右中央位置に配置された要素内で、画面幅いっぱいに要素を広げて配置する方法を試してみます。 サンプルコード 以下のようなHTMLで、.contentsが固定幅の左右中央配置、その中の.full-widthを画面幅いっぱいに広げてみます。 HTML <div class="contents"> <div class="full-width"> <p>ここの内容を画面幅100%にします。</p> </div> <div class="full-width"> <img src="./image.jpg"> </div> </div> まずは対応前のCSSです。 .contentsは最大幅1000pxの中央配置、imgは幅100%にしています。 CSS img { width: 100%; height: auto; } .contents { max-width: 1000
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[Stable Diffusion] AIでテキストから画像を生成する使い方を解説 [text2img]](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe426d4ead4e7cd07b1ecb426120766670eaaf6d/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEg8HAAB8FgkHF8gfofVmD87nOM3ZzDlH_Wtd0fD7eXxwIoGdUdqu0SUwydZhMr2nr8YYPAKwL3rnAA9q5R5GAO83zgutxMZE81v-lhzzZJyw_gfSI63sHqfrx2w3RRWLQK4P0MXohW-uber7HMCmDXarPeP0SYDAtq_AC7iycFwT03fl2Lfo7nXKWmKiw%2Fw1200-h630-p-k-no-nu%2F%25E3%2582%25A2%25E3%2582%25A4%25E3%2582%25AD%25E3%2583%25A3%25E3%2583%2583%25E3%2583%2581.png)
![[Stable Diffusion] AIでテキストと画像から新たな画像を生成する [img2img]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9ff55a2d3554b906e9722877fe661c9b6e726725/height=288;version=1;width=512/https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEgrzqM8C6hw14TSonVukNWsgzQsY7isEEOYRpb1O4ng5Wv5359a-a1iWGh8LV2mczSaIOPhiA8PX9uROHGOAGa0XYbhDZDYWWAqt62_nMvzMkyK1M9Zp4NZHTwiL-qZD8-t1i55rAr5Z5QVgryfkmnRduGRmrBJWZAxlK9eSqb7wD561OuBL5c9DCPgqA%2Fw1200-h630-p-k-no-nu%2Feye1.gif)
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法
これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード
CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
decoding="async" について詳しく調べてみる
ロシア経済、人口流出と技術不足で「難局」に＝ＩＭＦ専務理事
pictureタグとsrcset属性の違い。超わかりやすく
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
画像最適化戦略 Lazy Loading 編 | blog.jxck.io
img の srcset 指定時に選択される画像 | blog.jxck.io
CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
「ときめきやきらめき」を探求する体験で、中年期の行き詰まりから抜け出す！！！ - 週刊はてなブログ
decoding="async"とloading="lazy"の違い| PerfData
絵下手マンがWaifu Diffusionでファンアートを描く方法 - Qiita
imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する
Optimize Cumulative Layout Shift | Articles | web.dev
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右)
Lazy Loadで画像を遅延ロードする方法 | ページスピード改善 | テクニカルSEO BLOG
アスペクト比の異なる画像を同じ面積で表示する
What does the image decoding attribute actually do?
Googleの新しいUX指標、CLSエラーを解消するimgタグの書き方
大きな画像をJavaScriptでリサイズしてからAjax送信する方法
blog.livedoor.jp/yakiusoku
www.haiku-kigo-ichiran.net
www.xn--4rra073xdrq.com
artfoods.hatenablog.com
kotobank.jp
blog.livedoor.jp/yakiusoku