これは便利すぎる！ 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バージョンのブラウザ、サポートが終了してい
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
AMP 化しよう: Google モバイル検索における AMP ページへのリンク機能のプレビュー
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/02491c4eeaaee338bf6a3bba36d56f47a7ba450b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
無料版は3分、だが便利！ブラウザのさまざまなバージョンで簡単に表示確認・レスポンシブの確認ができる -Browserling
IE, Chrome, Firefox, Opera, Safariなど、ブラウザのさまざまなバージョンでの表示確認、レスポンシブの確認などが、簡単にブラウザ上でできるオンラインサービスを紹介します。 有料版だと、ローカルでも確認できる優れものです。 Browserling Browserlingは無料版と有料版が提供されており、無料版はセッションは3分、IEは9/Vistaのみ（他は全バージョン可）、解像度は1024x768のみと使用条件は限られますが、なかなか便利だと思います。 セッションはインタラクティブ 単なるスクリーンショットではなく、ブラウザ上のさまざまなインタラクションを実行できます。 本物のブラウザを使用 サーバー上では本物のブラウザを動作させており、エミュレータなどの偽のブラウザではありません。 最新ブラウザへの対応 最新ブラウザがリリースされたら、すぐにインストールを行
RedPen – 文章全体のエラーチェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 文章を書くのが苦手という方は多いのではないでしょうか。個人的にはさすがに毎日のように文章を書いていて苦手意識はないのですが、堅苦しく書くなど文体によっては苦手な形式もあります。何より英文は苦手です。 通常、文章に対するスペルチェッカーはありますが、RedPenは自然言語で入力された文章全体のチェックをしてくれるソフトウェアです。 RedPenの使い方 RedPenのデモです。同じ単語が使われている場合、スペルミスなど様々な観点からチェックを行ってくれます。 RedPenは設定ファイルを使ってエラーチェックを行います。さらに言語非依存で、英語はもちろん日本語やドイツ語、中国語などでも利用が可能です。面白いのはプレインテキストだけでなく、MarkdownやTextileでもそのまま記述
Macでも無料でIE確認するためのModern.IEが想像以上に快適だった
これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10
Twitter Bootstrapのテーマ作成も出来て、スマフォやタブレットでの表示状態も確認出来るジェネレーター・BootTheme
Twitter Bootstrap用のテーマを 作成出来る、というジェネレーター 的なもの。それだけでなく、作成 しながらスマフォやタブレットで の表示状態も確認出来ます。 Twitter Bootstrapのデザイン作成ツールです。Twitter BootstrapはレスポンシブWebデザインに対応していますので、このジェネレーターでもスマフォやタブレットデバイスのサイズで表示確認が出来る様になっています。 確認しながら作成できます。リンク色とか背景色とかボタンのカラーとか。使い方はよくあるジェネレーターと相違ないので割愛します。 簡易的なものではありますが、上記のようにスマフォやタブレットデバイスのウィンドウサイズにリサイズして表示を確認する事が出来ます。 コードは通常のCSSだけでなくLESS形式でも発行可能です。 もう少し使い勝手が良くなると嬉しい。今後に期待です。Twitter
CSSのプロパティを検索してブラウザのバージョンごとの対応状況を確認出来るリファレンスサイト・Browser Support
プロパティがどのブラウザに対応 しているかを調べられる、という 検索式のリファレンスサイトです。 バージョン別になっているので、 動かなくて困った、という時に調 べて見ては如何でしょう。 休日なので軽い話題。プロパティで検索するとIE、Firefox、ChromeやOperaなどの対応状況をバージョンまで確認出来る、というリファレンスサイトです。 borderとかcolorといったプロパティで検索すると各ブラウザの対応状況がバージョン別で把握出来る様になっています。 スクリーンショット ↑ こんな感じでバージョンも把握出来る様になっています。緑色の部分が対応ブラウザですね。 また、左下のTEST CASESからデモも確認できます。 ↑ かなり古いバージョンも掲載されています。が、IE6はありませんでした。個人的主観？ ↑ 一覧ページもあります。 ↑ 若干挙動が怪しいですけどオートサジェスト
URL指定可能なレスポンシブWebデザイン対応確認ツール・responsive.isと似たようなやつ何個か
ちょっと便利かも、と思ったのでメモ。 URL指定が出来るレスポンシブWebデザイン 対応確認ツールです。この手のツール はかなり増えているので今更感も否め 無いんですが、URL指定で直接見れるの で、人に見せるのには結構いいかも知 れないです。 というわけで、レスポンシブWebデザインの対応確認ツールです。他にいろいろ。先に紹介します。 ResponsivepxResponsive Design TestingSimple Media Queries TesterscreenflyResizer使い方の説明は多分不要です。これらは同じ目的で作られてますので使いやすいのを選ぶ感じで。 で、今日はresponsive.isっていうツールと、responsinatorっていうツールの2つをご紹介です。 ちょっとキャプチャだと分かりにくいんですけど・・・最上部にスマフォとかタブレットのアイコンがあ
その場でサクッとiPhoneやiPad等の幅でWebサイトの表示確認が出来るレスポンシブWebデザインの補助用ブックマークレット・Resizer
ここ何日かずっとレスポンシブWebデザイン のネタが続きますが・・便利なブックマーク レットです。閲覧中のWEBサイトをiPhoneや iPadの幅で見たときの表示状態で確認出来る ブックマークレットです。というか単純に リサイズしてくれる、ってやつですね。 その場でレシポンシブWebデザイン対応の表示確認が出来るブックマークレットです。UAの切り替えとかじゃなく、単純にリサイズするだけですが、シンプルで手軽に表示確認出来るので使おうかなと思います。 地味に便利でした。使い方・・・の説明は不要だと思いますが他に書くこと無いので一応ｗ ブックマークレット使うと右上になんか出ます。 あとは好みのデバイス選べばその場でリサイズされます。Webサイトのほうで背景色を決めてないとオーバーレイの色に依存しちゃいますけど。 でもこのブックマークレットはGithubでコードが公開されてますので好みのブック
数多くあるスマートフォン向けフレームワークからぴったりのものが分かる -Mobile Frameworks Comparison Chart
ここでは、iOS, Android, Windows Mobile の3つをチェックします。 条件は、他にも下記のものがあります。 Platform iOS Android Windows Mobile Windows Phone Blackberry OS、など Target Mobile Website WebApp Native App Hybrid App Development language PHP Java Ruby Action Script C#、など Hardware Accelerometer Camera Capture Compass Connection、など User interface Adjustment Corporate Design UI Widgets Accessibility Other SDK Encryption Advertisemen
ke-tai.org > Blog Archive > P1エミュレータがバージョンアップしiPhoneにも対応したようです
P1エミュレータがバージョンアップしiPhoneにも対応したようです Tweet 2011/8/18 木曜日 matsui Posted in タレコミ | 1 Comment » フォーラムからタレコミをいただきました。 情報提供ありがとうございます。 P1エミュレータが2011年08月10日付けでバージョンアップし、新たにiPhoneにも対応したようです。 → NetFarm P1 Emulator ニュース バージョン1.0.1.179をリリース! [p1.netfarm.ne.jp] P1エミュレータは、国内3キャリア・700機種に対応した、強力なケータイサイト検証用シミュレータです。 今回ガラケーのみならず、iPhoneのシミュレートにも対応したようです。 機種選択で、SoftBankのメニュー内から「iPhone」が選択できるようになっています。 iPhoneのUAが出力される
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こういうのを待ってた！日本語フォントで、レスポンシブ用の文字の指定を調整できる無料ツール -Archetype
Archetype, Digital Typography Design Tool by Our Own Thing, using Google web fonts
WebGLDetector.js - ブラウザのWebGLバージョンを判定 MOONGIFT
タッチイベントをPCサイトで動作テストできるようにするブックマークレット・「Phantom Limb」
IDEA * IDEA