画像の遅延読み込みにloading属性とJavaScriptを併用した最大限のパフォーマンスを発揮させる実装方法 | コリス

2020/09/10 251 users コリス アプローチ loading属性 翻訳記事 下記

画像やiframeの遅延読み込みに使用するloading属性と非サポートブラウザ用にJavaScriptを併用した現代的なアプローチで、最大限のパフォーマンスを発揮させる実装方法を紹介します。 Best way to lazy load images for maximum performance by Adrian Bece 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事... 続きを読む

Googleの新技術<portal>タグを試してみた - aoma blog

2019/05/21 76 users Portal Portals ナビゲーショ Google 制約

Portalsとは japan.zdnet.com とのことで、iframeタグとよく似たportalタグができるらしい。 portalタグと<iframe>タグの違いは何かと言えば、Googleの新たなPortalsテクノロジーが<iframe>タグの制約を取り去ったものだというところにある。 Portalsを使用することでユーザーは、埋め込んだコンテンツへのナビゲーショ... 続きを読む

グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム - ZDNet Japan

2019/05/20 326 users Portals Portal ローディング 新風 ウェブページ

Googleは米国時間5月7日、年次開発者会議「Google I/O 2019」で、ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジーを発表した。 GoogleによるとPortalsは<portal>という新たなHTMLタグを使って動作するという。このタグの動作は、従来からある<iframe>タグとよく似... 続きを読む

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

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

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

GoogleがiFrameに代わる遷移タグPortalsをデモ、サイト間の連携を大幅強化へ | TechCrunch Japan

2019/05/08 58 users Portals Portal デモ ナビゲーション 連携

米国時間5月7日、GoogleはPortalsと呼ばれるChromeウェブブラウザ用の新しいページ遷移タグを発表した。このテクノロジーはGoogleがしばらく前から開発を続けてきたもので、機能自体はiFrameとほぼ同様だ。 Googleは「Portalはナビゲーション可能なiFrame」と説明している。従来のiFrameではページ内に別サイトのビュー... 続きを読む

俺の必殺技 ボイスバージョン喜び度100%マシマシ - ねうしとらうたつみうまひつじさるとり押井守い - Radiotalk(ラジオトーク)

2018/11/06 68 users Radiotalk scrolling Embed 必殺技

俺の必殺技 ボイスバージョン喜び度100%マシマシ ねうしとらうたつみうまひつじさるとり押井守い <iframe width="460" height="185" src="https://radiotalk.jp/embed/82363" frameborder="0" scrolling="no" allowfullscreen style="max-width: 100%;"></iframe> 続きを読む

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

2018/09/03 315 users コリス LazyLoad img Chrome パフォーマンス

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

iframeのコンテンツに合わせてJavaScriptで自動的に高さを調整する方法 – Rriver

2017/11/19 63 users メディアクエリ Rriver ウインドウ幅 作業 ページ

レスポンシブなコンテンツをiframeでページに埋め込んでスクロールさせないように表示するとウィンドウ幅によってコンテンツの高さが変わるので、親フレームで高さを調整しないとコンテンツが隠れてしまう場合があります。iframeを埋め込んでいる親フレームにメディアクエリを書けば調整できますが、かなり非効率的な作業です。 先日、JavaScriptを使った方法を見つけたのでこのブログでもシェアします。ち... 続きを読む

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック | コリス

2017/05/19 162 users YouTube コリス padding CSS div

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。 この問題を解決するには、動画を配置するiframeをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。 動画をレスポンシブ対応で実装する現在主流となっているテ... 続きを読む

iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」:phpspot開発日誌

2015/09/09 64 users phpspot開発日誌 自動リサイズ コンテンツ サイズ

iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 2015年09月09日- Iframe-resizer by davidjbradshaw　デモ iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」。 iframeってお手軽に使えるんですが、iframe内外のJSが連携するのは別ページであるの... 続きを読む

iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」:phpspot開発日誌

2015/05/26 59 users phpspot開発日誌 中身 コンテンツ

iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 2015年05月26日- FaiblUG/setIframeHeight GitHub iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 iframe外からはコンテンツの高さって取れなかったりしたと思うので、いざ同じことを実装しようとすると面倒ですが、こちら... 続きを読む

フリー素材を配布しているサイトを一覧でまとめたサイト「AllTheFreeStock」 ｜ ライフハッカー［日本版］

