Mac
 Computer >> コンピューター >  >> システム >> Mac

Safariのレスポンシブデザインモードを使って、サイトが他のデバイスでどう表示されるか確認する方法

Safariのレスポンシブデザインモードを使って、サイトが他のデバイスでどう表示されるか確認する方法

近年、Webデザイナーの間では「レスポンシブ」対応のWebサイト構築が主流になりつつあります。レスポンシブデザインとは、閲覧しているデバイスに合わせてコンテンツを最適なレイアウトで自動表示する仕組みのこと。たとえばiPhoneでサイトにアクセスすると、見出しテキストや画像がモバイルに適したサイズへ自動調整されます。

Webサイトを制作中で、さまざまな画面サイズでの見え方を確認したいなら、Safariの「レスポンシブデザインモード」が役立ちます。

事前準備：「開発」メニューを有効にする

この機能を利用するには、OS X El Capitan以降の環境が必要です。また、Safariの「開発」メニューがまだ有効になっていない場合は、以下の手順でオンにしておきましょう。

  1. メニューバーの「Safari > 環境設定」を開く
  2. 「詳細」タブをクリック
  3. 「メニューバーに“開発”メニューを表示」にチェックを入れる

レスポンシブデザインモードの使い方

Safariのレスポンシブデザインモードを使って、サイトが他のデバイスでどう表示されるか確認する方法
レスポンシブデザインモードで表示したMacgasmの記事ページ

確認したいWebページを開き、「開発 > レスポンシブデザインモードに入る」を選択します。これだけで、各種iOSデバイスや主要な画面解像度におけるページの表示をひと目でチェックできます。

表示領域のサイズは、Webページの端にマウスカーソルを重ねて左右にドラッグすることで自由に変更可能。デバイスごとの表示を切り替えながら比較してみると、普段は気づかないレイアウト崩れなどの不具合を発見できるかもしれません。

確認が完了したら、「開発 > レスポンシブデザインモードを終了」を選択して、通常の表示に戻しましょう。

  1. iPhoneやMacなど、別のAppleデバイスからリモートでSafariのタブを閉じる方法

    実は、別のAppleデバイスからリモートでSafariのタブを閉じることができるのをご存知でしたか?この記事では、その方法を詳しくご紹介します。外出先でふと「家を出る前にFacebookやTwitter、ネットバンキング、個人ブログなどのページを閉じ忘れたかもしれない……」と気づいた経験はありませんか? もしそうなら、他人に自分のアカウントを勝手に見られたり操作されたりするかもしれないという不安、よく分かります。でも安心してください。手元にあるAppleデバイスさえあれば、Mac上で開いているSafariのタブをすべてリモートで閉じることができるのです。 iCloudを使えば、Appleデバイ

  2. Time MachineでMacをバックアップ・復元する方法を徹底解説

    大切な写真やデータのバックアップはきちんと取っていますか?思い出を残すために大量の写真を撮る人は多いものの、バックアップをしていなければ、いつデータを失ってもおかしくありません。Macのバックアップを定期的に取っておけば、システムの不具合、ハードドライブの故障、ファイルの破損、ウイルス感染、マシンのクラッシュなど、どんなトラブルが起きても大切な思い出を守ることができます。そこで活躍するのが、Apple純正のバックアップツール「Time Machine」です。自動でバックアップを行えるうえ、操作も非常にシンプル。バックアップしたくないファイルを除外できる柔軟性も魅力です。また、ハードドライブ全体