米が好き » WEBブラウザ

【WordPress】管理画面でCSS3が使われていた

くーさん — Sat, 22 May 2010 16:50:26 +0000

凄い今更なのかもしれませんが、WordPressの管理画面でCSS3が使われている事を知りました。
『border-radius』と言う、ボーダーを角丸にするプロパティだけ知りましたが、何気に他にも使われていたりするかもしれません。

現在の最新版がベータを除き 2.9.2。
もしかしたら 2.9 の時から使われていたのかもしれません。
IEを無視するその姿勢、大好きです。ｗ

現在主流となっている5つのブラウザで見てみました。
以下に貼っている画像は、管理画面の左サイドのメニュー部分です。

Firefox 3.5.9	Opera 10.53	Google Chrome 4.1

Safari 4.0.5	Safari (iPhone)	Internet Explorer 6.0

さすがだIE、ちゃんと最後でオチてくれる。
iPhoneですら対応してるってのに、IE8になっても未対応なんて。
完全にみんなと違う方向向いてるだろIE。

ちなみに『Opera 9.**』もCSS3未対応です。
現在は 10.53 の最新版が出ているので、Opera使いの方はバージョンアップした方が良いかもです。

全世界のWEBデザイナーがIE6止めれば、シェアは10％切ると思うんですが。
しかし、私の勤めるスイミングは未だにIE6なので、勝手にバージョンアップしておこうかしら。

IE6使用者にIE8にバージョンアップしようぜと促すスクリプト

くーさん — Wed, 17 Jun 2009 20:24:20 +0000

まだまだInternet Explorer 6を使っている人は沢山います。
せっかく最新のIE8が出てるんだから、バージョンアップしましょうよ！（建前）

IE6より全然速いんですよ！（建前）

IE6だと、WEBサイトのレイアウトが崩れたりして綺麗に見れないんですよ！（半分本音）

いちいちIE6の表示チェックが鬱陶しいんですよ！（超本音）

そんな頑なまでにIE6にこだわる（？）人向けに開発されたJavaScript。
僅かなコードを入力するだけでサイトの左下に『クマー』が出て、IE8へのバージョンアップを促してくれます。
私も入れよっかなぁ。
ニコニコ動画のRSS、やっぱIE6だと崩れてるみたいだし。

左下のクマをクリックすると…。

しかしMSのIE8じゃなく、何故かフェンリル版。

BearFactory
インターネットエクスプローラー 8 推進スクリプト配布ページ

『safari 4』正式版がついに登場

くーさん — Tue, 09 Jun 2009 14:45:28 +0000

ついに『safari 4』の正式版が登場し、ダウンロード可能となりました。
いやー、ベータから長かった（？）ですね。
約3ヶ月半振りですか。

私の懸念していたタブはGoogle Chromeみたいじゃなく、元に戻ったようです。
良かった良かった。（私は下タブ表示が好き）
しかし、全体のデザインが変わりました。
以前はWindowsもMacも同じようなデザインだったのに、Windows版はまさに『Windows版！』ってな感じになっています。（外枠が青い）

これじゃぁ、safariであってsafariでないような気がするのは私だけでしょうか。
以前のデザインはコチラ。

safariで一番使える機能は『Web Inspector』だと思うんですが、これは作り手からの目線だからでしょうか。
簡単に言えば、ソースをCSS込みで見れるんです。
トラブった時に良く使います。

デフォルトでは使えないので、以下の手順を踏みます。
・設定 – 詳細 – 『メニューバーに“開発”メニューを表示』にチェックを入れる。
・ソースを見たいサイトの上で右クリック『要素の詳細を表示』
以上で、見る事が出来ます。
『ツールバーをカスタマイズ』に『Web インスペクタ』も追加されます。

後は『フォーム項目の自動入力』とかですかね。
メニューバーはやっぱり表示させてた方が使いやすいと思います。

アップル
Safari – Safari 4の登場です。 – 目の前にひろがる新しいウェブの世界。

リンクをクリックした時に出る破線を消す方法

くーさん — Sat, 09 May 2009 06:16:24 +0000

リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。
Opera、Safari、Google Chromeはデフォルトで出ません。
これが出るのは、IE、Sleipnir、Firefox、Lunascape（WebKit時以外）です。

デザイン的にも、これを出させない為にCSSを使ってみましょう。

話しはそれますが、画像の枠線を消すのは簡単ですよね。
CSSに以下のコードを付けるだけです。

CSS

img {
  border: none;
}

これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。

で、問題のリンク破線を消す方法です。
通常、以下の様に破線が出ます。（HOMEをクリックした時）

