2021年度リクルート エンジニアコース新人研修の講義資料です
![ブラウザ / Browser - Speaker Deck](https://cdn-ak-scissors.b.st-hatena.com/image/square/2850b8ead2f6572bfc5c0464d48515e4a542a2aa/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F30671cc43a3946128d8eea5bfe14800b%2Fslide_0.jpg%3F18815340)
2021年度リクルート エンジニアコース新人研修の講義資料です
Chrome・Safari・Firefoxで比較 クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能(パフォーマンス編) この記事は『Chrome・Safari・Firefoxで比較!クリエイティブ表現のレベルアップに使える最新ブラウザの開発者機能』の後編になります。 前編ではブラウザーの開発者ツールがJavaScriptやCSSのコーディング・デバッグだけではなく、もっとクリエイティブな領域でも活用できることを示しました。アニメーションのリプレイやイージングの編集など、すぐに使える機能がたくさんあることをお伝えできたと思います。 後編ではもう一歩踏み込んで、アニメーションやインタラクションのパフォーマンス改善に使える開発者ツールの機能を紹介します。パフォーマンスについてはどのブラウザーもとても力を入れているので、開発者ツールも自ずと高機能です。 ブラウザーのレンダリングプ
TAK(@tak_dcxi)です。 コーダーやフロントエンドエンジニア(以下実装者と呼ぶ)が作業に取り掛かる前に事前にデザイナーに確認しておくとよいことを独断と偏見でまとめました。過去に面倒臭がって聞くのを放棄して失敗した経験もあるので、自戒の念も込めています。 デザインの共通ルールを確認する 余白のサイズやフォントサイズや使用している色などはルール決めがされているとは思いますが、デザインのルールを実装時に分かりやすくしておくことで効率的かつ保守性や拡張性に強いコードが書きやすくなります。 逆に実装時にルールが分からないと、実装者がデザインカンプを見てもそのルールを理解するのに時間がかかってしまうことも多いです。余白であれば感覚で配置されてるのか、似たような箇所で17pxであったり23pxであったり…と意図が分かりかねる場合もあります。余白は原則8の倍数で行うみたいなルールが事前に実装者に
Chromeが2年以内にサードパーティcookieをブロックすると正式に発表しました。 https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html いろいろなことが言われていますが、具体的に何が起こるのか、混同しやすいところを含めて初心者でもわかるようにまとめました(このサイトでは珍しい初心者向けの記事です)。 cookieを取り囲むブラウザ環境の変化のおさらい これまではiOS/SafariがITPの取り組みの中でトラッキング目的のサードパーティcookie(※)をブロックしてきましたが、これでSafariとChromeの両方でトラッキング目的のサードパーティcookieをブロックすることになります。スマートフォン、デスクトップ、タブレットで大半のシェアが適用対象になるわけです。 なおFire
ピクシブのメディア事業部で広告事業を担当しているdrillです。社内ではアドネットワーク・SSP等の配信広告の運用によるマネタイズを主な業務として行っています。 ウェブページにおけるコンテンツの表示や動作については、それぞれのブラウザの仕様に基づいて正常に働くように気を配るということがウェブ業界の常ですが、これはもちろん広告配信においても例外ではありません。意図したとおりに広告配信が行われていない環境があると、impやclick等の数値の正確性が担保されなくなったり、場合によっては収益的機会損失に繋がってしまうケースもあります。今回は広告配信に関わりそうないくつかの例を挙げつつ、ブラウザの動向に気を配ることの重要性についてお伝えできればと思います。 Better Ads Standards について まずはGoogle Chrome関連で最近騒がれがちな話から。ユーザーに不快感を与えるよう
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます Microsoftは長年にわたって「Internet Explorer」(IE)で独自の道を歩んできたが、新ブラウザ「Microsoft Edge」は、多くの点でAppleの「Safari」や「Google Chrome」と同じように動作するという。 Microsoftは先週、「Windows 10」向けブラウザEdgeでのウェブサイトやアプリの処理が、多くの点でSafariやChromeに似ていることを詳しく説明した。 IEはHTML、CSS、JavaScriptを他のブラウザと異なる方法で扱い、それが原因でIEではサイトの表示や挙動がおかしくなるとして、Microsoftは長年、批判を浴びてきた。 Microsoftによると、Edg
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
おっと、これは便利だ。 Surflyを使えばブラウザ画面をリアルタイム共有できるようだ。 よくあるツールではあるが、Javaなどの変なプラグインが必要ない点が素晴らしい。 使い方は簡単で、無料ユーザー登録後にサイトにアクセス、共有用にもらえるURLを配布するだけである。 あくまでも自己責任で使ってもらいたいが、ちょっと試してみたところ、動作的にも問題ないようだ(さすがにログインとかしなかったが)。 ちょっとしたサイトをみんなで見たいときに便利かもですな。覚えておいて損はないかと思ったり。
ナビゲーションスキップは主に音声ブラウザ向けに、グローバルナビゲーションなどをスキップするために実装されるものだが、前々からずっとナビゲーションスキップをどのように書けば最適なのか、についてはずっと疑問に思ってきた。というわけで、調べてみた。 前提:まずは最適なHTML(XHTML)を書くこと。 これが大前提。音声ブラウザによっては、heading要素(h1とかh2)を順にスクロールすることができるから。というわけで、XHTML+CSSによるWeb標準での実装は大前提。というより、これをしっかりと書いておけば、ナビゲーションスキップを埋め込まなくても、音声ブラウザにとってはテーブルレイアウトに比べて、かなり便利になるようだ。 検討事項その1:そもそもナビゲーションスキップは見えるようにすべきか否か。 ナビゲーションスキップを見えるようにするべきか、しないべきかについて、まず考えておく必要が
スマートフォンブラウザ関係のバグは(Android browserを中心に)たくさんありますが、今回はかなりレアケースなバグの話と回避方法についてです。 タイトルどおり、iPhone/iPadのmobile safariやWebViewで日本語文字列の最後の1文字が不自然に改行されて表示されてしまうバグなのです。 どういうことかというと↓下のように表示されるということです。 くだくら げサンプルページも作りましたので、以下のページをiPhone, iPadで表示してみてください。 Sample: http://kudakurage.com/test/mobile_safari_line_break/ 発生条件 発生条件は少し複雑なため、そんなに遭遇することはありません。 (ただその分googleで検索しても、遭遇した例など出てきません) mobile safariで閲覧している PCブラウ
毎年恒例になってきた「業種別ブラウザシェア」の2013年版をお届けします。過去2年間の記事はこちらです。 業種別のブラウザシェア2011年版 業種別のブラウザシェア2012年版 年々Internet Explorerのシェアが少なくなっており、Google Chromeがシェアを広げています。また、最近はスマホユーザーの増加によりSafariやAndroid Browserのシェアも増えてきており、サイトによっては最も多くなっています。 今回は、業種別にサイト全体のブラウザシェア+Internet Explorerのバージョン別シェアの2つを掲載していきます。 »業種別の検索エンジンシェア2013年版 Web SEO 建築・不動産 自動車 健康 美容 保険 年金 投資 教育 芸能 趣味(釣り) 感想 PC経由のアクセスのみで見ればまた違ってくるのでしょうが、PC・スマホ込みのデータだと、ど
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
IE6/7/8/9, Firefox, Chrome, Safari, Operaは当たり前、Win, Mac, LinuxなどのOS、iPhone, Android, iPod, iPadなどのデバイス、スクリーンのサイズ、言語などを判定し、それらをCSSのセレクタで利用できるスタンドアローンのスクリプトを紹介します。 CSS Browser Selector+ CSS Browser Selector+の特徴 CSS Browser Selector+の使い方 CSS Browser Selector+の特徴 CSS Browser Selector+はハック無しで、さまざまなUAをCSSのセレクタで指定できるスクリプトです。ブラウザごとに異なるスタイルシートの適用、スマフォやタブレット用のレスポンシブなスタイルにも利用できます。 CSS Browser Selector+が判別するの
Macでウェブ制作に携わる人全員に伝えたい、Windows, Linux, Mac OS Xのさまざまなブラウザでの表示確認ができる無料のMac OS Xアプリを紹介します。 Boot CampやParallelsなどは必要なく動作します。 Sauce -App Store Sauce for Mac -Website Sauceは、約100種類のブラウザとOSの組み合わせでブラウザの表示確認ができるOS X用のアプリケーションで、簡単に起動・操作ができます。 Windows用のIE6/7/8/9/10をはじめChrome, Safari, Firefox, Opera、iPhone4/5/6, iPad4/5/6, Android4なども揃っています。
Sorry, JavaScript is required to view Global Stats charts.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く