Macアプリ

Mac版Firefoxをインストール。Webデザインのチェック用にアドオン追加とやってみたかった事

更新日:

@Mori2ndです。ブログのデザインをカスタマイズしたりすると、ちゃんと表示されているかどうか気になってくるものですね。

設定がうまくいってないとブラウザによっては表示が崩れてしまったりもあるので、そういった意味でも複数のブラウザでチェックしたほうがいいと思いました。

Firefoxはアドオンでいろいろな機能が追加できて、人気のあるブラウザ。

こちらを利用しているユーザーも多いでしょうし、何よりこのブラウザの機能を使ってやってみたかった事があるのです。

スポンサードリンク

Webデザインのチェックに欠かせないアドオンを追加

まずはFirefoxをインストールしてから、こちらのアドオンを追加しました。

Firebug

Firebug :: Add-ons for Firefox
あなたはあらゆる Web ページの CSS、HTML、及び JavaScript をリアルタイムに編集、デバッグ、またはモニタすることが出来ます。

WebページのHTMLやCSSを確認できて、それをリアルタイムに編集できるアドオン。

幅や色を調整したり、ボーダーをつけてみたりとちょっとした確認には持ってこいです。

ここで調整した分を本番環境に反映して仕上げていってます。

気になるブログのデザイン確認にも使えて便利ですよ。

Google Chrome版もありますが、細かい動きが違うようでFirefoxのほうが使いやすい気がしました。

userAgentUpdater

userAgentUpdater :: Add-ons for Firefox

ユーザーエージェントを変更できるアドオン。

当ブログではWPtouchというプラグインを使っていて、iPhoneやAndroidなどスマホでみたときの表示確認用に入れました。

ユーザーエージェントの変更とFirebugを利用したら、WPtouchのカスタマイズがすこぶる捗りましたよ。

ちなみにサポートしているユーザーエージェントは以下になります。

Supported User-Agents :

  • Internet Explorer 6/7/8/9/10
  • Nokia/Symbian

    • S60 3rd Edition
    • S60 3rd Edition Feature Pack 1
    • S60 3rd Edition Feature Pack 2
    • S60 5th Edition
    • Symbian^3
    • Symbian S40
  • iOS/iPhone 4
  • Android 2.2
  • Google Chrome 15.0
  • Safari 5.0.5
  • Opera 12.0
  • Opera mini 9.80

 

Webデザインのチェックが目的なので、いまのところアドオンはこれくらいです。

要素の調査の3D表示が凄そう!

そしてもう一つやってみたかった事があるんです!

[Mac]Firefoxの要素の調査の3D表示が凄い。凄いからとりあえずピラミッド作ってみた。Mac限定だけどね。じゃなかった ※追記アリ。 | こんちくわのぶろぐ

こんちくわさんが記事にしていた、Firefoxの3D表示。この「要素の調査」で使える3D表示が凄そうで、しかもこの機能でピラミッドを作ったりしてるのを見て、やってみたくなりました(笑)

この記事の公開時にこんちくわさんとやり取りしてから、すこしたってしまいましたが、挑戦してみようと思ってます。うまくできるかな〜。

おわりに

これで、MacのなかにはSafari、Chrome、Firefoxとブラウザが3つ入りました。

それぞれいいところがあるので、長所を使い分けて活用していきたいですね!

次世代ブラウザ Firefox 高速・安全・カスタマイズ自在な無料ブラウザ

スポンサードリンク

ピックアップ記事

1

iPhoneで格安SIMを使って月額料金を節約したい!でも敷居が高くてわからない。そんな風に考えている人はきっと多いはず。ここではiPhoneで格安SIMを利用するまでの手順・乗り換え方法や注意点など、詳しくご紹介しています。

2

機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

3

AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD(Power Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

4

パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5

快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。

-Macアプリ
-,

Copyright© ディライトモード , 2019 All Rights Reserved.