これは朗報！ レスポンシブ対応の遅延画像が「sizes=auto」を使用すると簡単に実装できるようになります

2023/12/05 160 users srcset sizes CSS 遅延 auto

朗報です！ 来年の2024年に、ブラウザはCSSから画像の実際の幅を取得し、それを画像のサイズとして使用することができるようになります。 srcsetで遅延読み込みされた画像の場合、ブラウザはsrcsetからソースURLを選択するために画像のレイアウト幅を使用できるようになります。 Add sizes=auto to lazy-loaded <img> こ... 続きを読む

CSSの記述はこれで大きく変わる！ セレクタの適用範囲を設定できる、CSS @scopeの基礎知識と使い方を解説

2023/11/09 73 users セレクタ Scope Card content CSS

CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。 Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基... 続きを読む

CSSの新機能@scopeが便利すぎる！ セレクタの適用範囲を設定できる、@scopeの基礎知識と使い方

2023/08/30 24 users セレクタ Scope CSS Chrome HTML

CSSでこの機能を待ち望んでいた人もいると思います。 セレクタの適用範囲を設定できる@scopeがいよいよChromeでサポートされます。@scopeの基礎知識と使い方を紹介します。 たとえば、下記のHTMLにはimgが2つあります。@scopeを使用すると、1つ目の.media-object直下のimgにのみスタイルを適用できます。.content内のimg... 続きを読む

Lazy-loadはLCPを悪化させる!? WordPressは2つ目の画像からネイティブLazy-loadを実装するように改良予定 | 海外SEO情報ブログ

2021/08/23 10 users LCP ネイティブLazy-load バイタル 上級 遅延読み

[レベル: 上級] ファーストビューに掲載されている画像を Lazy-load（遅延読み込み）すると コア ウェブ バイタル の 1 指標である LCP を低下させる恐れがあります。 そのため WordPress は、ファーストビューの画像にネイティブ Lazy-load を適用しないように改善する予定です。 ネイティブ Lazy-load は、画像の <img... 続きを読む

img の srcset 指定時に選択される画像 | blog.jxck.io

2020/08/15 22 users srcset INTRO picture jxck.io 挙動

Intro <img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。 この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。 その記録を記す。なお、先に言うがどのブラ... 続きを読む

コーナン商事、コロナだけでなくレジ袋有料化までも追い風に : 市況かぶ全力２階建

2020/07/13 28 users コロナ 追い風 コーナン商事 corporate Inter

山田@u2yamadaコーナンとんでもねえな。しかし特需だよな 2020/07/13 15:07:27 2020/07/10 15:00 コーナン商事 決算説明会資料第44期第1四半期 https://www.hc-kohnan.com/img/common/corporate/inter/20200713/inter02.pdf ・新型コロナウイルス感染症の影響が大きく、マスク・アルコール消毒液等の感染対策商品の需要... 続きを読む

画像による Layout Shift が無くなる Web がやって来る - mizdra's blog

2020/05/31 306 users mizdra's blog web fetch 画像 古来

はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む

離婚後共同親権は、なぜダメなのか | 親子の課題を解決する社会起業家│駒崎弘樹公式サイト

2019/07/19 20 users 駒崎弘樹公式サイト 離婚後共同親権 親子 課題 社会起業家

日本維新の会が、離婚後共同親権を参議院議員選挙の公約に掲げています。 （ https://o-ishin.jp/sangiin2019/common/img/manifest2019_detail.pdf ） 実はこれは、子育て支援関係者・DV被害者支援関係者を、悪い意味で戦慄させています。 本件について、10年以上ひとり親支援に携わった身として、解説を行いたいと思い... 続きを読む

画像最適化戦略 Lazy Loading 編 | blog.jxck.io

2019/05/20 97 users Lazy loading jxck.io INTRO PNG

created_at: 2019-05-20 updated_at: 2019-05-20 tags: [lazyload,image,performance] Intro 長らく議論されてきた <img> や <iframe> における Lazyload について、仕様と実装が動きを見せている。 ここでは、特に画像 <img> に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解説する。 画像最適化戦略 PNG/JP... 続きを読む

noscript内のコンテンツをGoogleは無視するが画像は例外的にインデックスする | 海外SEO情報ブログ