この破線を消すのは、CSSに以下のコードを書きます。

CSS

a:focus {
  outline: none;
}

はっはっはー、超簡単だぜー！
・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。
ちなみにSleipnirやLunascape（WebKit以外）にも効きません。
なん・・・だと・・・？

少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。

HTML

onFocus="if(this.blur)this.blur()">リンク

一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。
でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。

Firefoxのウィンドウサイズを簡単にリサイズする方法

くーさん — Wed, 15 Apr 2009 20:02:14 +0000

WEBサイトを決まった大きさでキャプチャーする時に便利な方法です。
アドオンやグリモン等の力を借りずに、簡単にFirefoxのウィンドウサイズを任意の大きさに変更出来ます。

Firefoxの『ブックマークの管理』画面を表示させます。
Windowsだと、『Ctrl + Shift + B』で開きます。

右クリックで『新しいブックマーク』をクリック。
URLに以下を入力。

javascript:window.resizeTo(横,縦);

『横』に横の数値を入力。
『縦』に縦の数値を入力。

例

javascript:window.resizeTo(1280,1050);

名前等は適当でOKです。
追加したブックマークを開こうとすると、現在開いているFirefoxのウィンドウサイズが指定したサイズにリサイズされます。
よくWEBサイトをキャプチャーする人には便利な機能ですね。
頻繁に使うのであれば、ブックマークツールバーに入れておくと尚便利。

以前に『【Free Soft】ウィンドウサイズを指定サイズで変更』でSizerを紹介しましたが、Firefoxだけをリサイズするのならこっちの方が楽ですね。

Firefox.next なる物が開発中

くーさん — Tue, 07 Apr 2009 16:02:00 +0000

現時点でのFirefoxの最新バージョンは3.0.8だが、3.5より先の3.6、Firefox.nextなる物が開発中との事。
3.6 ＝ Firefox.next

以下はそんな開発で目指されているもの。

・　起動時、新規タブ作成、ユーザインタフェースインタラクションなどユーザが体感できるパフォーマンスの改善
・　パーソナライズやカスタマイズ関連事項(開発、探索、インストール、管理)の改善や、ユーザ体験や操作履歴、ユーザの好みなどをベースにしたカスタム機能の提供
・　ユーザの実現したいと考えているタスクをベースにしたナビゲーション機能の実現
・　WebアプリケーションとOSアプリケーションの融合
・　ルック&フィール(Windows Aero Peek、Windows Aero Glass)やシステムサービス(OSX Dictionary、AppleScript、Keychain)などを含めたOSとのさらなる融合

軽量テーマの実装、再起動することなく使えるアドオンの実現、パーソナライズプロジェクトの統合、最新のGoogle ChromeやSafariで実現されている機能と類似した機能の取り込みなどが目指されているようだ。

マイコミジャーナルより引用

再起動しなくてアドオン追加は良いですね。
あと、アドオン100個ぐらい入れてもパフォーマンス的に何ら問題ないようにして欲しいです。
入れすぎると重くなると言われているので、極最小限に抑えているんです。
（現在15個）

マイコミジャーナル
Firefox.next – Firefox 3.6計画発表

『safari 4』がMac、Win版同時公開

くーさん — Wed, 25 Feb 2009 17:38:34 +0000

『Safari 4（BETA）』がMac版とWindows版を同時公開しました。
早速ダウンロードしたものの、現在は残念ながら英語版だけのようです。

実際触ってみて、Safari 3よりかは格段に表示速度が速くなっています。
今までSafariは重いってのが頭の中にありましたが、これは中々。

しかし、Windows版はデザインが変わったようで、これは非常に残念としか言えません。
Safariはあのデザインが良かったのに、何故変えたんですかね。
真に・・・、非常に・・・、残念でありません・・・。
正式版では元に戻っている事を切に願います。

　Safari 4は、新しいJavaScriptエンジン「Nitro」の採用により、現行のSafari 3と比べ、JavaScriptの実行速度を4.2倍高速化したという。SunSpider JavaScript Performanceテストによれば、Internet Explorer 7（IE 7）との比較では最大30倍、対Firefox 3では約3倍の高速化を実現しているという。
　VeriTestのiBenchバージョン5.0を初期設定のまま実行したHTMLベンチマークテストでも、HTMLページの読み込み速度がIE 7の3倍以上、Firefox 3の約3倍を達成しているという。またWebブラウザがWeb標準に準拠しているかどうかを測定するテストAcid3で満点を獲得した。

ITmediaより抜粋

起動画面などは以下。

旧バージョン、3.2.1 (525.27.1)

新バージョン、4 Public Beta (528.16)

Hide all bookmarks

