「ブラウザ」カテゴリーアーカイブ

QRコードをGoogle Chromeで簡単に作成する方法

WebブラウザのGoogle Chromeを利用するとQRコードが簡単に作成出来るので作成手順をメモしておきます。

Google ChromeでQRコードを簡単に作成する方法

  1. QRコードを作成したいサイトをChromeで開きます。
  2. サイトが表示されたら右クリックして「このページのQR コードを作成」を選択します。
  3. QRコードが表示されるのでURLに問題なければそのまま「ダウンロード」ボタンを選択するとpng形式でQRコードが保存されます。
  4. 保存したpngファイルを開くと以下の様にQRコードが保存されているのが確認出来ます。

ブラウザ表示でのF5とctrl+F5の違い

Web系の開発していると画面表示確認する際に、「cssやjsは変更したのに画面を表示してみると反映されていない」という事を経験した方は少なくないと思います。
こういう場合はまず、F5もしくはctrl+F5を押下して画面を再表示(リロード)確認すると思いますが、そもそも「F5単独」押下と「ctrl+F5同時」押下では何が違うんだろう?という事についてメモしておきます。

F5単独押下時のリロード

  • ブラウザでキャッシュされている場合、キャッシュを利用して画面を再表示します。

Ctrl+F5同時押下時のリロード

  • ブラウザのキャッシュを利用せずにサーバーにある最新の情報を読み込んで画面を再表示します。
  • スーパーリロードとも呼びます
  • ブラウザによって、Ctrl + F5以外でもスーパーリロードは可能です。

ブラウザ別のスーパーリロード方法

<Google Chrome、Microsoft Edge>

  • Ctrl + F5
  • Shift + F5
  • Ctrl + Shift + R
  • Ctrl + 更新ボタン
  • Shift + 更新ボタン

<FireFox>

  • Ctrl + F5
  • Ctrl + Shift + R
  • Shift + 更新ボタン

<Opera>

  • F5
  • Ctrl + R
  • 更新ボタン

<Safari>

  • Shift + 更新ボタン

ブラウザの更新ボタンとは

上記で説明している「更新ボタン」ですが、以下の様にブラウザのアドレスバー付近に表示されている以下のような赤枠内のボタンのことを「更新ボタン」と記載しております。

IE11にのみCSSを適用させる方法

業務でIE8には対応していた画面をIE11にも対応させる必要が出てきたのでIE11にのみスタイルシートを適用させる方法をご紹介します。
IE11にのみCSSを適用させたい場合はCSSハックという手法を用いると便利です。

IE11にのみ適用させるCSSハックの記述方法

IE10以下に適用させるCSSハックの記述方法

    IE10以下に適用させたい場合は「*::-ms-backdrop,」の指定を外します。

実行サンプル

    ie11でこのページを表示した場合のみ、この文章がフォントサイズが24pxで赤字で表示されます

IEに互換表示をさせない「X-UA-Compatible」の指定方法

Web開発者泣かせでお馴染みのIEにはIEの過去バージョンモードで表示出来る互換表示機能があります。
しかし互換表示することで表示が崩れてしまう場合、デフォルトでは互換表示させたくないケースが多々あります。
そういう場合にはmetaタグで「X-UA-Compatible」を指定する事で互換モードではなく、使用しているIEの各バージョンの標準モードでレンダリングさせる事が可能となります。

使用しているIEの各バージョン毎でレンダリング

    使用しているIEの各バージョン毎でレンダリングさせたい場合は「X-UA-Compatible」へ「IE=edge」を指定します。

IEのバージョン固定でレンダリング

    特定のIEのバージョン固定でレンダリングさせたい場合は「X-UA-Compatible」へIE8なら「IE=8」、IE11なら「IE=11」を指定します。
    例えば「IE=8」を指定した場合、ブラウザのバージョンはIE11でもIE8の互換モードでレンダリングされます。

新ブラウザ「Vivaldi」が登場