2019/01/30 15 users NoScript Google コンテンツ 画像 中級

[レベル: 中級] <noscript> タグ内のコンテンツを Google はインデックスしません。 しかし画像は例外です。 <noscript> の中であっても <img> タグの要素はインデックス対象になります。 スパム対策のため <noscript> は無視される<noscript> タグは、スパムに利用されてきた経緯があります。 （JavaScript を実行する... 続きを読む

グリッドマンの公式サイトのストーリー紹介でURL弄ったら結城友奈は勇者であるのストーリー紹介が出てくるバグを発見したんだが

2018/10/15 91 users グリッドマン 結城友奈 パク 勇者 予告

1話と2話も公式サイトの予告は5枚までだったけど試しにURLを6に変えたらゆゆゆの画像が出てきた 全く関係ないはずなのになんでこんなことになるのか謎 https://gridman.net/story/img/01/01_06.jpg https://gridman.net/story/img/02/02_06.jpg 続きを読む

Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に | コリス

2018/09/03 315 users コリス LazyLoad iframe Chrome ロード

「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。 LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。... 続きを読む

米政府、民間刑務所を廃止　何が失敗だったのか

2017/09/21 72 users 民間刑務所 廃止 米政府 Photos 失敗

2016年08月19日 23:00 米政府、民間刑務所を廃止　何が失敗だったのか カテゴリ 海外事情 Comment(0) 民営刑務所に入ると「家賃」を取られるが、刑務所内の労働では絶対に払えず借金が増え続けるシステム。 引用：http://media-cdn.timesfreepress.com/img/photos/2015/08/17/1439862646_06xx15x00_Silverd... 続きを読む

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld

2016/05/14 132 users NxWorld ウインドウサイズ auto 横幅 height

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画... 続きを読む

【祝BD発売】『心が叫びたがってるんだ。』の興収11億円はどれほど凄いのか？ ｜ ガジェット通信

2016/03/29 93 users ガジェット通信 toukei PDF 興行収入 ブルーレイ

昨年9月に公開され高評価を得た『心が叫びたがってるんだ。』のブルーレイ/DVDが発売となった。 本作は興行収入が11億円に達するなど、アニメ映画史に歴史を刻んでいる。 参考URL：http://www.eiren.org/toukei/img/eiren_kosyu/data_2015.pdf この興収11億円がどれほど偉大な出来事なのか解説していきたい。 オリジナルのアニメにとって興収10億円は... 続きを読む

「予告上映取り下げについて」のブクマコメが類型的なのでまとめて答える - ゾンビ、カンフー、ロックンロール　～Disc 2～

2015/11/24 76 users カンフー ロックンロール ゾーニング ブクマコメ インフェルノ

2015-11-24 「予告上映取り下げについて」のブクマコメが類型的なのでまとめて答える ・「ゾーニング」って言ってる人 日本における映画宣伝のための予告篇は、全てレイティングカテゴリ「Ｇ」になる。 http://www.eirin.jp/img/promo.pdf 当然『グリーン・インフェルノ』予告もキチンと映倫を通しているものならば、全年齢が見ても良いと映倫が判断したものになる。コンテンツに... 続きを読む

【画像あり】昨日の岡崎のゴールが何度見ても笑えるｗｗｗｗｗｗｗｗｗｗｗｗｗｗ : 暇人＼(^o^)／速報 - ライブドアブログ

2015/11/22 29 users ｗｗｗｗｗｗｗｗｗｗｗｗｗｗ ライブドアブログ 岡崎 ゴール

【画像あり】昨日の岡崎のゴールが何度見ても笑えるｗｗｗｗｗｗｗｗｗｗｗｗｗｗ Tweet 1：風吹けば名無し＠＼(^o^)／：2015/11/22(日) 01:41:43.22 ID:Jr6dUcGx0.net ださい http://livedoor.4.blogimg.jp/himasoku123/_f/img/S91Qklz.gif 2：風吹けば名無し＠＼(^o^)／：2015/11/22(日... 続きを読む

豊崎愛生に似ているAV女優を教えてください！ 頑張って似た人を… - 人力検索はてな

2015/08/16 95 users 人力検索 豊崎愛生 AV女優 http 画像