Show Top Sites

アップル
Safari – ダウンロード – MacとWindows PCのための世界一高速で革新的なブラウザをダウンロード

ITmedia News
Apple、“4倍速い”「Safari 4」のパブリックβ版を提供開始

Impress Watch Headline
アップル、Safari 4のパブリックβ公開

builder by ZDNet Japan
「Safari 4」を速攻ベンチマーク–JavaScriptの実行速度はChromeに迫る
クィックレビュー：Safari 4のここに注目、ここが気になる
Safari4のタブで気になったこと

ついに来た、Mac版Google Chrome

くーさん — Mon, 16 Feb 2009 15:28:54 +0000

Windows版は既に正式版としてリリースしていますが、Mac版は少しずつ前進してるようです。
Windows版が出来たから、Mac版も簡単・・・てな訳にはいかないでしょうね。
Windows版のアドオン同様、Mac版のChromeも楽しみに待ちたいと思います。

6月末までにリリースするって言ってますが、6/7だったら私への誕生日プレゼントだ！
・・・等と、勝手に脳内変換したいと思うんですが。ｗ

Google Chrome

CNET Japan
グーグル、Mac版「Google Chrome」で前進–スクリーンショットが公開される:マーケティング

Adobe CTOが語るAIRの未来

くーさん — Fri, 13 Feb 2009 14:11:15 +0000

AdobeのCTO（最高技術責任者：Wikipedia）がAIRによるアプリケーションの試作品を何点か公開したらしいです。

また、Adobeはブラウザも作ってたけど止めたとか。
確かにGoogle Chromeも出てきた今、WEBブラウザ界に参戦するのは得策じゃないかもしれませんね。
しかし、AdobeのWEBブラウザって、めちゃめちゃ興味あるんですけど。

ASCII.jp
「ブラウザー作るのはやめた」アドビCTOが語るAIRの未来

意外と簡単に作れる『favicon』

くーさん — Wed, 11 Feb 2009 15:07:06 +0000

WEBサイトのアドレスバーの横などに表示されるfavicon（ファビコン）。
このfaviconを作れるサイトとかツールとか色々ありますが、そんなの使わなくても意外と簡単に作れたりします。

ただ、拡張子を変えれば良いだけ。

『favicon.jpg』、『favicon.gif』、『favicon.png』等を、『favicon.ico』に変えれば良いってなだけの話しです。
実際私もそうしてます。
以下は、例によって7つのブラウザで表示チェックした結果。

▼アホアホなInternet Explorer 6.0

IE6は、超メジャーなサイトですら表示してくれません。

▼Sleipnir 2.8.4

IEをバージョンアップさせない限り、Sleipnirもダメですね。
でも表示される事もある…。
何がどうなっているのかは分かりません。

▼Firefox 3.0.6

▼Opera 9.63

▼Safari 3.2.1

▼Lunascape5 Beta

Lunascapeは縮小されずに、そのままの大きさで表示されます。
↓ 実寸大（32×32）

▼Google Chrome 1.0.154.48

Chromeはアドレスバーの横には表示されず、タブにだけ表示されます。

勿論この方法が正しいとは言いません。
只、「出来たからやった」ってなだけです。ｗ
本当は ICO としてちゃんと作った方が良いんでしょうね。

でもIE以外はちゃんと表示されてるからいいじゃない！ｗｗ

IE6 で画像に『float』を使うと表示されない件

くーさん — Tue, 10 Feb 2009 15:08:14 +0000

IE6の人は分からないと思いますが、特定の記事以外は記事内の右上に画像があります。
IE6で表示されないって事は、今日初めて知りました。
キャッシュを消しても無駄でした。
キャッシュ消して、インターネットオプションを閉じると一瞬だけ見えるんですが、その後真っ白になります。
WordPressの仕様かとも思いましたが、IE以外のブラウザではちゃんと表示されるんですよね。
以下はIE含め、いつもの7つのブラウザで見た結果です。

▼問題の『Internet Explorer 6.0』。

本来ならば、赤で囲った場所に画像が表示されます。
IE7以降であれば表示されているようです。

▼IEのエンジンを使っている『Sleipnir 2.8.4』でも同じく表示されません。

上記2つ以外のブラウザはちゃんと表示されています。
▼Firefox 3.0.5

▼Opera 9.63

▼Safari 3.2.1

▼Lunascape5 Beta

▼Google Chrome 1.0.154.48

・・・と、7つのメジャーブラウザで試してみました。
ここまで書いてて問題解決（？）しました。
この右上に表示させている画像、CSSで『float:right;』と指定しています。
これを外すとIE6でも表示されました。
画像タグに『align=right』だったら問題ないんだろうけど、画像に『float』って普通に使うよねー？