Opera(ノルウェーのソフトウェア会社)のCEOだったテッツナー(Jon von Tetzchner)氏が、2010年にCEOを退任してからvivaldi.comを立ち上げ、新ブラウザVivaldiを発表しました。
対応OSは、Windows・ Mac OS X・ Linux deb (Ubuntu/Debian)・ Linux rpm (Fedora)。
コンセプトは、「A new browser for our friends」。

プレビュー版を試用してみると直感的に使いやすい仕上がりとなっています。
画面の左側に操作アイコンが並べられていて、左最上段にしおりマークがブックマークアイコンとなっています。
日本語版では、技術・ゲーム・買い物・スポーツ等のカテゴリが登録されていて、メジャーなサイトが予め登録されています。
左下の設定アイコンで行うブラウザの設定がIEやFirefoxと比べて使いやすくなっています。
例えば、タブの表示位置やショートカットの設定です。
「宇宙一高速なWebブラウザ」を目指すとテッツナー氏が公言しています。
現在は、プレビュー版(v.1.0.83.38 – Technical Preview)ですので、動作が少しもたついていますが、これからが楽しみな新ブラウザです。

Vivaldi(プレビュー版)のダウンロードとインストール手順

  1. 以下サイトへアクセスし、画面中央にある「DOWNLOAD TECH PREVIEW」を選択してインストーラファイルをダウンロードします。
    https://vivaldi.com/
  2. ダウンロードした「Vivaldi_TP_1.0.83.38.exe」をダブルクリックしてインストーラを起動します。
  3. インストーラ画面が起動したら「Accept and Install」を選択します。
  4. インストールが完了すると「Vivaldi」のプレビュー版が起動します。

Chromeが勝手に自動翻訳するのを止める方法

最近、ブラウザでGoogle Chromeを使用していると、英語が記載されているサイトを表示すると勝手に自動翻訳されてしまい、非常に煩わしくなってくる事があります。
こういう場合は、設定画面で勝手に自動翻訳を行わないように設定する事が出来ます。

Chromeの自動翻訳停止方法

  1. Chromeの設定画面を開きます。
  2. 設定画面で「詳細設定を表示…」リンクを選択します。
  3. 言語欄の「母国語以外のページで翻訳ツールを表示する」のチェックを外します。
  4. 以上で勝手に自動翻訳は行われなくなります。

HTML、CSS、JavaScriptのデバッガツール「Firebug」のインストール手順

通常ブラウザにはF12押下でブラウザ標準の開発ツールが使用可能となりますが、今回紹介する「Firebug」は高性能なJavaScriptデバッガツールです。JavaScriptだけではなくHTMLやスタイルシートの値をリアルタイムに変更して確認したり、非同期通信状況やDOMの状態などの詳細情報確認も簡単に可能となります。

Firebugの特徴

  • Firefox専用のアドオン
  • JavaScriptのデバッグ
  • 非同期通信の状況確認
  • DOMやスタイルシートの設定状況確認

Firebugのインストール手順

  1. FireFoxを起動し、メニューの「ツール」→「アドオン」を選択します。
  2. アドオンマネージャのメニュー「アドオン入手」画面で検索ボックスへ「firebug」と入力して検索します。
  3. 検索結果に「Firebug x.xx.x」と表示されますので「インストール」ボタンを押下してインストールします。
  4. インストール終了後、デバッグしたい画面を開いてブラウザの右上に追加された「虫アイコン」をクリックすれば虫アイコンに色がついてFirebugが起動します。

Internet Explorer11でIE過去バージョンモードで表示する方法

Internet Explorer11で、IE10以前のバージョンで表示する方法をご紹介します。

開発ツールからの表示方法

  1. F12キーを押下して開発ツールを起動します。
  2. 開発ツールのエミュレーション画面を選択します。
  3. ドキュメントモードのプルダウンリストを表示すれと過去のIEバージョンが選択出来ますので、表示したいバージョンを選択すればそのバージョンで表示されます。

Google Chromeのブックマークのバックアップ/リストア方法

