Next.jsにおけるSVGファイルの表示方法を考える

2022/10/16 9 users SVGファイル Next.js Zenn src SVG

はじめに フロントエンド開発を進める際に、Next.jsでのSVGでの扱い方について考える機会があったので、Zennで共有しようと思った次第です。 本来、Webサイト内でSVGファイルを表示させる方法は、大きく分けて以下3点だと思われます。 imgタグのsrcにSVGファイルへのパスを設定して読み込ませる。 CSSファイル内のbackgr... 続きを読む

imgタグのwidthとheightを省略したらダメ！ 画像によるレイアウトシフトを回避する最近登場した2つの優れた解決方法

2022/07/21 175 users アスペクト比 バック 手動 height width

レイアウトシフトとは、Webページがロードされる時に画像のスペースが確保されず、画像が表示された時にその分レイアウトがずれてしまうことです。 このレイアウトシフトを回避するために10年以上もの間、アスペクト比を手動で適用する必要がありました。しかし、現在ではそんな馬鹿げたハックは必要ありません。最近登... 続きを読む

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver

2020/07/02 650 users height Rriver link jpg width

そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般... 続きを読む

imgタグで画像が読み取れなかったときになにも表示しないようにしたい - Qiita

2019/11/10 46 users Qiita 画像

読み込めない場合に、こんな感じで、なにも表示しないようにしたかったときの備忘録。 やり方はこんな感じ。 <img src="https://example.com/noimage.png" alt onerror="this.onerror = null; this.src='';" /> ポイントは以下の2点 altを空文字で設定 onerrorでsrcを空にして、onerrorをnullにする 1. 「altを空文字で... 続きを読む

PWA時代のimgタグの書き方 | プログラミングメカブログ

2017/07/17 18 users PWA時代 Pwa ServiceWorker 書き方 本番用

PWA時代とは PWAとは、ProgressiveWebAppsの略で、Webアプリケーションでのユーザ体験を向上させる仕組みです。 Google社が推進している技術で、最近のフロントエンドエンジニア界隈ではなかなかに盛り上がっているようです。 Angular Mobile Toolkit でフロントエンド実装を行えば、 本番用にビルドするだけでServiceWorkerが作られ、PWA対応が完了... 続きを読む

Microsoft Edge、レスポンシブイメージ対応の「srcset」に対応。夏以降は主要ブラウザすべてでsrcsetサポート － Publickey

2015/06/11 45 users Publickey srcset Opera Firefox

マイクロソフトはWindows 10に搭載予定の新ブラウザ「Microsoft Edge」で、imgタグの中で表示デバイスの解像度によって表示すべきイメージを複数指定できる「srcset」に対応することを明らかにしました。 srcsetはすでにChromeでは約1年前のChrome 34から、Firefoxは先月リリースされたFirefox 38から、Operaも先々月リリースのOpera 29か... 続きを読む

[WordPress]記事内に画像を挿入するときのHTMLをカスタマイズする  |  Wood-Roots.blog

2014/07/26 20 users Wood-Roots.blog フィルターフック HTML

ダッシュボードの「メディアを追加」から画像を選び、「投稿に挿入」をクリックするとimgタグが記事に挿入されます。 この挿入されるHTMLをもうちょっと自分好みにできればいいなと思い、編集する方法について調べてみました。 PHPコードをfunctions.phpに記述します。 画像を挿入する際に適用されるフィルターフックについて imgタグに対して適用されるフィルターフックとリンクを設置した際のaタ... 続きを読む

Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に － Publickey

2014/03/04 117 users レイアウト デバイス 課題 Webデザイナー ディスプレイ

スマートフォンのような小さな画面からデスクトップPCのディスプレイまで、Webに対応するデバイスの画面の大きさや精細度の多様性は高まってきています。 多くのWebデザイナーは、こうした多様な画面に合わせてレイアウトなどを変えることで見やすくするよう努力してきましたが、こうしたダイナミックなレイアウトを実現する上で大きな課題だったのが画像の扱いです。画面の大きさや精細度に合わせて適切な画像を表示させ... 続きを読む

【 ブログ 】imgタグに「 border="0" 」が入っていると減点対象になるを知っていますか？MarsEditを使っているブロガーは要注意です。 | Halfway

2013/03/30 55 users border MarsEdit Halfway 減点 ボーダー

僕はMacでブログを書くときはいつもMarsEditというブログエディタを使っています。 画像をアップロードしたときにimgタグ内にborder="0"というものが入力されていて、これはなにを指定しているものなのか調べてみました。するとこれはW3CのHTML文書では減点の対象になっているようなんです。 スタイルシート imgタグにboeder=”0″を使わずスタイルシートでボーダー0にする | テ... 続きを読む

