意外と知らない？HTML/CSSを書く上で便利なデベロッパーツールの機能13選｜かずたか
※こちらの記事が400はてブ以上ついて、総合とテクノロジーの人気エントリーに入りました！ こんにちは。Kazutaka Shimizuです。 フリーランスとしてPM、エンジニアをやっています。 元々はWebマーケティングのコンサルタントをやっていましたが、独学でWeb開発を勉強してプロダクトを作って起業しました。 最近は創業した会社を離れ、フリーランスとして活動したり、プログラミングを独学した経験をこちらのツイッターで発信しています。 みなさんはGoogle Chromeのデベロッパーツールをご存知ですか？ ドットインストールなど一部のプログラミング学習サービスでは、デベロッパーツールのレッスンがあるなど、おそらく全く知らない人はかなり少ないと思います。 しかし、とにかく多機能なため、意外と便利な機能を使ったことがないというプログラミング初心者の方も多いようです。 僕自身、何度か自分のTw
フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！ | Tech Blog
この記事ではブラウザの仕組みを図解を用いてわかりやすくご説明します。 最近のブラウザは優秀なので、ブラウザの仕組みを理解していなくても、パフォーマンスの問題が発生することは少ないかもしれません。 しかし、アニメーションを多用するサイトやユーザーインタラクティブなサイトの場合、パフォーマンスの問題はとてもシビアです。 ブラウザの仕組みを知ることで、ブラウザのパフォーマンスを最大限に引き出す実装を行うことができます。 画面がなめらかに表示されないのはなぜ？スクロールをしていてカクつく。またはアニメーションがカクカクしている時というのはブラウザがどういう状態なのでしょうか？ まずは、この状態を定量的に説明するためFPS（フレームレート）から説明します。 FPSとはFrame Per Secondの略で1秒ごとの画面(フレーム)の切り替わる回数を表しています。 ブラウザでサイトを見た際には最高で6
FRESH! Web パフォーマンス改善 〜クライアントサイド編〜 | CyberAgent Developers Blog
You can read this post in English. みなさんこんにちは、FRESH! でフロントエンドの開発している鈴木(sutiwo)です。 前回は、FRESH!におけるPCブラウザのFlash脱却という HLS の Web プレイヤーについて記事を書きました。 今回はスマートフォン・ PC でのブラウザに関するパフォーマンス改善の取り組みとその結果についてお知らせします。 まずクライアントサイドのパフォーマンス改善を行うにあたり、弊社の Web Initiative Center* から 1000ch 氏に加わっていただきどのようなことを目標とするか議論しました。 * Web プロダクトの品質向上とWeb技術を使ったチャレンジを目的に設立された弊社の組織 議論の様子 議論を行った後、今回の改善で以下のことに取り組むことが決まりました。 Service Worker で
WebKit、OS X 10.11.4などに搭載されるSafari 9.1でCSSを視覚的に編集できる「Visual Styles」を追加。
WebKitがOS X 10.11.4 Betaなどに搭載されるSafari 9.1およびWebKit Nightly BuildでCSSを視覚的に編集できる「Visual Styles」を追加すると発表しています。詳細は以下から。 Visual StylesはSafariのWebインスペクタ機能の一部として提供され、[要素] のサイドバーに「Styles – Computed（計算済）」と「Styles – Rules（ルール）」に加え新たに「Styles – Visual」が追加されており、ここにWebサイトで利用されているCSSプロパティが表示されるようになっています。 This was the primary motivation for adding the Visual Styles sidebar — to take the confusion out of CSS by l
MosaicやNetscapeといったインターネット黎明期のブラウザでネットサーフィンできる「oldweb.today」
2016年の今でこそMicrosoftの「Internet Explorer(IE)」やGoogleの「Chrome」、Appleの「Safari」などさまざまな種類のブラウザを使うことができますが、インターネットが登場し始めたころはティム・バーナーズ＝リーが作った「WorldWideWeb」や、その後に登場した「NCSA Mosaic」や「Netscape Navigator」などユーザーに多くの選択肢はありませんでした。そんなインターネット黎明期に普及していた昔懐かしのブラウザを使ってネットサーフィンできるのが「oldweb.today」というウェブサービスで、昔のブラウザデザインを見るべく実際に使ってみました。 oldweb.today http://oldweb.today/ 上記URLを開くと、上から「ブラウザ」「URL」「日時」と並んだページが表示されます。 まずは、ブラウザの
軽いぞ。ネット中毒歓喜の新ブラウザ｢Vivaldi｣
軽いぞ。ネット中毒歓喜の新ブラウザ｢Vivaldi｣2015.03.09 07:0011,983 satomi モザイク、ネットスケープ、IE、FireFox、Safari、Chromeときたブラウザ戦争に、Operaの灰から生まれたパワーユーザー用ブラウザ｢Vivaldi｣が参戦です。早速使ってみました！ ファンの間では、独自開発のレンダリングエンジンPrestoを放棄した数年前の段階で最強ブラウザ終焉と惜しまれたOpera。このVivaldiでは、Operaのパワーユーザー向け機能（タブスタック、豊富なキーボードショートカット、ページ内メモとり機能ほか多数）の復活を目指しています。 今出ているのはテクニカルプレビュー版なので、バギーだし、使えない機能も若干ありますが（サイドバー、メールクライアントなど）、使えるところを触ってみただけでもサクサクで、これはパワフルなネットブラウジングマシ
世界のJavaScriptを読もう @ 2014
世界のJavaScriptを読もう @ 2014 ^目的: ウェブの世界は絶対変化するもの 変化する前提の行動が求める それをどうやって見ていくか、それを知ってどうするか ^ JavaScriptやブラウザ周りのリリースの状況はウェブの変化にあわせるように変化してきている。 どのように変化してきたか知り、どうやって変化を見ていくのか、そしてわたしたちはどう変化していくのかを考えよう。 アジェンダ 世界のJavaScriptを読もう @ 2012 の続編的なものです ブラウザやJavaScriptのリリースは変化してきている 私たちはどのように変化を知り見ていくのか そして私たちはどのように変化していくのか [fit] 世界のJavaScriptを見る話 [fit] JSer.info 開始 2011年〜 ^ JSer.infoを始めた2011年を一つの基準として考えて、 そこからブラウザや
自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」:phpspot開発日誌
Editr - HTML, CSS, JavaScript playground 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」。 いつでもどこでもブラウザがあれば開発ができるスタイルにするための鯖設置型エディタ。 コードハイライト機能がついているため、編集もしやすく、編集結果もすぐ見られるので学習用にもいいかもしれませんね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 前ブラウザのブラウザハックまとめ「Browserhacks」 ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 CSSのブラウザ対応状況が一発で分かる「BrowserSupport」 ブラウザ上での音声再生に使えるシンプルプレイヤー「Audio5js」
mailto：スキームにおける日本語文字自動入力の検証
mailtoスキームにおけるパラメータの日本語文字自動入力は、ブラウザとそれに関連付けられたメールクライアントソフトと、それらに設定された日本語文字コードによってさまざまな挙動をします。 ブラウザのエンコード選択を変えてその お問い合せ をクリックしてみてください。 また、フォームのaction属性がmailtoスキームの場合、method属性と文字コードの設定によってその挙動は違ってきます。 mailtoスキームをsubject、bodyのパラメータ付きで使う場合、またはフォームのaction属性に使う場合、すべてのユーザーに意図する動作は期待できません。 ISO-2022-JP (JIS) お問い合わせ （エンコードなし） <a href="mailto:webmaster@webmastertool.jp?subject=�$B$*Ld$$9g$o$;�(J&body=�$B$*L
キャッシュを無視してウェブから最新のデータを読み込む「スーパーリロード」って知ってた？ | ライフハッカー・ジャパン
さて、「スーパーリロード」とは何なのか？に入る前に、まずは、ウェブのキャッシュについておさらいしておきましょう。 アクセス速度の向上のため、ウェブサイトはしばしば、毎回ページをリクエストするごとに再ダウンロードするのではなく、画像やJavaScriptファイル、スタイルシートといったコンテンツを、キャッシュとしてメモリ上に格納させることがあります。このようなとき、ブラウザが最新のJavaScriptファイルに対応していないなどの問題があると、ウェブサイトがうまく起動しないことがあるわけです。 この事象を解決するためのまっとうな方法は、ブラウザのキャッシュをすべてクリアにすること。Firefoxの場合だと、「ツール」＞「最近の履歴の消去」で操作できます。 しかし、いちいちこの方法は面倒くさい...。そんなときに使えるのが「スーパーリロード」です。「Shift」キーを押しながら、「再読み込みボ
ブラウザ上で何度も繰り返す操作を記録・再現できるアドオン「DéjàClick」 | ライフハッカー・ジャパン
疲れやすい、呼吸の浅さを改善。ストレッチポールは毎日使いたいほど気持ちがいい!【今日のライフハックツール】
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
★WebブラウザシェアランキングTOP10(日本国内・世界) – ソフトウェアテスト・第三者検証ならウェブレッジ
Google Chrome、世界ブラウザ市場でのシェアが3分の1に――StatCounter調べ
Maruta
IDEA * IDEA