2014/11/09 118 users カメきち 商用 ライフハッカー 以下 フリー素材

カメきち  - Webサービス,デザイン  08:00 AM フリー素材を配布しているサイトを一覧でまとめたサイト「AllTheFreeStock」 「AllTheFreeStock」はフリー素材を配布しているサイトを一覧でまとめたサイトです。商用フリーな素材などを配布しているサイトを一覧でまとめ、iframeでそのサイトをその場で表示してくれます。フリー素材を探す際に重宝するかと思います。 以下... 続きを読む

外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法 : アシアルブログ

2014/09/19 95 users ウインドウサイズ 鴨田 レスポンシブレイアウト 拡大縮小 拡大

こんにちは、鴨田です。 タイトルが長くなってしまってすみません。 皆さんの中で、自分のサイトコンテンツの中で、 iframeを使って外部サイト(自分で更新できない)を表示したいときに、 iframe内のコンテンツを拡大縮小出来なくて困ったことがあったり、 サイトコンテンツをレスポンシブレイアウトではなく、 固定幅のまま、あらゆるブラウザで、 ウィンドウサイズに合わせてピッタリに拡大縮小したい、 と... 続きを読む

子ページから親ページ（別ドメイン）の iFrame の大きさを操作する | バシャログ。

2014/07/10 58 users スクロールバー Tips バシャログ 想定 台風

近いうちに大型の台風が来ると聞いてソワソワしている kimoto です。ここ数年で最強とか言われると身構えちゃいますよね…。 さて、今回は tips です。 別ドメインのページを iFrame 内に表示した際に、想定よりページの縦幅が大きくて、iFrame にスクロールバーが出てしまう…。 最初の表示時に大きさ合わせたけど、iFrame 内でページ遷移すると中のページの大きさが変わっちゃうので下に... 続きを読む

たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス

2014/03/25 676 users コリス SVG 一行 レスポンシブ対応 要素

画像やテーブル、地図などを配置するiframe, video, canvas, svgなど、主にボックス系のHTML要素をシンプルなコードでレスポンシブ対応にするスタイルシートを紹介します。 外部ファイルとして使用するのでそれでも一行ですが、中身も一行（115文字）の超軽量スタイルシートです。 Fluidity Fluidity -GitHub Fluidityのデモ Fluidityの使い方 F... 続きを読む

ある国内大手出版社、悪質なiframe仕込まれる、閲覧者が「Gongda」の餌食に -INTERNET Watch

2014/01/15 349 users 餌食 マルウェア INTERNET Watch 脆弱性 出版社

ニュース ある国内大手出版社、悪質なiframe仕込まれる、閲覧者が「Gongda」の餌食に （2014/1/15 20:11） 株式会社シマンテックは15日、日本のある出版社のウェブサイトに悪質なiframeが注入されていたことを確認したと発表した。悪用ツールキット「Gongda」がホスティングされている別サイトへ誘導するもので、閲覧者のPCに存在する脆弱性を突いて、情報を窃取するマルウェアを送... 続きを読む

気団まとめ-噫無情- : 興信所から嫁が男女混合の複数人でホテルに入っていく写真を撮ってきたｗｗｗ

2013/09/22 187 users 気団まとめ-噫無情 男女混合 興信所 ｗｗｗ 既婚男性板

気団まとめ-噫無情- 既婚男性板の家庭に関する話をまとめています。 HOME ABOUT RSS Twitter しぃアンテナ(*ﾟーﾟ) 2GET にゅーれす だめぽアンテナ キチママまとめアンテナ 気団談 スポンサーリンク お使いのブラウザは非対応です（この部分はiframeを使用しています） スポンサーリンク お使いのブラウザは非対応です（この部分はiframeを使用しています） < 嫁に寝... 続きを読む

気団まとめ-噫無情- : 喋ることができない女と結婚を前提に付き合うことになった。

2013/07/23 120 users 気団まとめ-噫無情 前提 既婚男性板 スポンサーリンク 結婚

気団まとめ-噫無情- 既婚男性板の家庭に関する話をまとめています。 HOME ABOUT RSS Twitter しぃアンテナ(*ﾟーﾟ) 2GET にゅーれす だめぽアンテナ キチママまとめアンテナ キチママまとめ保管庫 スポンサーリンク お使いのブラウザは非対応です（この部分はiframeを使用しています） スポンサーリンク お使いのブラウザは非対応です（この部分はiframeを使用しています... 続きを読む

