そうなんです。 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年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
CNET Japan
当サイトは最新ブラウザでの閲覧を推奨します。 Copyright (c) 2025 ASAHI INTERACTIVE, Inc. All rights reserved. No reproduction or republication without written permission. CNET Japanは、Ziff Davisからのライセンスに基づき朝日インタラクティブが運営しています。 CNET Japan is operated by Asahi Interactive under license from Ziff Davis. 個人情報保護方針 利用規約 運営会社 クッキーについて 広告について
Home / Google News / Google SEO / Google: No Need To Add Alt Text To Position Or Placeholder Images Google: No Need To Add Alt Text To Position Or Placeholder Images Barry Schwartz is the CEO of RustyBrick and a technologist, a New York Web service firm specializing in customized online technology that helps companies decrease costs and increase sales. Barry is also the founder of the Search Engin
どうも、ひつじ田メイ子です。 大幅にブログのデザインを変えてみました。 ヘッダーも変更して楽しかったです！ 自分の忘備録を含め、ヘッダー画像がブラウザ上で作れる方法を今回はまとめていきます！ Pixlr Editor（ピクサーエディター）って何？ Pixlr Editor（ピクサーエディター）の良いところ Pixlr Editor（ピクサーエディター）でヘッダーを作ろう！ 作成手順 １．アクセスしたら、新しい画像を作成を押します。 ２．サイズと背景を指定 ３．ガシガシ作っていく もっと簡単なのは、Picky-Pics（ピッキーピックス） できること できないこと 作成手順 1．登録 ２．サイズを選択 ３．作成画面 ４．素材 ５．Picky-Pics（ピッキーピックス）の注意点！ Pixlr Editor（ピクサーエディター）を使って作った新ヘッダー まとめ Pixlr Editor（ピクサ
[レベル: 上級] AMP Projectは、画像を扱う機能を改良しました。 次の2つの改良を公式ブログで紹介しています。 画像カルーセルのサムネイル表示 フォームでの画像選択 どちらも、ECサイトがAMP対応する際に特に役立つ機能です。 画像カルーセルのサムネイル表示 画像ギャラリーとして用いられるカルーセルにサムネイル画像を設置できるようになりました。 こちらは公式記事に掲載されているサンプルのアニメーションです。 4枚の小さなサムネイル画像が、カルーセル形式で表示される大きな画像の下に並んでいます。 タップして選択すれば、その画像を拡大表示できます。 どんな画像が何枚あるかを、今までの画像カルーセルではユーザーが知ることはできませんでした。 サムネイル画像が付いていれば、気になる画像を選んで大きく見ることができます。 画像の数が多い場合は、サムネイル画像もカルーセル式にスライド表示す
追記 この記事を書いた当初はまだIE対応をしなければならないケースが多かったのですが、最近はもうIE対応は考えなくていいかなと思ったので今風の書き方を追記しました。 サムネイルの画像サイズがみんなバラバラ・・・ サムネイルの画像サイズがバラバラだと、どうしても表示に統一感がなくなってしまいますよね。Pinterestのような、サムネイルのバラバラ感を逆に活かしたレイアウトであればいいのですが、使い所が限られてきます。 かといって、複数個ならまだしも何百、何千とある画像をリサイズするのは手動でも自動でも大変…！というわけで、cssで中央部分をトリミングして同じサイズで表示してみましょう！ CSSで画像を中央でクロップして同じサイズで表示する方法 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてくださいね。 方法1：object-fit版 「object-fit」というプロ
DeNAのMERYやWELQ問題の影響か、ここ数日当ブログの著作権に関する記事のPVが急に増えています。 ヘルスケアを扱うDeNAのキュレーションサイトWELQの問題勃発後、同じくDeNAが運営するファッション系キュレーションサイトMERYでも8割以上の記事が削除されました。 （ねとらぼ: DeNAの「WELQ」問題、唯一残った「MERY」も8割超の記事を非公開に） DeNA広報部は、MERYの記事大量削除について「他サイトやブログの文章・画像を転用している可能性のある記事や、公序良俗に反するなど利用規約に違反している可能性のある記事」を削除したと回答しています。 （withnews:DeNA、人気サイト「MERY」の記事も大量削除「無断転用した可能性」） ねとらぼの上記記事によれば、MERYでは他サイトの画像を用いる際、以前は画像直リンクを行っていたとのこと。 他サイトの画像を自サイトで
NEW 2022.04.05無料サイト「Blank Phostock」を追加しました。 2021.08.27無料サイト「写真素材のおすそわけ」と「キュンカッツ」を追加しました。 2019.02.25無料サイト「fotoma」を追加しました。 2018.05.23無料サイト「フリー素材ドットコム」の情報を更新しました。 2018.02.21無料サイト「unDraw」、「motionelements」の2サイトを追加しました。 2017.09.08フリーイラスト素材サイト「ありさちゃんがいく!!」を追加しました。 2017.08.01無料サイト「イラスタ」、「じぃばぁ」の2サイトを追加しました。 2017.04.18無料サイト「ダ鳥獣ギ画」、有料サイト「ForYourImages」の2サイトを追加しました。 2017.03.29無料サイト「イラストお助け部」、「スキマナース」、有料サイト「Sn
object-fit・currentColor・will-change・image-renderingなどマイナーだけど便利過ぎるCSSプロパティの使い方 作成：2016/11/14 更新：2016/11/15 Web制作 > object-fit・currentColor・will-change・image-renderingなど、結構マイナーだけど、実用的なCSSプロパティをピックアップしました。 エンジニア速報は Twitter の@commteで配信しています。 object-fitプロパティはボックスに合わせて、アスペクト比を維持したまま画像サイズを調整できます。 例えば600×300の画像をCSSで400×400で指定したとすると正方形に引き伸ばされます。この時アスペクト比は崩れてしまいます。 しかし、imgにobject-fit: contain;を追加すると、imgに指定し
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
2011年12月01日00:00 by hineri その記事は既に無いんよ。 カテゴリ雑記 今このページを見てるって事は、君は旧ひろぶろの記事を閲覧しようとしてここへ来たんだね。 でもその記事はもう無いんだ。 詳しくはこのブログの「このサイトについて」の所に書いてあるけど、 今“この”サイトを管理している「僕」は初代管理人じゃない。 で、君がどんな記事を見ようとしたのかわからないけど、 その記事は管理人が代替わりする時に消えちゃったってわけ。 正直言って「僕」にもよく分からないんだよ。 どこまでが運命で どこからが選んだ人生なのか まさか「僕」が「ひろぶろ」の管理人になるとはね…。 フフフッ でもまあ、今は「僕」が、面白おかしくもちょっと怖い動画とかをさ、 毎日新しく頑張って更新してるから、是非このブログのＴＯＰへ行って、 最新のオモシロ動画、ネタ動画を閲覧してみてちょ。 だって君は本当
twitter facebook hatena google pocket 画像にマウスオーバーした際にひと工夫したい。 そんな時にはjQuery Glossです。 キラーンとさせますよ、キラーン★ sponsors 使用方法 jQuery Glossからファイル一式をダウンロードします。 <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="gloss.1.0.js" type="text/javascript"></script> <script> $(document).ready(function(){ $.gloss(); }); </script> あとは画像を記述すれば完成です。 <div class="gloss" style="width:画像サイズ幅px;heigh
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum
インスピレーションを刺激するデジタルアート等まとめエントリを色々と集めてみました。 今回も、沢山あって見ていて楽しく、デザインインスピレーションに役立てられます。 ちょっと多いという場合は見たいものだけでもどうぞ。 デジタルアートワーク 23 Inspiring And Colorful Examples Of Digital Art And Manipulations @ SmashingApps ド迫力のデジタルアート集２３ 100 Artworks from the Top 20 Digital Artists in South America - Psdtuts+ ものすごく美しいアートワーク集 26 Super Sleek Car Photo-Manipulations 加工された美しい車の画像集 20 Great Designs using Black & White | Ab
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現
以前作成した、透明度を利用するだけのロールオーバープラグイン、それを少し使いやすいようにバージョンアップいたしました。 今回は少しカスタマイズしやすいようにしたのと、機能をひとつ追加してみました。 ※追記（09/07/24） 若干修正し、2.1にバージョンアップしました。 （今までのでも問題なく動作します。） ダウンロード プラグインはjQueryと下記プラグインを一緒に使ってください。 opacity-rollover2.1.js 透明度を利用したロールオーバー これは以前と同じ通常の使い方。マウスが画像の上にのると、画像の色が薄くなるロールオーバー。 ■使い方 $('#over1').opOver(); 適応させたいセレクタを指定し、opOver()で適応させる。 ■サンプルプレビュー これだけでも十分使えると思われます。画像を複数用意しなくとも、色の濃い画像を用意するだけで画像が変わ
よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。 要は、CSSで画像のWidthとHeightを制御してやるわけですが、 今回はデカイ画像をサムネイル表示させるので、max-widthとmax-heightで制御してやります。 こんな感じ <style type="text/css"> .image-resize { max-width: 200px; max-height: 200px; } </style> <img src="images/test-image.jpg" class="image-resize" />これで、200pxより大きければ、200pxにしてくれる。もちろん比率はそのまま。 しかし、IE6ではmax-widthとmax-heightに対応していないので、だいぶ前に書いたエント
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
