CSSリセットはこれで決まり！モダンブラウザによる相違を吸収するようカスタマイズされたスタイルシート -ress
ブラウザごとに異なるHTMLの各要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルが定義されたCSSリセット用のスタイルシートを紹介します。 normalize.cssを最近のWeb制作にあうようカスタマイズされたもので、対応ブラウザはすべてのモダンブラウザ、IEは8+対応です。 ress -GitHub 参考: normalize.cssの特徴とコード 2015年、Web制作者が押さえておきたいCSSの各種リセット ressの特徴 ress: html, グローバルセレクタの定義 ress: 一般的な要素の定義 ress: フォーム要素の定義 ress: メディア要素の定義 ress: アクセシビリティ用の定義 ress: ::selectionの定義 ressの特徴 ressは「normalize.css」をカスタマイズしたもので、スタイルシートを始める時のしっかりしたベースな
Vorlon.jsとは？ ブラウザーでWebデバッグできるお手軽な開発者ツール
Vorlon.jsという開発者ツールを知っているだろうか？ このオープンソースツールを使えば、PCブラウザーで各種Webデバッグが行える。その機能概要と基本的な使い方を解説。 Vorlon.jsとは Vorlon.js（読み方： ヴォーロン・ジェーエス）とは、ChromeのDevToolsやIE／EdgeのF12開発者ツールと同じく、Webブラウザーの表示内容やネットワーク状態をデバッグするためのツールである。 最も特徴的なのが、ブラウザー上で動作することだ。PCブラウザーのデバッグはもちろん、スマホなどのモバイルデバイスのデバッグを、ケーブルをつなげることなく、Macを準備することなく、実現できるのが大きなメリットだろう。 マイクロソフトが開発したオープンソースプロジェクトであり、Node.jsとSocket.IOといったオープンな標準のみを使って開発されていて、プラグインの追加が容易で
[HTML5] sessionStorageで1ウインドウにつき1回だけ，モバイルWebKit向けのページに誘導する
今回はsessionStorageのことについて．localStorageはサイト単位で永続的に保持されますが，sessionStorageはウインドウ単位で揮発するという非常に儚い特製で，使い所がイメージできておりませんでした． HTML5 SessionStorageの挙動によれば， SessionStorageはほんとにウィンドウごとに異なる。例えばCtrl+Nで開いた新しいウィンドウでは、新しいSessionStorageが生成される。サイトごとに共有されるクッキーとは決定的に異なる。 ページをリロードしても、SessionStorageは消えない。 window.open()で作成したウィンドウは、元のウィンドウから複製された新しいSessionStorageを持つ。両者は別々のSessionStorageなので、window.open()後にSessionStorageを変更し
![[HTML5] sessionStorageで1ウインドウにつき1回だけ，モバイルWebKit向けのページに誘導する](https://cdn-ak-scissors.b.st-hatena.com/image/square/715a5714259242b85559658e383e7c7834d1ddb7/height=288;version=1;width=512/http%3A%2F%2Ffarm6.static.flickr.com%2F5066%2F5734053090_0d57b9e6c3.jpg)
@cc_onを使ってブラウザ判別 - JavaScriptテックラボ - [SMART]
jQuery1.9からIE判定のjQuery.browser.msieが廃止されました。 そのためIE判定は自前で行う必要があります。 簡単で速いのはMSのJScriptに用意された条件付きコンパイルの機能をアクティブにする@cc_on。 コメントアウトの中に@cc_onを記述すると、対応していないブラウザでもエラーとならないため、安全に使えます。 IEのみ処理したい場合は下記のような1行になります。 if (/*@cc_on!@*/false){ } IEの場合だけコメントアウトの否定演算子!が処理され、falseを否定して条件文が真となります。 document.allで判別するより65倍程速いそうなので、このスタイルが嫌いでなければ積極的に使っても良いのではないでしょうか。 @cc_on ステートメント (JavaScript)
![@cc_onを使ってブラウザ判別 - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
Browserhacks
What’s this? Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox. How to? Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targeted! Reminder! Please keep in mind using
[JS]ブラウザとそのバージョンだけでなくOSもデバイスもスクリーンサイズも判定し、CSSのセレクタで利用できる便利なスクリプト -CSS Browser Selector+
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+が判別するの
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
YouTube人気急上昇
あつ森 住民を探すのが大変？まだ写真をもらってない住民の写真をゲットできるまで終われませんがなかなか終われない？【ゆっくり実況】
[JS]CSSファイルに変更を加えてもリフレッシュ無しで反映させるスクリプト -CSSrefresh
CSSファイルに変更を加えてもページのリフレッシュ無しで変更を反映させるスクリプト（とブックマークレット）を紹介します。 CSSrefresh - automatically refresh CSS files [ad#ad-2] CSSrefreshは制作時に役立つスクリプトで、CSSファイルに変更を加えて保存すると、ページのリフレッシュ無しで変更を反映させます。 CSSrefreshの使い方 使い方は簡単で、2通りあります。 CSSrefreshをインクルードする 使用するページにCSSrefreshを外部スクリプトとして記述します。 <head> <link rel="stylesheet" type="text/css" href="css/site.css" /> <script type="text/javascript" src="js/cssrefresh.js"></sc
ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」:phpspot開発日誌
ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」 2011年08月30日- jQuery browserSizr | jQuery Plugins ブラウザサイズに応じてclass名を自動で付け替えてくれるjQueryプラグイン「browserSizr」。 スマートフォンや色々な解像度のPCがあるご時世ですが、ブラウザのサイズに応じてコンテナのclass名を付け替えてくれるjQueryプラグインのご紹介です。 クラス名が変わることによってデザインをCSSで自由に切り替えることが可能です。 スマートフォンにも対応しているようです。自分で作っちゃっても全く問題なさそうな機能ではありますが、スクリプティングがめんどくさいという方はこれを使っちゃったり参考にしてもよさそう。 1024ピクセル以上の場合(Chromeのデベロッパーツールでみて
嫌われまくりのIE6の現状と仲良く付き合う方法
2017年7月14日 Web関連記事, 便利ツール TwitterでWeb屋さんのつぶやきを見ていると「IE6のせいで…」「IE6さえなければ…」なんて声がよく聞こえてきます。産みの親からも見放されつつあるInternet Explorer 6。一体なぜここまで嫌われているのか？どれほどの人が涙を流してきたのか？そんなIE6と付き合っていく方法は？IE6にまつわる情報を簡単にまとめてみました。 ↑私が10年以上利用している会計ソフト！ IE6のシェア 2001年に世にリリースされたInternet Explorer 6。通称IE6。リリースされて10年たった今も色んな意味で話題のこのブラウザーを使っているユーザーは現在どれくらいいるのでしょう？ マイクロソフトが（！）IE6撲滅のため「Internet Explorer 6 Countdown」というサイトで世界中でIE6がどれくらい使われ
CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」:phpspot開発日誌
CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」 2009年01月22日- Selector Shell CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」。 ボックスにCSSを入力して「Test It」を押せば解釈されているCSSが分かります。 これを使えば、どんなCSSがちゃんと利いていて作用するかっていうのが分かりますね。 たとえば、次のようなCSSがサンプルで最初からはいってます。 Gecko, IE用や, Webkit 用などさまざまなハックを使っていますが、各種ブラウザで「Test It」してみれば何が利いているかが一目瞭然です /* Some example CSS */ body .class1 { border-color: black; } /* Gecko hack. *
IE6/IE7/IE8/IE9の共存まとめ
Windows 7やWindows VISTAでIE6/IE7/IE8/IE9を共存させる方法です。IE9はまだベータ段階ですが、周辺ツールも対応してきた頃なのでまとめてみました。 公式ブラウザの共存はできませんが、以下に示す方法で各バージョンの表示を確認することができます。最近はIETesterが主流になってきたようなので、そこを踏まえてます。 IETesterを利用＋IETesterでIE9を確認できるようにカスタマイズする 「Microsoft Expression Web SuperPreview for Windows Internet Explorer」と「Internet Explorer Platform Preview（「Internet Explorer 9 Platform Preview」）」を併用する IE9のブラウザーモードとドキュメントモードを利用する 以下、
Mozilla Firefox Extension @2ch
2ちゃんねるのスレッド「Firefoxの拡張機能皆さんなにつかってますか？」をまとめたサイトです。 Mozilla Firefoxはカスタマイズ性に非常に優れたブラウザです。 これから使おうとしている人、拡張を変えようと思っている人など役に立てれば幸いです。 Firefox 3.0 が公開されました。 このサイトは現在、Firefox 2 までの集計結果となってます。 旧バージョン→Firefox 2.0.0.14 拡張の入れ方などはまとめサイトでご覧になってください。 また、質問等は質問スレッドなどが良いと思われます。 2ちゃんねるスレッド Mozilla Firefox 拡張機能スレッド Part31 Firefoxの拡張機能皆さんなにつかってますか？Part3 Firefoxの拡張機能皆さんなにつかってますか？Part2 Firefoxの拡張機能皆さんなにつかってますか？ Firef
jQuery.supportでのブラウザ判別
chromeとsafariを対象とする場合 if(!jQuery.support.checkOn){ alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです'); } if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。なお、Android標準ブラウザ、iPhone / iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。 FirefoxとOperaを対象とする場合 if(jQuery.support.checkOn && jQuery.support.noCloneEvent){ alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです'
JavaScript による、IE 6/IE 7 の判別/判定について。 | 犬面犬。邦楽・洋楽・インスト音楽情報、批評その他。
JavaScript による、IE 6/IE 7 の判別/判定について。 2008/06/23 00:32 JavaScript による、IE 6/IE 7 の判別/判定について。 たった 1行で、Internet Explorer （以下 IE と略す） のヴァージョンが 6 か、7 以上かを判定する JavaScript 命令として、 if (typeof document.body.style.maxHeight != "undefined") { // IE 7.0 以上 または Gecko などモダンブラウザー } else { // IE 6.0 以下 } が有用だ、という記述が各所にある。ところが、これ、大きな弱点があることに最近気付いた。 body.style なので、当然、body タグが現れるまでは使えない。ところが、多くの JavaScript 命令は、head 内に
ブラウザ振分け（ブラウザ情報） - TAG index
<html> <head> <title>TAG index Webサイト</title> </head> <body> <script type="text/javascript"> <!-- document.write('<p>ブラウザの判別：'); if(navigator.userAgent.indexOf("Opera") != -1){ // 文字列に「Opera」が含まれている場合 document.write('あなたのブラウザは Opera ですね？'); } else if(navigator.userAgent.indexOf("MSIE") != -1){ // 文字列に「MSIE」が含まれている場合 document.write('あなたのブラウザは Internet Explorer ですね？'); } else if(navigator.userAgent.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2011年、スマフォ・デスクトップ用のクロスブラウザ確認ツールのまとめ
Firefox最強すぎワロタｗｗｗｗｗｗｗ : はれぞう
5509.me