さぁ、問題点は分かったんですが・・・、今更タグを直すのも面倒なのでこのままでいきたいと思います。

IE6のアホーーー！！

IE6以下は撲滅してくれないですかね。
（仕事上でも色々問題あるんですよ・・・。）

『Firefox』と『Opera』の戦いは終わらない

くーさん — Sat, 31 Jan 2009 13:41:21 +0000

所詮は相成れぬ仲なんですね。ｗ

どっちも良いのは分かりますが、ユーザーが好きな方を使えば良いんではないでしょうか。

Firefox　／　Opera

Browser.js
N32:FirefoxとOperaで”「近頃の若い者は…」と紀元前エジプトの古文書に書いてあった件”をやってみた

Firefox3をUSBメモリで持ち歩く

くーさん — Fri, 30 Jan 2009 19:43:11 +0000

自分のではないPCでネットをする事があります。
今まで一々履歴を消していたんですが、面倒になってきたので前々から気になっていた『Mozilla Firefox, Portable Edition』をインストしてみました。
日本語表示にする方法は少々面倒なようです…。

１本体を手に入れる。
以下のサイトで、『Firefox, Portable Edition』本体をダウンロードします。

PortableApps.com
Mozilla Firefox, Portable Edition

▼サイト上部にあるでかいボタンをクリック。

２日本語化ファイルを手に入れる。
以下のサイトで、日本語化ファイルを手に入れます。

Index of /pub/mozilla.org/firefox/releases

ディレクトリの中身が一覧表示されるので、『該当するFirefoxのバージョン/』→『Win32/』→『xpi/』→『ja.xpi』を右クリックしてダウンロード。

３本体起動。
※PCのFirefoxとPortableは同時起動できません。
ダウンロードされた『Firefox_Portable_*.*.*_en-us.paf.exe』（*はバージョンNo）をダブルクリックして、適当なフォルダにインスト。
インスト後『FirefoxPortable.exe』から本体を起動します。

『Tool』→『add-ons』を選択して、表示された小窓の中に2でダウンロードした『ja.xpi』をドラッグ＆ドロップ。
インストするかどうか聞かれるので『Install Now』をクリック。

アドオンとしてインストされます。

言語ファイルがアドオン扱いになるのも、どーかと思いますが…。

４最終日本語化設定。
インストしただけでは日本語にはなりません。
普通では触らない箇所の設定がいります。
・　アドレスバーに『about:config』と入力します。
・　画面上部（タブの下）にフィルターと出てくるので、そこのボックスに『general.useragent.locale』と入力します。
　　該当項目が出たら、設定の箇所をダブルクリックして『en-US』を『ja-JP』に変更します。
・　もう一度フィルターボックスに『intl.accept_languages』と入力します。
・　該当項目が出たら、設定の箇所を『en-us, en』から『ja,en-us, en』に変更します。

これでFirefoxを再起動すれば見事日本語化になっていると思います。

５PC本体のブックマークを同期させる。
簡単に言うと、PCのブックマークをエクスポート、Portableにインポートすればよいだけです。
・　PCのFirefoxの『履歴とブックマークの管理』画面を表示する。
・　『インポートとバックアップ』から『バックアップ』をクリック。
・　適当な場所にバックアップファイルを置きます。
　　ファイル名：『ブックマーク ****-**-**.json』（*は年月日）
・　PCのFirefoxを終了させ、Portableを開きます。
・　同じようにブックマークの管理画面を出し、今度は『復元』→『ファイルを選択』をクリック。
　　先ほどエクスポートしたファイルを選択して『開く』をクリック。

これで、現段階のブックマーク並びに履歴が同期されます。

アドオンの同期は出来ず、1個1個手作業になるのかな・・・。
各設定が終わったら、Portableのフォルダ毎USBメモリに放り込むだけですね。

豪放磊落な備忘録
Portable Firefox 3系の日本語化 3.0b2,3.0b3,3.0b4,3.0b5,3.01も対応してます

Googleのfaviconが変更されたらしい

くーさん — Sat, 10 Jan 2009 14:12:01 +0000

Webサイト持ってる人なら、ちょっとは気にした事があるであろうfavicon（ファビコン）。

この間インストしたメジャーなWebブラウザでは、IE6は表示されません。
32×32でアップすると、Lunascapeはそのままの大きさで表示されます。
Sleipnir、Safari、Firefox、Opera、Chromeはちゃんと正常に表示されます。

個人サイトでは超自己満なファビコン。
Googleがまた（？）変更したようです。