imgタグを記述するだけでダミーの画像を表示してくれるサービス「lorempixel」が便利 | OZPAの表4

2013/01/29 141 users OZPA ダミー ダミー画像 手間 WEBマーケティング

Web制作をしていると、ダミー画像を用意しなければならない！なんて時が頻繁にあってわりかし手間なのですが、こういうサービスあったんですね…知らなかった。 と言うわけで、WEBマーケティング ブログさんで紹介されていた、imgタグ内でサイズ・ジャンルなどを指定すれば自動的にダミー画像を作成してくれるサービス、lorempixelがとっても便利でしたのでご紹介。 lorempixelの使い方 まずはl... 続きを読む

画像をCSSに埋め込みたいときに役立つ、画像をBase64に変換できるサービスまとめ4つ - W3Q

2012/12/04 36 users CSS Base64 Scheme W3Q 画像

data URI scheme 変換ツール 画像をBase64形式に変換してimgタグを出力してくれるツール。 画像をBase64に変換するツール (data URI scheme) - シングスブログ http://blog.thingslabo.com/archives/000058.html Google のウェブ検索結果でウェブページのスクリーンショットに使われている data URI s... 続きを読む

指定したジャンル・画像サイズに合った写真が手に入るサービス「Instasrc」*二十歳街道まっしぐら

2012/10/08 65 users normal ＡＲＴ 二十歳街道まっしぐら http ジャンル

Instasrc 指定した条件に合った写真が手に入る Instasrcは指定した条件に合った写真が手に入るサービスです。 ジャンルと画像サイズを指定すると、それに合った画像を自動的に抽出してくれます。 なかなか便利。 http://instasrc.com/art/200x200/normal こういったURLになり、そのままimgタグで埋め込んで使ってよいみたいです。 以下に使ってみた様子を載せ... 続きを読む

印刷にも対応！imgタグでCSSスプライトを使う方法 | デザイナーブログ | 株式会社LIG

2012/08/31 39 users CSSスプライト こん 株式会社LIG デザイナー 印刷