豊崎愛生に似ているAV女優を教えてください！ 頑張って似た人を見つけるまではしたのですが。。。。。（右の画像：http://blog-imgs-52.fc2.com/a/d/u/adulterofree/toyosaki1.jpg） あと2枚良いのがあります。 http://aikoragazou.com/img/toyosakiaki/toyosakiaki20150701202041.jpg ... 続きを読む

【悲報】ベルたそ、またやらかす : 暇人＼(^o^)／速報 - ライブドアブログ

2015/07/23 22 users ライブドアブログ Tweet ベルたそ 悲報 http

【悲報】ベルたそ、またやらかす Tweet 1：風吹けば名無し＠＼(^o^)／：2015/07/23(木) 11:59:07.12 ID:ToYPdQG60.net http://livedoor.4.blogimg.jp/himasoku123/_f/img/20150722210215_1_1.gif うーんこあくま感 2：風吹けば名無し＠＼(^o^)／：2015/07/23(木) 11:59... 続きを読む

ASCII.jp：メルマガ開封率をMeasurement Protocolで調べる｜自分でできる！ユニバーサルアナリティクス活用ガイド

2015/07/13 68 users ユニバーサルアナリティクス ASCII.jp 開封率 タグ

小さな企業やサイトで役立つユニバーサルアナリティクスの便利な使い方を紹介する本連載。今回はユニバーサルアナリティクスに追加された「Measurement Protocol」でHTMLメールの開封率を調べる方法を解説します。 応用自在のMeasurement Protocol Measurement Protocolは、Googleアナリティクスに直接データを送信する仕組みのことです。<img>タグ... 続きを読む

SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」 - かちびと.net

2015/01/09 36 users SVG CSS JSライブラリ SVGファイル class

deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように自動で置換し、CSSでスタイリング可能にしてくれます。現在はsvgというclassが指定されていますが、任意のユニークなclass名に変えたい時はコードの最下部にあるdeSVG(“.svg”... 続きを読む

たかじんと嫁さくらのメモの筆跡が一致 - 2chまとめ - secNews

2014/11/19 29 users 筆跡 poverty たかじん 一致 メモ

1：2014/11/15(土) 23:51:34.14 ID:lvT7N9X/0 嫁さくらとたかじんメモの筆跡が一致 http://up3.null-x.cc/poverty/img/poverty237498.jpg [≫] http://hello.2ch.net/test/read.cgi/ms/1415872886/24 これが64歳男末期ガン患者の字に見えますか？ たかじんの死後さくらが... 続きを読む

指定のURL以外からの画像参照は、別の画像に差し替える方法

2014/06/15 156 users 画像参照 URL以外 指定 画像 方法

http://enjiout.com/post-180/ こちらの記事で、「指定のドメイン（=URL）以外から画像を参照して呼び出した場合、指定の画像へ差し替える .htaccess の記述は無いか？」と記載があったので書いてみました。 STEP1 .htaccess の作成 外部のドメインへ参照されると嫌な画像フォルダーを http://pct.unifas.net/img/t/ とすれば、その... 続きを読む

伝わる文章を書くために重要な「200字の法則」 : ライフハッカー［日本版］

2014/06/12 88 users ライフハッカー 法則 文章 200字 lazy

スタディ , 仕事術 , 書評 伝わる文章を書くために重要な「200字の法則」 印南敦史 | ライター 2014.06.13 07:30 <img alt="200字の法則 伝わる文章を書く技術 class="lazy" data-original="http://www.lifehacker.jp/images/2014/06/20140613.jpg" src="/common/img/laz... 続きを読む

【悲報】同人エロゲサークル『私立さくらんぼ小学校』 児ポとしてGoogle八分される

2014/06/07 22 users 悲報 児ポ poverty 途中 アフィサイト

【悲報】同人エロゲサークル『私立さくらんぼ小学校』 児ポとしてGoogle八分される 1 ：番組の途中ですがアフィサイトへの転載は禁止です：2014/06/07(土) 14:35:44.05 ID:S/ZThWW/0 ?2BP(2072) Google http://up3.null-x.cc/poverty/img/poverty173722.png 検索結果8件 公式サイト、販売サイト表示され... 続きを読む