タグ img
人気順 10 users 50 users 100 users 500 users 1000 usersTailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
2024/03/18
7 users
CSS
Tailwind CSS
HTML
コンポーネント化
Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <d... 続きを読む
https://www.jleague.jp/img/pdf/2023_26796_j1.pdf
2023/12/19
5 users
PDF
www.jleague.jp
https
これは朗報！ レスポンシブ対応の遅延画像が「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を無効にしたWordPress 5.9がリリース | 海外SEO情報ブログ
2022/01/27
6 users
ネイティブLazy-load
ifr
iframe
中級
最初
[レベル: 中級] WordPress 5.9 がリリースされました。 このバージョンでは、ページで最初の画像および iframe のネイティブ Lazy-load が無効になっています。 ページ表示速度の向上がサイトによっては期待できます。 WP のネイティブ Lazy-load サポート ネイティブ Lazy-load は、画像の <img> 要素と iframe の <ifr... 続きを読む
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... 続きを読む
The Humble <img> Element And Core Web Vitals — Smashing Magazine
2021/04/30
5 users
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 (... 続きを読む
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 ・新型コロナウイルス感染症の影響が大きく、マスク・アルコール消毒液等の感染対策商品の需要... 続きを読む
GitHub - dog-qiuqiu/MobileNetv2-YOLOV3: MobileNetV2-YoloV3-Nano: 0.5BFlops 3MB HUAWEI P40: 6ms/img, YoloFace-500k:0.1Bflops500KB
Dismiss Join GitHub today GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together. Sign up 続きを読む
画像による Layout Shift が無くなる Web がやって来る - mizdra's blog
2020/05/31
306 users
mizdra's blog
web
fetch
画像
古来
はじめに Web では古来より <img> タグを用いて画像を読み込んでいました. しかし <img> タグにはアスペクト比に関する情報を埋め込むための属性が用意されていません. そのため, ブラウザが画像をネットワークから fetch して読み込みが完了するまで, レスポンシブな img 要素の寸法を決定できず, ページにガタツキ (La... 続きを読む
https://www.shizecon.net/award/img/datail/44/44_jhs_7.jpg
2019/08/18
9 users
AWARD
jpg
https
国際労連の労働組合権侵害世界地図: hamachanブログ(EU労働法政策雑記帳)
2019/08/06
7 users
hamachanブログ
EU労働法政策雑記帳
PDF
シリア
国際労連（ITUC)のホームページに、世界の国を労働組合権の侵害度合で色分けした世界地図が載っています。 https://www.ituc-csi.org/IMG/pdf/2019-06-ituc-global-rights-index-2019-report-en-2.pdf それぞれの色が何を示しているかというと、 いちばん赤いランク５＋は「無法状態のため権利の保証なし」で、シリアと... 続きを読む
離婚後共同親権は、なぜダメなのか | 親子の課題を解決する社会起業家│駒崎弘樹公式サイト
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 続きを読む
道重さゆみ主演『SAYUMINGLANDOLL～東京～』、内藤ルネとの念願のコラボ、ルネガール道重さゆみのビジュアル初公開！｜℃-ute派なんday
2018/09/17
9 users
SAYUMINGLANDOLL
Tokyo
Tweet
念願
2018年09月17日09:34 道重さゆみ主演『SAYUMINGLANDOLL～東京～』、内藤ルネとの念願のコラボ、ルネガール道重さゆみのビジュアル初公開！ カテゴリ道重さゆみ Comment(4) Tweet 1: 2018/09/15(土) 11:57:14.79 0 「SAYUMINGLANDOLL～東京～」サイト http://sayuminglandoll.com/ http://sayuminglandoll.com/img/tokyo/... 続きを読む
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(日... 続きを読む