残念ながら日本（google.co.jp）はまだのようで、本場（google.com）だけのようです。
まぁ、いずれは日本も変更されるんでしょうけど。
Google.co.jp

Google.com

追記
2009/1/11　4:55
日本（Google.co.jp）も変更されてました。

TechCrunch Japanese
Googleがfavicon変更。取りあえずは…カラフル

Webブラウザは一体どれが良いのか

くーさん — Sun, 04 Jan 2009 19:48:28 +0000

使い方も使い勝手も人それぞれだと思いますが、メジャーなWebブラウザ7つを試してみました。

試すといっても数値を出したり大掛かりなものではなく私個人の体感的なものですので、これも人それぞれだしPCによっても異なると思います。

私が試した事は以下。
(1) 一度このサイトを開き標準ページに設定した後閉じ、再度開き直した時の体感速度。（キャッシュ対策）
(2) 使えるフォント。（True TypeとOpen Type）
(3) JavaScriptの体感速度。（拾いもの画像で検証）
(4) お気に入りを開く際、別タブで開けるかどうか。

では行ってみましょう。

右側のサムネイル画像をクリックすると、別ウィンドウで960×800の標準サイズで開きます。

Internet Explorer 6.0
Windows標準ブラウザ。
IE7になってタブ機能が付くが、オマケ程度の出来。
現在は8 Betaまでが公開されている。
8になってアドオン対応。
(1) 普通。　（以降のブラウザはIEをベースにした感想）
(2) True Typeのみ。
(3) 普通。
(4) 6はタブ機能が無いので、未検証。

Sleipnir 2.8.4
独自エンジンではなくIEを元にしたタブ型Webブラウザ。
機能満載でカスタマイズが色々出来ます。
IEを元にしてるので、表示など色々IEのバージョンによって左右される面あり。
スナップショットを撮れるプラグイン『SnapCrab』は非常に重宝する。
(1) ちょい速い。
(2) True Typeのみ。
(3) 普通。（IEよりは少し速い）
(4) 設定あり。

Safari 3.2.1
Macの標準ブラウザ。
Windows版もあるので、Windowsユーザーも使用可能。
閉じる等のボタン位置こそ右上だけど、その他はMac版のまんま。（Macのボタン位置は左上）
(1) IEよりも遅い。
(2) True Typeのみ。（Mac標準のヒラギノが使えないってのはどういう了見だ？）
(3) まあまあ速い。
(4) 設定なし。（target=”_blank” で開くと新しいウィンドウが開く）

Firefox 3.0.5
独自エンジンのタブ式Webブラウザ。
アドオンと呼ばれる追加機能によって、自分好みのブラウザへカスタマイズ出来る。
『AutoAuth』と『Tab Mix Plus』は必須アドオン。
(1) 速い。
(2) True Type、Open Type両方可能。
(3) 速い。
(4) アドオン追加で設定あり。

Opera 9.63
Firefoxと二分する人気タブ式Webブラウザ。
表示速度はFirefoxより速いと感じました。
只、追加機能が無いのがネックか。
(1) 非常に速い。
(2) True Type、Open Type両方可能。（サイトが指定しているとそちらが優先される）
(3) 速い。
(4) 設定なし。

Lunascape5 Beta
既定のエンジンを『Trident(IE)』『Gecko』『WebKit』の3つから選べるタブ式Webブラウザ。
Sleipnir並に設定機能がてんこ盛りだけど、独自エンジンじゃない以上他のWebブラウザかSleipnirを使った方が…。
世界最速と掲げていますが、それほど…。
(1) 遅い。
(2) True Type、Open Type両方可能。（ページのフォント指定ってどこで設定するの？）
(3) 『Trident(IE)』は普通だけど、『WebKit』はめちゃくちゃ遅い。
(4) 設定あり。

Google Chrome 1.0.154.36
ついに正式版になったGoogle開発のタブ式Webブラウザ。
現在は少ないオプション機能ですが、将来的にはアドオン対応になる様子。
アドオン次第ではFirefoxを抜く可能性ありか。
(1) 非常に速い。
(2) True Typeのみ。
(3) 遅い。
(4) 設定なし。

『Internet Explorer』、『Sleipnir』、『Firefox』以外はちょこっと触った程度なので、間違っていたら指摘してください。
超個人的な好みから言いますと、
Firefox ＞ Sleipnir ＞ Opera ＞ Chrome ＞ Safari ＞ Lunascape ＞ IE　でしょうか。
まだまだ私の中のFirefoxの天下はそうそう崩れそうにありません。

TheBrowsers
IEコンポーネントやGECKOエンジンを使用したおすすめタブブラウザ集