デベロッパツールの新機能が便利！ そのCSSがなぜ機能しないのか、どう修正すればよいのかが分かる
デベロッパーツールの地味だけど便利な新機能が実装されるので、紹介します。CSSの非アクティブなプロパティを表示し、それがなぜ機能しないのか、どう修正すればよいのか教えてくれる機能です。 たとえば、親がdisplay: flex;ではないのにFlexboxのプロパティを設定しまった場合は、下記のように表示されます。 CSSに携わる人なら、この機能をオンにしておいて損はないでしょう。 display: flex;ではないのにFlexboxのプロパティを設定 ほかにも、widthを設定したのに効かないときは、それインライン要素ですよ、と教えてくれます。 インライン要素にwidthを設定 デベロッパーツールのこの新機能は「Find inactive styles」と呼ばれるもので、要素に適用されている非アクティブなスタイルを見つけることができます。 Find inactive styles -Ca
これは便利すぎる！ Webサイトやスマホアプリのターゲットブラウザを決める時に役立つツール -Browserslist
ターゲットブラウザを決める時に役立つ便利なツールを紹介します。 条件は細かく設定でき、下記は日本のユーザーを対象、シェアが0.2%以上あり、現在サポートされていないブラウザを除いたものです。iOSのSafariが多く、Chrome for Android, Chrome for desktopと続いています。 Browserslist Browserslist -GitHub Browserslistの特徴 Browserslistの使い方 さまざまな条件でターゲットブラウザを調べる Browserslistの特徴 Browserslistはフロントエンドでよく使用されるツール（Autoprefixer, Babel, ESLint, PostCSSなど）でブラウザのターゲットや互換性を共有するツールです。 0.5%以上シェアがあるブラウザ、最新2バージョンのブラウザ、サポートが終了してい
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） - ICS MEDIA
Chrome・Safari・Firefoxで比較 クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（パフォーマンス編） この記事は『Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザの開発者機能』の後編になります。 前編ではブラウザーの開発者ツールがJavaScriptやCSSのコーディング・デバッグだけではなく、もっとクリエイティブな領域でも活用できることを示しました。アニメーションのリプレイやイージングの編集など、すぐに使える機能がたくさんあることをお伝えできたと思います。 後編ではもう一歩踏み込んで、アニメーションやインタラクションのパフォーマンス改善に使える開発者ツールの機能を紹介します。パフォーマンスについてはどのブラウザーもとても力を入れているので、開発者ツールも自ずと高機能です。 ブラウザーのレンダリングプ
Chrome・Safari・Firefoxで比較！クリエイティブ表現のレベルアップに使える最新ブラウザーの開発者機能（前編） - ICS MEDIA
どのブラウザーでも、アニメーションのパネルを開いている状態で画面を操作すると、発生したトランジション・アニメーションが自動的に記録されます。記録したアニメーションはもう一度ゆっくり再生したり、対象の要素やスタイルを調べたりすることもできます。 ChromeのAnimationsパネルの特徴 Chromeの場合、検出されたトランジションやアニメーションはトリガーが同じもので自動的にグループ化され、グループの単位で詳細を見たり再生したりが可能です。また、アニメーションのタイミングや長さをドラッグで調整する機能もあります。 Firefoxのアニメーションパネルの特徴 Firefoxのアニメーションパネルはインスペクターの一部になっているので、要素を絞り込んでこの要素に適用されているトランジション・アニメーションだけを表示できます。また、色のトランジション・アニメーションの場合、タイムラインが色の
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
デベロッパーツールの賢い使い方！テキストが多い少ないで崩れないかなど、デザインの検証や調整方法のまとめ
CSSについてあまり詳しくないデザイナーでも、デザインのさまざまな検証や調整ができるデベロッパーツールの使い方を紹介します。 テキストや要素が多い少ないでコンテンツのデザインが崩れないか、要素のデザインを簡単に比較したり、画像や要素のカラーを一括で変更したりなど、制作にすぐに役立つものばかりです。 Using DevTools to Tweak Designs in the Browser 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 要素に与えられたclassを切り替える コンテンツの量でデザインが崩れないかテストする 指定した要素を非表示にする デザイン要素のスクリーンショット デザインのカラーを変更する CSSの変数を使用する（カスタムCSSプロパティ） 「filter: invert();」で要素のカラーを反転する C
Vorlon.JS·多数のブラウザをまとめてデバッグできるリモートデバッガー MOONGIFT
今はWebブラウザの種類も増え、かつスマートフォンまであるなどWebサイトの作成も大変になっています。しかも開発ツールの使いやすいブラウザ、使いづらいブラウザもあり、開発に時間がかかります。 そんな現状を打破できるかも知れないのがVorlon.JSです。Vorlon.JSを使うと多くのWebブラウザのデバッグを一元管理できるようになります。 Vorlon.JSの使い方 Vorlon.JSはnpmでインストールできます。 $ npm install vorlon そしてvorlonコマンドでサーバが立ち上がります。 $ vorlon 後はこのVorlon.JSが出しているJavaScriptをデバッグしたいWebページ内に組み込みます。 <script src="http://localhost:1337/vorlon.js"></script> これで準備は完了です。例えば以下のようになり
確認くん
▲HOME あなたの情報（確認くん） 情報を取得した時間 2023年 09月 24日 AM 02 時 19分 23秒 現在接続している場所(Server) www.ugtop.com あなたのＩＰアドレス(IPv4) 133.242.243.6 ゲートウェイの名前 (none) OSの解像度 現在のブラウザー HatenaBookmark/4.0 (Hatena::Bookmark; Analyzer) 表示サイズ： どこのURLから来たか (none) Proxyのバージョン等 (none) Proxyのステータス (none) / (none) / (none) Proxyの効果 (none) MIMEの仕様 */* FORMの情報 GET FCONTENTのタイプ (none) FORMの送信バイト数 (none) データ取得の手段 (none) クッキー (none) エンコードの
JavaScriptエラーを表示・確認する方法のまとめ
JavaScriptエラーを表示・確認する方法をまとめました。 １．はじめに ブラウザでページを表示したときに正しく表示されない、あるいはjQueryで設置したパーツなどが動作しない場合、JavaScriptエラーが発生している可能性があります。 JavaScriptエラーが発生しているかどうかを確認するためにはエラーを表示するためのコンソールを開く必要がありますが、コンソールの開き方が分からなかったり、ブラウザで操作方法も異なります。 このエントリーでは、以下のブラウザを対象にしてJavaScriptエラーの表示・確認方法を解説します。 Google Chrome Firefox IE ビギナーの方向けの内容です。 ２．エラーになるJavaScriptのサンプル エラーになるJavaScriptのサンプルとして、次のサンプルを用いて解説します。このJavaScriptを実行するとシンタッ
自分のサイトの表示を5種のブラウザでチェックできるネットサービス「browserling」
サイトのURLを入力すれば、わざわざ全種類・全バージョンのブラウザ環境をそろえることなく、、無料でバージョン別にInternet Explorer・Google Chrome・Firefox・Safari・Operaでの表示がチェックできるネットサービスが「browserling」です。操作方法は以下から。 browserling - interactive cross-browser testing https://browserling.com/ ◆操作方法 上記サイトにアクセスすると、このような画面が表示されます。 使い方は簡単、まず上部に「表示させたいサイトのURL」を入力します。今回はGoogle Chromeのバージョン14.0でサイト表示を確認したいので「Google Chromeのアイコン」・「14.0」の順に選択してから、「run」をクリック。 そうすると、以下のようにG
CSSのプロパティを検索してブラウザのバージョンごとの対応状況を確認出来るリファレンスサイト・Browser Support
プロパティがどのブラウザに対応 しているかを調べられる、という 検索式のリファレンスサイトです。 バージョン別になっているので、 動かなくて困った、という時に調 べて見ては如何でしょう。 休日なので軽い話題。プロパティで検索するとIE、Firefox、ChromeやOperaなどの対応状況をバージョンまで確認出来る、というリファレンスサイトです。 borderとかcolorといったプロパティで検索すると各ブラウザの対応状況がバージョン別で把握出来る様になっています。 スクリーンショット ↑ こんな感じでバージョンも把握出来る様になっています。緑色の部分が対応ブラウザですね。 また、左下のTEST CASESからデモも確認できます。 ↑ かなり古いバージョンも掲載されています。が、IE6はありませんでした。個人的主観？ ↑ 一覧ページもあります。 ↑ 若干挙動が怪しいですけどオートサジェスト
ブラウザベースのjQuery Mobileアプリ開発環境「codiqa」と「Application Craft」
jQuery MobileなどのすぐれたJavaScriptフレームワークの登場で、HTML5とJavaScriptを組み合わせたWeb標準によるモバイルアプリケーション開発が普及し始めています。 この記事では、Web標準によるアプリケーション開発をさらに簡単にしてくれる、WebブラウザベースのjQuery Mobile対応モバイルアプリケーション開発環境「codiqa」と「Application Craft」の2つを紹介しましょう。 Codiqa～jQuery Mobileアプリのモックアップがすぐ作れる モバイルデバイス対応のアプリケーションを開発するときに手間がかかるのが、小さい画面でも使いやすいユーザーインターフェイスの構築です。モックアップを作り、使い勝手を試す必要があります。 先月公開が始まった「codiqa」は、そのモックアップを手軽に、Webブラウザ上でドラッグ＆ドロップす
ブラウザにドラッグ&ドロップしたフォントでWebフォントの表示をテストできるブックマークレット・font dragr
結構前に知ったサービスですが、やっと 使う機会が出来たので使用レビュー。 ローカル上のフォントファイルをドラッ グ&ドロップして、そのフォントでWeb フォントの表示テストを行えるブック マークレットです。なんだかピンと来ない 説明ですがｗ CSSninjaというブログを書いている方の作ったWebサービスで、フォントファイルをドラッグ&ドロップして、そのフォントをWebフォントとして使ったときにどう表示されるかを確認出来ます。 ようやく使う機会が出来たのでテスト。ちょっと面白かったです。 グランジの定番、Urban-Sketchでテスト。 たのしいｗ 使い方は簡単で、ブックマークレットを使うと上部にキャプチャのようにバーが出現しますのでそこにフォントをドロップすればいいだけ。複数可能です。 ブックマークレットは以下で。Webフォントの確認は確かに楽かも。 font dragr
Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
キーワード調査やマニュアル調べがスゴく楽になるブラウザの便利小技 | 初代編集長ブログ―安田英久