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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Chrome

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

4623閲覧

ATOMのdeveloper tool

revoiot

総合スコア188

Chrome

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2017/03/17 11:24

編集2017/03/18 12:43

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

投稿2017/03/19 12:38

tomopro

総合スコア57

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

revoiot

2017/03/19 13:58 編集

大変貴重なご回答いただきありがとうございます。 {自分はChromeとAtomを使い、保存しながら確認しているためその機能は使用したこ とがなく、、、 }とご回答いただいたと思うのですが、 それは、ATOMのpackageの自動的にFTP環境にアップロードするものを利用して、Chromeで自分のサイトを開き、developertoolを使うということでよろしいでしょうか? もしこれ以外のやり方でされている場合、ご回答いただけると幸いです。 よろしくお願いします。
tomopro

2017/03/19 14:15 編集

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

2017/03/19 14:17

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

2017/03/20 04:07

大変貴重なご回答ありがとうございました。 これで、しばらく悩んでいた問題が解決できて、非常に嬉しいです。
tomopro

2017/03/20 12:51

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

2017/03/22 05:00 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問