みなさんは、ブラウザは主に何を使われていますか？

↓こちらは、このブログの一ヶ月間の読者の方々のブラウザTop10なのですが、まだまだ半数以上の方々がIEを使われているようですね。。（少し見づらくて申し訳ありません…。）

ちなみに、こちらがIEのバージョン情報です。6.0を使っている方が、かなり多いんですね。

こちらはFirefoxのバージョン。圧倒的に2.0の方が多いです。

っと、いろいろなバージョンのブラウザを使われているので、どのブラウザで見ても、なるべく崩れたりしないように、サイトを構築していきたいものです。

本日は、MacやWindowsで複数バージョンのブラウザを共存させて、簡単にブラウザチェックができる方法をまとめてみました。

Windows IE編

Multiple IE

こちらは、かなり有名なのでお使いの方も多いのではないでしょうか？IE3〜IE7までを共存させる事ができるソフトです。とっても便利ですね。。ずいぶん前にこのブログでもご紹介しました。インストール方法はこちらからどうぞ〜。

IETester

こちらは、先日話題になっていたツールですね。共存というと少し違うのかもしれませんが、IE8.0 betaも確認できるところが良いですよね。

Mac IE編

2005年12月31日にサポートを終了したIE for macなのですが、IE6.0と7.0をMacにインストールできてしまうソフトです。ちなみに、めちゃめちゃ重いです。。さらに、7.0は、もっと重いです。。表示も6.0のままだったり…日本語も、フォントをインストールしないと文字化けます。。っと、使い勝手は良くないです。。が、BootCampやVMwareなどを使わずに、IEをMacで確認できるのは、ちょっと便利かも。

ies4osx

実際にインストールしてみると↓こんな感じです。

Mac Firefox編

Macで複数のバージョンのFirefoxを同時に起動させる方法

今回は、試しにfirefox3.0b4をインストールしてみました。ファイルをダウンロードして、開くと↓のウインドウが開きます。アイコンをデスクトップにドラッグ&ドロップ。

保存された、Firefoxの名前を変更します。（そうしないと、今お使いのFirefoxに上書きされてしまいます。）今回は、firefox3.0b4と名前を変更しました。名前の変更が終わったら、Applicationsフォルダにドラッグ&ドロップ。これで、Firefoxが２つ目がインストールされます。その後、Mac OS Xのターミナルを起動して、

$ /Applications/Firefox3.0b4.app/Contents/MacOS/firefox -ProfileManager

入力してreturnキーを。（Firefox3.0b4.appの部分は、変更した名前を入力してください。）

すると、プロフィールを選択するウインドウが開きます。ここに、新規でプロフィールを追加して、Firefox3.0b4は、別のユーザーが開く設定にすると出来上がり〜！

同時に、Firefox2.0と3.0が起動しました！

Mac Safari編

Multi-Safari

こちらは、MacのPantherやTigerをお使いのユーザーの方用ですが。。Safariの複数のバージョンがインストールできます。

Safari 2.0.4 for Leopard

こちらは、Leopardをお使いの方にSafari 2.0.4がインストールできます。

実際にインストールしてみました。少し分かりにくいですが…Safari2.0.4と3.1が同時に起動しました〜。

みなさんも気をつけてお試しください。

わたくし仕事柄、写真や、イラスト等の画像を扱う事が多いです。

Firefoxのアドオンを使うと、いろいろ効率アップしたり、楽しげなツールがいろいろありますね。

本日は、画像にまつわるFirefoxのアドオンをいくつかご紹介します。

PicLens | Immersive Slideshows Across the Web

Google ImageやFlickrなどの画像をを”3D Wall”でかっこ良く見せてくれます。しかも、なかなか動きも軽快でGoogle Imageなどの画像検索をよくされる方にはおすすめです。

Picnik

人気の、オンライン画像編集サービスPicnikに画像を読み込ませて、簡単に編集スタートできます。

Gspace

Gmailをストレージ代わりに使えるツール。2GBまで使えます。

BatchDownload

ページ上に表示されている画像をまとめて、保存してくれます。

Screengrab!

スクリーンショットが簡単に撮れます。全体、見えてる部分だけ、選択範囲だけと選べるので便利ですね。

Pearl Crescent Page Saver

こちらも、スクリーンショットが簡単に撮れるツールです。わたくしはこちらを愛用してます。

Backgroundimage Saver

このサイトの背景かっこいいなぁ。。なんて思った事ないですか？背景画像を保存できます。

Image Toolbar

画像に対して、よく使う保存、コピー、プリントなどツールバーを表示してくれます。

