Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX
新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX こんにちは。PayPayモールのエンジニア関と、Yahoo!ニュースのデザイナー萩野です。 皆様、突然ですがPortalsをご存じでしょうか。 Portalsとは、新しいHTML要素です。2019年11月11日〜12日にサンフランシスコで開催された「Chrome Dev Summit 2019」（以下CDS）でも紹介されました。 本記事では、Portalsが可能にする新しいWebでの体験をご紹介します。 Portalsとは？ なにができるの？ Webブラウザー上でユーザーにとって良い体験を提供するためには、表示速度の向上が欠かせません。 Portalsを利用すると、画面遷移の体感速度を向上させることが可能です。 まずはこちらの比較動画をご覧ください。遷移先のコ
HTML5.1、5.2での仕様変更点をメモ。
先日Twitterにこんな投稿をしたら地味に伸びたので、私も含めて案外みんな2014年に勧告された後のHTML5の仕様変更は追ってないのかなと思い、自分のための備忘録も兼ねて主な変更点をメモしておきます。 なお自分はマークアッパーなので、仕様変更点全てを網羅するのではなく、あくまでHTMLマークアップに関連する部分のみピックアップすることとします。全ての変更点を確認したい人はW3Cの仕様書をあたってください。 2016年HTML5.1勧告時の仕様変更 HTML5.1勧告時の注意すべき仕様変更点は以下の通り。 【追加】 ・picture要素とsrcset属性の追加 ・details要素とsummary要素の追加 【削除】 ・ネストされたセクション要素の見出しに全てh1を置くこと ・tfoot要素をtbody要素の前に置くこと 【変更】 ・セクション要素の中のheader/footer要素は入
de:code2018セッションフォローアップ「進化する Web ～ Progressive Web Apps の実装と応用 ～」 | Microsoft Docs
de:code2018セッションフォローアップ「進化する Web ～ Progressive Web Apps の実装と応用 ～」 07/03/2018 7 minutes to read ひさびさにブログを書く時間が取れたので、今ごろですが de:code 2018 で私が担当した AD09「進化する Web ～ Progressive Web Apps の実装と応用 ～」のについてのフォローアップ記事を書きます。 二日目の最終セッションにもかかわらず、ご参加くださいました皆様、誠にありがとうございました。 アンケートの内容を見るに、多くの方にご満足いただけたようで非常にうれしく思います。 この記事では、同セッションの内容について記述していきます。 進化する Web ～ Progressive Web Apps の実装と応用 ～ 進化する Web ～ Progressive Web Ap
Making Fullscreen Experiences
We have the ability to easily make immersive fullscreen websites and applications, but like anything on the web there are a couple of ways to do it. This is especially important now that more browsers are supporting an "installed web app" experience which launch fullscreen. Getting your app or site fullscreen #There are several ways that a user or developer can get a web app fullscreen. Request th
iPhone X の Safari における Web コンテンツの表示 - ONO TAKEHIKO - Medium
iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと
ウェブでの新しいお金の払い方 - Web Payments と Payment Request API について
前回の記事では、フォームを最適化することでウェブの決済フローを改善するアイディアについて書きましたが、今回は新しい標準 API を使ったアプローチについて書きます。 見た目にも違いが分かりやすいものですので、まずはこちらをご覧ください。 デモはこちらからお試し頂けます (実際に商品を購入することはできません。また、クレジットカードなどの情報がサーバーに渡されることはありません)。 これまで使われていたフォームの代わりに、支払い専用のユーザーインターフェースが使われていることにお気付きと思います。実はこの UI はウェブサイトが用意したものではなく、ブラウザが提供するもので、サイト管理者はこれを呼び出すことにより、従来のフォームよりも手軽に、正確な支払情報をユーザーから提供してもらうことが可能になります。今回ご紹介するのはこれを実現する Payment Request API についてです。
Google I/O 2017レポ &「How Well Do You Know the Web?」紹介｜Goodpatch Blog グッドパッチブログ
こんにちは！Prottチームのよしこです。 先月カリフォルニア州のマウンテンビューでおこなわれたGoogle I/O 2017に参加してきました！ この記事では写真で現地の雰囲気をお伝えします。加えて、最終日におこなわれたクイズ形式の参加型セッション「How Well Do You Know the Web?」がとても勉強になったので、冒頭4問の内容をご紹介したいと思います！ Google I/Oの現地の雰囲気 マウンテンビュー滞在中はとてもいい天気が続いていました。 会場のアンフィシアターまでは、無料のシャトルバスや各自調達したLyft/Uberなどのサービスで向かいます。 会場の入り口はこんな感じ。 中に入ると、受付と奥に一番大きいセッション会場であるアンフィシアターのテントが見えてきました！ 受付の横にある、おおきなI/Oのロゴ。 I/O開催の前日からバッジピックアップがあり、参加者
Canvasの「ブレンドモード」と「toDataURL」を利用した画像の重なりを判定する処理 - Qiita
iOS/Androidのスマートフォン向けのWebアプリケーションにおいて、 画像を合成した際に合成した画像同士が重なっているかをチェックする必要があり Canvasを利用すれば出来そうだと思ったため、その時の実装メモとして記載しておきます。 前提条件 必要なパーツの画像を合成して表示するWebのシステム 着せ替えゲームをイメージして頂ければと... 各パーツは全て同じサイズの画像で書き出しがされている 各パーツの描画位置については、画像に描画されている位置 左上を基点として画像を合成すれば基本的には綺麗に合成される 描画されているパーツ以外の余白部分は透過である 画像のイメージ 上記のように同じ画像サイズではあるが、 各パーツの表示位置や大きさなどは画像の中に埋め込みで描画されている。 （※ 画像はあくまでイメージです） このようなパーツの画像を合成し表示するシステムがある。 やりたいこ
レスポンシブ対応したモーダルウィンドウのプラグインのまとめ
こんにちは、工藤です。 今回は以前まとめたものが古かったので、jQueryを使ったモーダルウィンドウのプラグインを改めてまとめました。 レスポンシブ対応しているもののみに絞っています。 Boxer（Lightbox） DEMO GitHub（Boxer） GitHub（Lightbox） 以前までは『Boxer』というプラグイン単体だったのですが『Formstone』というテーマの1つになり、それに伴い『Lightbox』という名前に変更になったようです。ややこしいです。 ただ比較しても挙動は（見た限りだと）そんなに違わないので好きな方を使ってよいかと思います。 『Boxer』の方が設置は簡単です。 このプラグインのいいところはレスポンシブに対応している、かつスマートフォンで見た場合には最適化して表示してくれるところです。 こんな感じにきれいに表示してくれるので重宝しています。 動画やイン
特定の要素を全画面(フルスクリーン)にするFullscreen API
Updated 2013.10.30 / Published 2013.10.30 HTML5のFullscreen APIは、YouTubeなど動画画面の右下にある全画面表示ボタンを押すと動画部分のみが画面いっぱいに表示されるように、特定の要素を全画面（フルスクリーン）で提供できる機能です。IEもIE11から対応しており、いよいよ本格的に使える環境が整ってきました。 Fullscreen APIの実装状況 IEIE11よりmsのベンダー識別子付きで先攻実装 ChromeChrome15よりwebkitのベンダー識別子付きで先攻実装 FirefoxFirefox10よりmozのベンダー識別子付きで先攻実装 SafariSafari5.1よりwebkitのベンダー識別子付きで先攻実装 OperaOpera12.1よりサポート Opera15よりwebkitのベンダー識別子付きで先攻実装 iO
いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ
HTML5のマークアップ仕様で追加された「カスタムデータ属性」。でも何のためにあるのか、どう使うのか、説明できますか？ この記事ではHTML5カスタムデータ属性の使い方を説明します。また、Web開発者の仕事に役立つユースケースも紹介します。 なぜカスタムデータ属性か？ 多くの場合、DOM要素が異なれば、それに応じた情報を格納する必要がでてきます。そういった情報は読者にとっては不必要かもしれませんが、開発者にとっては簡単にアクセスできれば仕事がずっと楽になります。 たとえば、Webページにいろいろなレストランを載せたリストがあるとします。レストランで出される食事のタイプやレストランまでの距離についての情報を格納する場合、HTML5が登場する前は、 HTMLのclass属性を使っていたと思います。もし、ユーザーが特定のレストランについて知るために、レストランのidも格納する必要が出てきたらどう
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！
「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使えるようになったり、Microsoft EdgeもWeb Componentsの実装を約束していたりと、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、Web開発はどう変わるのか？まずはCSS設計というところに着目して聞いてみたいと思い、先日「Web Components時代のCSS設計」という座談会を開催し、エキスパートの方々にお話を伺ってみました。 ゲストのエキスパート紹介 高津戸 壮さん 株式会社ピクセルグリッド フロントエンドエンジニア Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。スケー
楽天とBlackstorm、HTML5ベースのモバイルゲームプラットフォーム「R Games」をローンチ - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
ローンチされた R Games のタイトル例 Photo credit: 楽天ゲームズ 日本のテック企業、楽天が東南アジアにおける e コマースサイトの閉鎖を決定したことが昨年大きく報じられた。そして、同社は現在新たな分野に参入しようとしている。モバイルゲームだ。 楽天は、米国に本社を置く Blackstorm と共同で開発した R Games というプラットフォームを本日（4月4日）ローンチした。このプラットフォームは HTML5ベースのゲームを対象にしている。これらのゲームの強みは、様々なデバイスで動作し、他のアプリからも起動できてダウンロードやインストールが不要なことだ。 R Games はローンチに際して、パックマンやスペースインベーダーのような懐かしの名作ゲームの復刻版を含めた15タイトルをそろえた。今後、サードパーティ製のゲームについても同プラットフォーム上で展開できるようにす
Chrome 58 ベータ版: IndexedDB 2.0、iframe ナビゲーションの改善、迫力満点のフルスクリーン PWA
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
iPhoneサファリで、WEBサイトをアプリっぽく見せる - Qiita
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> イメージ： minimal-uiを指定しない場合(この場合でも画面をスクロールすればアドレスバーが小さく＆フッタが消えはする) minimal-uiを指定した場合(常にアドレスバーが小さく＆フッタが消える) 実際のページはこちら(iPhoneで開いてみてください) minimal-uiを指定しない場合：http://hkusu.github.io/iOS_viewport_demo/index1.html minimal-uiを指定した場合：http://hkusu.github.io/iOS_viewport_demo/index2.html 方法② 端末のホ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5/CSS3のニュースやTIPSなどのまとめ (2018年7月12日)
Web制作者がブックマークしておきたい、HTMLやCSSで困った時にチェックしたいリソースのまとめ
monostudio.jp
スマホ時代に最適化したHTML5・CSS3のコーディング技術6選 : ニキビあと。