Re: WordPressで更新・お知らせ履歴を別ページで作る方法 | memo.dogmap.jp

2013/07/09 77 users memo.dogmap.jp WordPress 別ページ

WordPressで、更新履歴やお知らせ履歴をリスト表示したシンプルな別ページを作って、トップページやサイドバーからiFrameやphpのinclude等で呼び出したいケースがあります。 方法は色々ありそうです。私がクライアントさんのサイトで行った方法を紹介します。少々強引です。 私が実施した方法は、固定ページ内に更新履歴やお知らせ履歴のループをPHPで書いてしまう方法です。Exec-PHPプラグ... 続きを読む

Wordpressで更新・お知らせ履歴を別ページで作る方法

2013/07/09 83 users INCLUDE PHP ループ 別ページ WordPress

WordPressで、更新履歴やお知らせ履歴をリスト表示したシンプルな別ページを作って、トップページやサイドバーからiFrameやphpのinclude等で呼び出したいケースがあります。 方法は色々ありそうです。私がクライアントさんのサイトで行った方法を紹介します。少々強引です。 ●固定ページを利用する 私が実施した方法は、固定ページ内に更新履歴やお知らせ履歴のループをPHPで書いてしまう方法です... 続きを読む

橋本商会 » 別ドメインのiframeの中身をフレーム外からスクロール

2013/04/06 69 users スクロール 橋本商会 CSS 中身 別ドメイン

別ドメインのiframeの中身をフレーム外からスクロール 諸事情あって、iframeの中身をフレーム外側のページからJavaScriptでスクロールできるのを作った。 ふつうは別ドメインのページをiframeに読み込むとスクロールできないんだけど、iframeごと上下左右に動かしたり、iframeの外側にbox要素2つ付けてはみだした部分を表示しないようにcssでなんか色々やったりしたらそれらしい... 続きを読む

すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。 | 和洋風KAI

2013/02/26 559 users CSS 和洋風KAI YouTube ifr ドメイン別

すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。 Tweet 覚えておくとかなり便利すぎるスタイルシートの書き方をご紹介。 特にiframeタグやaタグなどで使える書き方です。 ドメイン別にスタイルシートを当てる方法。 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときこう書くと上手く動作します。 ifr... 続きを読む

開発者を悩ませるiframe内表示Webアプリ問題とは？｜【Tech総研】

2013/02/07 91 users Ｔｅｃｈ総研 ミクシィ 鈴木理恵子 前回 ブラウザ

フレーム内に小さなブラウザのようにWebページを表示してくれる「iframe」。特別な技術は必要ないのに、さまざまな問題に直面してしまうことが多く、開発者を悩ませます。今回はこの問題について解説します。 こんにちは、ミクシィの鈴木理恵子です。前回は身近なWebの世界でよく使われているiframeを、利用シーン別に分類してご紹介しました。ソーシャルアプリ型、ソーシャルプラグイン型、ブログパーツ型、ポ... 続きを読む

「秒速で1億PV稼ぐ条件」をエンジニアに聞いてみた | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2013/01/24 510 users KAYAC DESIGNER 秒速 オートリロード サツキ

平日は割りと仕事しているんですが、 さっきふとこんな技術相談を、エンジニアに投げてみました。 お題を投げてみた barimi ねえねえ、技術相談なんだけど、秒速で1億PV稼ぐサイト作るなら、技術的にどうする？ 私ならオートリロードとiframeだと思うんだけど。 taiyoh iframeで自分を開くようにするだけで、１回表示しただけで待ってれば相当数のPV数稼げそう。。。 （ブラウザがクラッシュ... 続きを読む

HTML内にPDFを埋め込めるJSプラグイン集:phpspot開発日誌

2012/09/13 75 users phpspot開発日誌 PDF HTML内 HTML 表示

7 Best jQuery & JavaScript PDF Viewer plugin with examples HTML内にPDFを埋め込めるJSプラグイン集。 通常PDFというとPDFページにリンクして直接開くというものが多いですが、こうしたプラグインを使うことで、HTMLの中にIFrameのようにPDFを埋めこんで表示が可能です。 ブラウザプラグインを使うものや、GoogleDocを使う... 続きを読む