Save Image in Folder

事前にいくつかフォルダを登録しておくと、簡単に画像をフォルダに振り分けられます。

PictureThis

テキストをハイライトして、ページ上にそのテキストのGoogle Image検索の結果を表示させる事ができます。

FxIF

EXIFデータを見る事ができます。どんなカメラで撮影されたのか気になる方に。（EXIFデータを登録されている画像にのみ有効です。）

AutoSlideshow – Slideshow Extension for Firefox

表示されている画像をスライドショーで見る事ができます。

Image Zoom

表示されている画像を拡大する事ができます。

Google Images Re-Linker

Google Image検索の検索結果ページから、フレームページを飛ばして、画像にリンクしてくれます。

以前、このブログでご紹介した『WEB制作時に便利な9つのFirefox拡張機能(Add-ons)』のように、firefoxでは、いろいろなアドオンをインストールして、お好みの機能を追加してfirefoxを使われている方が多いのではないでしょうか。。。

先日、Mashableさんの『30+ Firefox Add-ons for Web Developers & Designers』と言う記事で、ウェブ制作時に使えるfirefoxアドオンをまだまだ、たくさんご紹介されていました。。

いくつかかぶっているものもありましたが、この中から、実際に使ってみて、よさげなアドオンをいくつかピックアップしてご紹介。。

1. Aardvark

マウスオーバーして、そのCSSの属性、class、idが簡単に見れます。

2. CSSMate

開いているページのCSSを編集できます。。

3. IE Tab

開いているページをIEを立ち上げずに、firefox内でIEチェックできます。。

4. Load Time Analyzer

ページのロード時間を測定できます。。グラフ表示もできて分かりやすいですね。。

5. View Dependencies

ページの詳細情報が確認できます。

6. Clipmarks

開いているページの、画像や文章、動画ファイルなどをクリップできます。ちょっとしたメモ帳的な使い方ができそう。。。使い方は、↓の動画で見れます。。

まだまだ、たくさん使えるアドオンがいっぱいですね。。↓から続きをどうぞ～。

『30+ Firefox Add-ons for Web Developers & Designers』

Firefoxって、無料で公開されている拡張機能をインストールして自分好みに拡張できるところが便利ですよね。。

この拡張機能があるから、Firefoxを使ってるって方々も多いのでは？
一度使い始めて、その拡張機能に慣れてしまうと、
IE開いてるのに無意識のうちにその拡張機能を使おうとしてしまう。。。

っちゅうわけで、本日はわたくしが使っている便利な拡張機能の中からWEBサイト制作時に便利やなぁ～って思う、拡張機能9つをまとめてみました。。

1. Web Developer
とにかく、これは便利ですね。。CSS書いててレイアウト崩れたときなんかは、ブロック表示して確認してみたり。。CSSをリアルタイムで編集できたり。Web制作者にありがた～い機能を90種類以上も盛り込まれたプラグインです。。（日本語版があったので、そちらにリンク）

2. Firebug
こちらも有名な拡張機能ですね。JavaScript書く人にはかなり人気があるようですね。開いてるページを分析して、編集もできて、デバックまでしてくれる。。。かなり強力な拡張機能ですね。。

↓Firebugを使ってCSSを編集する方法（英語ですが。。）

3. ViewSourceWith
現在開いてるページや、選択した画像、ファイルなどを、あらかじめ、設定しておいたアプリケーションで開いてくれる。
たとえば、Photoshopを設定しておいて、アップされた写真を開いたり、htmlまるごとDreamweaverで開いたり。。結構便利っす。

4. Screen Grab
簡単にスクリーンショット撮れますねん。上から、ページ全体、見えてる部分、ウインドウ丸ごとのスクリーンショットがPNG形式保存できます。

5. Pearl Crescent Page Saver
こちらでも、同様に簡単にスクリーンショット撮れますねん。4か5どちらか選択でいいですね。。。
こちらは、オプション設定ができて、PNGかJPG形式を選択、ショートカットキーの設定、保存ファイル名の設定なんかができます。

6. Opera View
右クリックで、そのページをOperaで開いてくれます。ただそれだけ。。。単純だけど、あると便利。。

7. IE View
右クリックで、そのページをIEで開いてくれます。ただそれだけ。。。単純だけど、あると便利。。

8. MeasureIt
CSS書いてると、どうしてもサイズ測りたくなる。。そんな人に。。

9. ColorZilla
他人のサイト見てると、とにかく色が気になる。。。そんな人に。。

