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属性を書かないのが一般... 続きを読む

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

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

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

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

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

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

[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を使用) デモの違いとは 前者は画像がバラバラとインターレース的に読み込まれ、後者は読み込み終わるまでローディングが表示さ... 続きを読む

テキストから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仕込んでみたいな～」 「けどバレちゃったら感じ悪いし…＞＜」 なんて感じで二の足を踏ん... 続きを読む