こんにちゃー、「デザイナーの王」です(●´⌓`●) 今回はimgタグでCSSスプライトを使う方法について説明します。 そもそもCSSスプライトって何ぞや？っていう方は、こちらの記事（CSSスプライトで画像を円滑に表示させる）で詳しく紹介してありますので、ご参考を どうしてわざわざimgでCSSスプライト？ 一番の理由はやはり、imgタグなら印刷された時に反映されるというところ。 対比画像（フォーム... 続きを読む

ウェブサイトのRetina化 | drops - onotakehiko.com

2012/06/01 77 users width IMG SRC 次期MacBook Pro 端末

iPhone 4からはじまり新しいiPadことiPad 3rd、そしてもはや確定的とも思われる次期MacBook ProのRetina化。現状でウェブサイトをRetina化する効率的な方法を考えると、 “Retina Images” を使うのが最適解な気がしている。 Retina画像を対応端末に表示させる場合、 imgタグによる設置 <img src="foo@2x.png" width="100... 続きを読む

[JS]デスクトップはそのまま、新しいiPad, iPhone4には高解像度の画像を配置するスクリプト -jQuery Retina | コリス

2012/04/04 114 users コリス jQuery Retinaディスプレイ スクリプト

Retinaディスプレイを採用している新しいiPad, iPhone4用にimg要素で配置した画像を高解像度のものに変更するjQueryのプラグインを紹介します。 jQuery Retinaのデモ jQuery Retinaの使い方 jQuery Retinaのデモ jQuery Retinaを使って画像を配置する方法は大きく分けて、3つあります。 imgタグに「data-retina」属性を加え... 続きを読む

iPhoneサイト（スマートフォンサイト）制作時の画像の表示方法と使用方法についてまとめました | HTML5でサイトをつくろう

2012/03/15 257 users iPhoneサイト HTML5 iPhone 制作時 画像

PCサイトでの画像の表示方法は、スライスした画像をimgタグにサイズ指定をしたり、背景画像に繰り返しや位置の指定をして表示するのが一般的ですが、スマートフォンサイトではデザインやコンテンツの内容によって画像の表示方法を工夫する必要があります。 特にiPhoneのように横画面にすると可変して表示されるデバイスの場合は、画像も可変して見せたほうが効果的な場合もあります。 また、iPhone4、4Sや高... 続きを読む

HTML5演出に最適な画像読み込み管理のJSライブラリ「LoadManager.js」 | ClockMaker Blog

2012/02/14 550 users JSライブラリ ローディング 前者 見栄え 後者

HTMLで画像を読み込むとき、HTMLのimgタグだけだと不恰好となりがちですが、読み込みを管理すれば見栄えも整いますというデモとJSライブラリを作ってみました。次の2つのデモを見比べて何が違うのか確認ください。 デモ (通常のimgタグ) デモ (LoadManager.jsを使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示さ... 続きを読む

tinyurlをアップローダーとして使う - hitode909のダイアリー

2011/12/12 13 users tinyurl src アップローダー ダイアリー テキスト

tinyurlにdataスキームURIを登録してアップローダーとして使える． % tinyurl_uploader IMG_1242.jpg http://tinyurl.com/6nbfqcj 写真をアップロードしてブラウザで開くと，最初ロードに失敗して，リロードすると表示される．imgタグのsrcには指定できなかった．テキストをアップロードすると，ブラウザを開くとダウンロードが始まったりする．... 続きを読む

複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」:phpspot開発日誌

2011/09/12 57 users 奥行き phpspot開発日誌 アニメ 複数画像 マウス位置

jQuery.Smart3D Info for Coders 複数画像を並べるだけでアニメのように奥行きを表現できる「jQuery.Smart3D」 マウス位置に応じて画像をずらせて奥行きを表現できます。 実装方法が簡単で、ul以下にliとimgタグを並べて初期化するだけというものです。マークアップ的にあんまりよろしくないのかもしれませんが、こうしたUIが必要なときに手軽に実装できます。 単なる画... 続きを読む

ma la - Google+ - mixi足あと今でも検証可能な部分のキャプチャを取った。 …

2011/08/14 30 users キャプチャ リファラ 検証 Google+ 部分

mixi足あと今でも検証可能な部分のキャプチャを取った。 imgタグで読み込まれた場合でも自分の訪問履歴に記録されているのがわかる。つまり、mixiのログインCookieさえ送っていれば実際にはmixiを訪問していなくても、足あとをつけることができた。例えばアダルトサイトが訪問者のmixiアカウントを収集したりすることができた。mixiは不審なアクセスパターンやリファラがあれば弾く、といったような... 続きを読む

WordPressで挿入する画像のsrcを相対リンクにする | Simple Colors

2011/04/13 61 users src wp-content MySQL WordPress

WordPressで記事の中に画像を挿入するとき、通常ではhttp://www.example.com/wp-content/uploads/～ などといったように、ドメインを含んだアドレスがimgタグのsrcとして埋め込まれてしまいます。 例えば、ローカル環境や構築環境で作ったサイトを、本番用のドメインで公開する場合、このドメイン部分をいちいち置換しなくてはなりません。 MySQLが分かる方であ... 続きを読む

URLをアンカーリンクとIMGタグに置換 « python練習帳

2011/03/09 10 users 置換 ttp python練習帳 プロトコル アンカーリンク

テキスト内のURLを、アンカーリンクとIMGタグに置換するサービスをリリースしました。なお、ttpで始まるプロトコルは、httpに自動修正します。ソースコード1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4... 続きを読む

テキストからUML図を生成してくれる『yUML』が良く出来ている - IDEA*IDEA ～ 百式管理人のライフハックブログ ～

2009/05/06 353 users SimpleAPI IDEA UML図 文法 生成

システム開発でUML図をよく書く人には便利そうなツールのご紹介。yUMLを使えばテキストからUML図をさくっと生成することができます。 フォームから入力して図を生成、自在に貼り付けることもできますが、秀逸なのはSimpleAPIちっくにimgタグに直接記述できる点。良く出来ていますね。 ↑ フォームから生成するのも簡単。 ↑ 文法はこんな感じ。 ↑ 秀逸なのはこのようにimgタグに直接記述できる点... 続きを読む

mixi足あとちょうを、さらにバレにくくする :: ぼくはまちちゃん！

2006/02/05 111 users はまち 足あと ボク 二の足 ハレ

はまちや２さんの日記 mixi足あとちょうを、さらにバレにくくする2006/02/05 [15:53] (参考) mixi足あとちょう なんだか最近↑みたいに、自分のサイトのimgタグにmixiを指定して こっそり足あとを取るのが流行ってるらしい、って聞いたんですが！！ 「わーぼくのサイトにもimgタグにmixi仕込んでみたいな～」 「けどバレちゃったら感じ悪いし…＞＜」 なんて感じで二の足を踏ん... 続きを読む