ChromeでHTMLとCSSファイルを作成して、さらに編集や保存もすることができるのを最近になって知りました。
Webサイト作成ができます。
いつもHTMLやCSSのファイル作成は、テキストエディタのVisual Studio Codeを使って作成することがほとんどで、作成したファイルの編集や保存もテキストエディタです。
なのでHTMLをChromeのブラウザだけでページ操作をして、編集したファイルを保存することができることに新鮮さを感じました。
ついつい楽しくてChromeでHTMLとCSSファイルを作成してから編集や保存をするまで実際にやってみたので、まだ知らなかった方の参考になればと思います。
ChromeのDevToolsでHTMLとCSSを作成
ChromeにはDevToolsという開発環境ツールがあります。
「デベロッパーツール」「検証ツール」などの言い方をしますが、ChromeでHTMLとCSSを作成する場合もDevToolsを使用して作成します。
ChromeのDevToolsの開き方は、普段と同じく何かを検索するときのようにChromeを開いて検索窓を表示します。
そして開いたChromeの画面でマウス右クリックして表示する項目の「検証」をクリックします。
キーボードショートカットの場合
- Macは「option + command + i」
- Windowsの場合は「Ctrl+Shift+I」
ChromeでDevToolsが表示されたら、DevToolsの「Sources」という項目をクリックします。そしてDevToolsのSources画面の左側パネルに＋のアイコンがあるのでクリック。
するとMacならFinderが開くので「新規フォルダ」でフォルダを作成します。このフォルダがChromeで作成するHTMLとCSSファイルを入れておくフォルダになります。
作成したフォルダを選択するとChrome画面の上部には、以下の画像のように表示が出ます。
先ほど作成したフォルダへのフルアクセスをデベロッパーツールが求めてるので「許可」をします。
許可すると作成したフォルダがSources画面の左パネルに表示されます。
HTMLファイルはindex.htmlにしてみる
ChromeのDevTools「Sources」の左パネルに表示したフォルダにHTMLファイルを作成します。HTMLファイルは例としてindex.htmlを作成してみます。
ChromeのDevToolsを開いたSources画面に表示してるフォルダを右クリックで「New File」を選択します。
フォルダの中でファイル作成が可能になるので、新規ファイルの名前をindexにして拡張子を.htnlで入力します。間違えた場合はファイルを右クリックで表示する「Rename」でファイル名を入力し直せます。
そしてEnter キーを押すとindex.htmlファイルが作成できてフォルダに追加されます。
こうしてChromeで作成したHTMLファイル、今回ならindex.htmlファイルは、ローカル内でも作成したフォルダに入ります。
CSSファイルはstyle.cssを作成
ここまでの時点ではChrome「DevTools」のSources画面左パネルにはフォルダにindex.htmlが入ってます。
このindex.htmlファイルに使用するCSSファイル(style.css)も作成します。
フォルダを右クリックして「New File」を選択。そして新規ファイルのファイル名をstyleにして拡張子を.cssにしたらEnter キーを押します。
これでChromeでCSSファイル作成の完成です。
もしChromeでHTMLやCSSファイルを削除して作成し直す場合は、削除したいファイルの上で右クリックすると「Delete」項目が表示するので「Delete」で削除できます。
DevToolsのSourcesでHTMLとCSSの編集
次はChromeでHTMLとCSSファイルを作成した次のステップ「作成したファイルを使用してHTMLとCSSの編集や保存」をします。
HTMLの編集とCSSの編集を一つずつやってみます。
SourcesでHTMLの編集と保存
ChromeでHTMLファイルを作成したDevToolsのSources画面の左パネルから編集するファイルをクリックします。例としてindex.htmlをクリックします。
するとSources画面の右パネルが、編集するファイル名のタブになるので下のエディターでHTMLファイルの編集ができます。
エディターでHTMLをマークアップしてごにょごにょと編集したらhtmlファイルの編集を保存します。
- Macの場合はcommand + s
- Windowsはcontrol + s
次にChromeのSourcesパネルの左右か上にChromeの検索ボックス画面を表示させたままなので、Sourcesパネルで編集中のHTMLファイルをブラウザプレビューで表示できるようにします。
ChromeでHTMLの編集をして保存したファイル名の上で右クリックして表示する項目の「Copy link address」を左クリックします。
Copy link addressはChromeで編集してるHTMLファイルのリンクアドレスをコピーできるので、Chromeの検索ボックスにアドレスを貼り付けてEnterします。
そうするとChromeでHTMLとCSSファイルを作成してコーディングした表示をプレビューしながら編集や保存ができるベストな環境が整います。
この調子でChromeでCSSの編集に進みます。
CSSの編集はSourcesとElements
ChromeでCSSの編集は、2つの編集方法ができます。
1つめはDevToolsのSourcesパネルでHTMLを編集したときと同じように、編集するCSSファイル名をクリックして編集エディターのタブに表示、そしてCSSでHTMLページをデザインします。
ChromeでCSSの編集する作業自体は他のテキストエディターでCSSを記述していくのと変わりありません。
編集したらCSSファイルを保存します。
- Macの場合はcommand + s
- Windowsはcontrol + s
ChromeでCSSを編集して私が「これいいね」と思ったのは、編集したCSSの反映をリロードすることなく横に表示するChromeのブラウザプレビューが自動で反映してくれることです。
これはDevToolsのSourcesパネルを使用してコーディングする場合の良い点かと思いました。
ChromeでCSSの編集をする2つめのやり方はDevToolsのElementsを使います。
まずChromeのSourcesパネル画面のままパネル左上の四角に矢印があるアイコンをクリックします。
そして編集中のファイルをプレビューしてるChromeのブラウザ画面の方でCSSで編集したい要素をクリックします。
するとElementsパネルに切り替わるので、編集する目的のプロパティや値をダブルクリックで編集可能にして変更します。
CSSの編集ができたら、編集したファイル名が各セレクタの横の右上に表示してるのでクリックします。
そうするとChromeのSourcesパネル画面に戻ることができて、編集後のCSSが上書きできてます。念のためファイルを保存しておくといいかと思います。
という感じの流れでChromeだけでHTMLとCSSのファイルを作成して編集や保存まですることがでます。
Chromeに作成済みフォルダを表示して編集
ここまではChromeでHTMLとCSSファイルを作成してから、編集や保存をしてきましたが、作成済みのHTMLとCSSファイルをChromeで表示して編集する場合も説明します。
私の知る限りでは2パターンあります。
パターン1
HTMLとCSSファイルをまとめてるフォルダがあると思うので、Chromeを開いてフォルダごとChromeにドラック&ドロップします。するとChromeのブラウザ画面にフォルダ内のファイルが表示されます。
そしてChromeに表示されたファイルから編集するファイルを選択。例えばindex.htmlを選択するとindex.htmlファイルのページがブラウザでプレビューされます。
そしたら右クリックで検証を開いてChromeのSourcesパネル画面でファイル編集して保存できます。
パターン２
Chromeのブラウザを開いてDevToolsを開く、そしてDevTools画面の右上の歯車アイコンをクリックしてWorkspaceに切り替えます。
Workspaceでは「Add folder」をクリックしてChromeで編集したいフォルダを選択します。
フォルダを選択するとデベロッパーツールがフルアクセスの許可を求めてくるので許可します。
フルアクセスの許可後にWorkspaceを閉じるとElementsパネルの表示になるのでSourcesパネルに切り替えて、編集するファイル名の上で右クリックします。
「Copy link address」の項目が表示するのでCopy link addressをクリックしたファイルのアドレスをChromeの検索ボックスに貼り付けEnter。
そうすると、編集するHTMLファイルがプレビューされるのでHTMLやCSSを編集したり保存したり頑張ります。
まとめ
ChromeだけでHTMLとCSSファイルを作成して、編集や保存もしてみましたが、普段使用するテキストエディターにはない Chromeでしかできないことを含めてファイル編集ができるのが便利に思えました。
Chromeのデベロッパーツールの使い方に詳しい方なら、今回紹介したこと以外の機能と組み合わせることで、さらに使いやすくできると思うので時間があるときにでも試してみはいかがでしょうか。
