質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • HTML

    9522questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6170questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4281questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Chrome

    639questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

ATOMのdeveloper tool

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 798

revoiot

score 116

ATOMエディタの利用方法でわからないことがあるため
この場を借りて、2点質問させていただきます。

①レスポンシブデザイン対応のwebサイトを作りたいため、ATOMを使う際に、Chromeのdeveloperツールを使い、スマホ画面の場合を確認しようとしたのですが、なぜかdeveloperツールのpreview画面にatomのhtmlやcssのコードが写り込んでしまったりして、うまく利用することができません。
下の画像は、html preview画面をs選択状態で、chromeのdeveloper toolを開き、スマホのアイコンを押したものになります。左側にコードの編集画面が写っていることが確認できると思います。

イメージ説明

②html preview画面を右クリックすると、検証(inspect)や、open in Dev.toolなど出るのですが、なぜかそれらを実行するとそれらは、chromeのdeveloper toolではなく、chromiumのdeveloper tool(webサイトのある記事曰く)でした。
このchromiunのdeveloper toolは、スマホ用の画面を確認できないと思われるため、できれば右クリックした際に、検証を選択した際に、chromeのdeveloper toolが開くように設定したいです。下の画像は、chromiunのdeveloper toolを開いた時の様子です。chromeのdeveloper toolと違って、スマホ用のアイコンが見当たらないのが確認できると思います。

イメージ説明

①どうすればATOMで編集しつつ、chromeのdeveloper toolを使い、レスポンシブになってるのか確認できるでしょうか?

②どうすれば、HTMLpreview画面で右クリックした時に現れる検証でchromeのdeveloper toolが自動的に開くようにできるでしょうか?

どなたかこの2点の質問がわかるかた、ご教授いただけないでしょうか?

大変恐縮ですが、宜しくお願いします。

下記が利用しているもののversionになります。

ATOM ver1.14.3

Chrome Version 57.0.2987.110 (64-bit)

Mac os Sierra version10.12.3

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

今、私のAtomでも確認してみましたが、同じようにAtomのデザインのコードが表示されました。
AtomはElectronというNode.jsとchromiunを使ってできたソフトなのでコードが表示されることはおかしくはないのですが、そのPreviewというものはAtomのパッケージをお使いでしょうか?
自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したことがなく、、、
もしもパッケージを利用し表示されているのでしたらデベロッパーツールをエディタ上で使用するのは難しいと思われます。
Chromeなどを使いそちらでデベロッパーツールを開きレスポンシブのところを変えることで各端末の大きさで表示することが出来ます。
イメージ説明

マークがないという現象はあまり聞いたことがないためCtrl+Shift+Mでこのメニューが表示されますでしょうか。
もしも出来ないのであればそれが仕様だと思われます。
AtomのDevtoolとパッケージを利用してパッケージのページのソースを表示することは出来ますが
Web自体を確認したいのであればChromeなどで確認し、ChromeのDevtoolで上記のように端末のサイズを
変更されたほうがすぐに確認が出来るかと・・・。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/03/19 22:55 編集

    大変貴重なご回答いただきありがとうございます。

    {自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したこ とがなく、、、 }とご回答いただいたと思うのですが、

    それは、ATOMのpackageの自動的にFTP環境にアップロードするものを利用して、Chromeで自分のサイトを開き、developertoolを使うということでよろしいでしょうか?

    もしこれ以外のやり方でされている場合、ご回答いただけると幸いです。

    よろしくお願いします。

    キャンセル

  • 2017/03/19 23:13 編集

    HTMLファイルなら普通にhtmlをChromeなどのブラウザで開けば表示できますよ
    わざわざFTPにあげなくても・・・HTMLをポイって普通に起動したChromeにドラッグ&ドロップすれば

    キャンセル

  • 2017/03/19 23:17

    もしもFTPでサーバーに上げて確認するときもしくは上げたものに修正を加える場合は、WinSCPなどFTPソフトでログインしてファイルをAtomで開き編集、Ctrl+Sで保存で変更が保存されるのでリロードすることで更新できます。

    キャンセル

  • 2017/03/20 13:07

    大変貴重なご回答ありがとうございました。

    これで、しばらく悩んでいた問題が解決できて、非常に嬉しいです。

    キャンセル

  • 2017/03/20 21:51

    単純なレスポンシブであればPreviewタブの幅を狭くすれば縮むような・・・
    多分このパッケージを使用すればタブを分けたり幅を変えたりなどができたはずです
    https://atom.io/packages/maximize-panes

    キャンセル

  • 2017/03/22 13:59 編集

    参考にさせていただきます!!!ありがとうございます!!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • HTML

    9522questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6170questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4281questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • Chrome

    639questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。