Google Chromeのブックマークをバックアップする場合、プロファイルをバックアップする方法と、chromeの設定画面からインポート・エクスポートする方法の2通りありますが、後者のエクスポートする方法が一番簡単なので今回はこちらの方法をご紹介します。

設定画面からエクスポートする方法

  1. Google Chromeの右上の設定ボタン「︙」を選択します。
  2. 「ブックマーク」を選択します。
  3. 「ブックマークマネージャ」を選択します。
  4. 右上の設定ボタン「︙」を選択します。
  5. 「ブックマークをエクスポート」を選択します。
  6. 以下のように保存用画面が表示されるのでファイル名を指定して保存すればブックマークのバックアップ完了です。

設定画面からインポートする方法

エクスポートと同様の手順でブックマークマネージャ画面を開き、「ブックマークをインポート」を選択すればバックアップしたブックマークをリストアすることも可能です。

Firefoxを複数バージョン共存させる方法

FireFoxで複数バージョンで動作確認したい場合のインストール方法を説明します。

1. FireFoxのインストーラ(別Ver)をダウンロード

下記手順でFireFoxのインストーラをダウンロードして下さい。

  1. FireFoxのインストーラが保管されているftpへアクセスしてインストールしたいバージョンのディレクトリを選択します。今回はVer24のESR版を選択します。
    FireFoxバージョン別保管先
  2. Windows版の「win32」を選択します。
  3. 日本語版の「ja」を選択します。
  4. インストーラ用のexeファイルを選択するとダウンロードされます。

2. FireFox(別Ver)をインストール

ダウンロードしたインストーラ(別Ver)を起動してインストールを実行します。インストールは必ず下記手順で行い、インストール直後にFireFoxは起動しないように注意して下さい。

  1. 「次へ」を選択します。
  2. 「カスタムインストール」を選択します。
  3. 「インストール先フォルダ」を変更後、「次へ」を選択します。
    ※インストール先フォルダは既存のFireFoxがインストールされているフォルダとは別のフォルダを指定して下さい。
  4. 「デスクトップ」以外のチェックは全て外して、「次へ」を選択します。
  5. 「FireFoxを既定のブラウザとして使用する」のチェックを外して「インストール」を選択します。
  6. インストール完了後、「今すぐFireFoxを起動」のチェックを外し「完了」を選択します。

3. FireFoxのプロファイルを追加

イントール直後の状態でFireFoxを起動してしまうと、既にインストールされているFireFoxのプロファイルを使用してしまうので、追加インストールしたFireFox用のプロファイルを作成します。

  1. Windowsのスタートメニューから「ファイル名を指定して実行」を選択します。
  2. 名前へ「firefox -p」と入力して「OK」を選択します。 ※反応しない場合は「firefox -createprofile firefoxX.X」と入力すればプロファイルが作成されます
  3. 「新しいプロファイルを作成」を選択します。
  4. 「次へ」を選択します。
  5. 新しいプロファイル名を入力し、「完了」を選択します。
  6. 「終了」を選択します。
  7. FireFoxのプロファイルフォルダを参照して今回追加したプロファイルフォルダが作成されている事を確認します。

4. FireFoxのショートカットファイルの作成

  1. 追加インストールしたFireFoxのフォルダ「【例】C:\Program Files (x86)\Mozilla Firefox_24」を開いて「firefox.exe」ショートカットファイルを作成します。
  2. 作成したショートカットファイルを右クリックしてプロパティを選択します。
  3. リンク先の末尾に「-p {上記3.5で作成したプロファイル名} -no-remote」を追記します。

    【例】
    「”C:\Program Files (x86)\Mozilla Firefox_24\firefox.exe”」
     ↓
    「”C:\Program Files (x86)\Mozilla Firefox_24\firefox.exe” -p firefox24 -no-remote」

後は作成したショートカットをダブルクリックしてFireFoxを起動すれば、既存インストール済のFireFoxとは別のプロファイルを使用したFireFoxが起動されます。は上記手順を繰り返せば別バージョンのFireFoxを更に増やすことも可能となります。