まだまだ、たくさん便利な拡張機能あるとは思いますが。。。本日はこの辺で。。

今日、大変興味深い記事を発見したのでメモ。

その名も「Speed Up Firefox web browser」

元記事の筆者が言うには３－３０倍Firefoxがスピードアップするということですが。。

っちゅうわけで、日本語訳しながら、早速やってみました。。

まず、Firefoxを立ち上げて。。↓のようにロケーションバーのところにabout:configってコピーしてenterキーを。。。そしたら、なにやら色々出てきます。。

下にfilterってボックスがあるので、そこにnetwork.http.pipeliningってコピーしてenterキーを

絞り込まれた、network.http.pipeliningを選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

次に、またfilterボックスにnetwork.http.pipelining.maxrequestsってコピーしてenterキーを

絞り込まれた、network.http.pipelining.maxrequestsを選択して、右クリックで「modify」を選択して、Valueの4の部分を8に変更。

またfilterボックスにnetwork.http.proxy.pipeliningってコピーしてenterキーを

絞り込まれた、network.http.proxy.pipeliningを選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

またfilterボックスにnetwork.dns.disableIPv6ってコピーしてenterキーを

絞り込まれた、network.dns.disableIPv6を選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

またfilterボックスにplugin.expose_full_pathってコピーしてenterキーを

絞り込まれた、plugin.expose_full_pathを選択して、右クリックで「toggle」を選択して、Valueのfalseの部分をtrueに変更。

次に、どの項目でも良いので選択して、右クリックで「new」を選択して、「integer」を選択。

「integer」を選択しすると、↓のようなボックスが出てきます。

nglayout.initialpaint.delayと入力して、「OK」ボタンをクリック

「0」を入力して、「OK」ボタンをクリック。

filterで、nglayout.initialpaint.delayと入力して、enterを押して、nglayout.initialpaint.delayが見つかればOK

また、どの項目でも良いので選択して、右クリックで「new」を選択して、「integer」を選択。

「integer」を選択しすると、↓のようなボックスが出てきます。

content.notify.backoffcountと入力して、「OK」ボタンをクリック

「5」と入力して、「OK」ボタンをクリック。

filterで、content.notify.backoffcountと入力して、enterを押して、content.notify.backoffcountが見つかればOK

また、どの項目でも良いので選択して、右クリックで「new」を選択して、「integer」を選択。

「integer」を選択しすると、↓のようなボックスが出てきます。

ui.submenuDelayと入力して、「OK」ボタンをクリック

「0」と入力して、「OK」ボタンをクリック。

filterで、ui.submenuDelayと入力して、enterを押して、ui.submenuDelayが見つかればOK

一通り設定が終わったら、いったんFirefoxを閉じて起動しなおしてみます。。う。。。微妙に早くなったかな。。気の持ちよう？？いや、早くなったはず。。。うん。確かに早くなった気がする。。。

特に、画像の多いページを読み込むときには早くなったような気がします。。。
もちろん、ネット接続スピードが速くなるわけではないですが。。

どなたか、詳しい解説おねがいします～！！！（ひとまかせ。。。ごめんなさい。）

デザインblogランキング

htmlもCSSもきれいに書いてるつもりでも、最後にブラウザチェックしてみるとブラウザごとに見え方が微妙に違って
最後の調整で意外と時間をかかってしまうことがあるんですよねぇ。。。

Internet Explorer6.0とFirefoxでは、きれいに見えるのに、Internet Explorer7.0でみるとズレてた・・・
Safariではズレズレ。。。

しかも、修正していくにつれてどんどんズレていく。。。こっちのブラウザにあわせたら、あっちのブラウザでズレ。。
なんて経験ございません？

っちゅうわけで、今回はブラウザごとにCSSを書く方法をご紹介。

例えば”test”って名前付けたクラスにCSSを書くと。。。

.test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑なんて、書きますよねぇ。。

こいつを。。。

1. Internet Explorer6.0に反映させるCSS

* html .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Internet Explorer6.0に反映させられます。

2. Internet Explorer7.0に反映させるCSS

*:first-child+html .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Internet Explorer7.0にだけ反映させられます。

3. Firefoxに反映させるCSS

html>body .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Firefoxに反映させられます。

4. Safari & Operaに反映させるCSS

html:first-child .test {
margin: 0;
padding: 0;
font-size: 12px;
color: #333;
}

↑って書けば、Safari & Operaに反映させられます。

このCSSを全部書けばそれぞれのブラウザごとにだけ、CSSが反映するので、ブラウザごとに修正できますね～。