AtomテキストエディタからWindowsフォルダ内すべてのhtml・cssファイルを選択・編集・保存する方法

Pocket
[`evernote` not found]

AtomテキストエディタからWindowsフォルダ内のhtml・cssファイルを選択・編集・保存できたら便利ですよねー。たとえば、お店のホームページを作成するとき、shopフォルダを作り、その中にhtml・cssファイルを作成していきますよね。通常はそのshopフォルダ内のhtml・cssファイルは、shopフォルダの中を操作して、編集対象のファイルを探し出して、テキストエディタで編集します。

これって、けっこうストレスかかりませんか? 1ファイルならまだしも、htmlやcssの複数ファイルとなると……『あぁ、もっと楽な方法ないのかなぁ』と思ったあなた、実はAtomテキストエディタからフォルダ内すべてのhtml・cssファイルを選択・編集・保存する方法があるのです。それが「プロジェクトフォルダを追加」です。

あ、そうそう説明の前に、1つだけ……画面左側のことをAtomテキストエディタでは「ツリービュー」といいます。今日はこの「ツリービュー」という言葉を使いますので、すこしの間だけ覚えておいてくださいね。

それでは、説明しますね。あなたがお店のホームページを作成中だったとして、shopフォルダの中にhtml・css・イメージファイルを置いてあるとします(よくホームページ作成の本に記載してあるファイル・フォルダ構成です)。

まずAtomテキストエディタを立ち上げてください。

04

ここで[ファイル]→[プロジェクトフォルダを追加]を選択します。

Open Folderアイアログボックス が表示されますので、あなたが作成中のホームページの親フォルダ(今日の説明ではshopフォルダ)を選択します。

フォルダの選択 ボタンをクリックします。

するとAtomテキストエディタのツリービューにshopフォルダ内にある「htmlファイル・cssファイル」や「cssフォルダ」が表示されます。

『index.htmlを編集しようかなぁ』と思ったら、ツリービューからindex.htmlをクリックしてください。

すると右側にindex.htmlが表示され、編集できます。Atomではこの画面右側を「ペイン」といいます。よくでてくる言葉なので、じょじょに覚えていきましょうネ。

編集すると、ペイン上部にあるタブに「●」印がつきます。

編集したら、保存ですね。[ファイル]→[保存]です(ショートカットの Ctrl + s でもOKです)。

またcssフォルダの中にあるファイルもAtomテキストエディタから編集できます。画面左側(=ツリービュー)からcssフォルダをクリックすると、画面右側(=ペイン)にstyle.cssが表示されます。

プロジェクトフォルダを追加 はドラッグアンドドロップでもできます。

実はこの「プロジェクトフォルダを追加」は、Windowsフォルダからドラッグアンドドロップでもできます。こちらも便利です。方法は前回の記事「Atomでhtmlやcssのファイルを開く方法って?ダブルクリックで開くことができないんだけど…」を参照してください。

まとめ

ホームページを作成していると、「htmlファイルをフォルダから探して、テキストエディタで開いて、その次にcssファイルをまた別フォルダから探して…」とストレスがかかる操作をしながらファイルを編集していかなければいけません。『あぁ、もっと楽な方法ないのかなぁ』と思いますよね。

でも「プロジェクトフォルダを追加」を使用すると、「Atomテキストエディタから、Windowsフォルダ内すべてのhtml・cssファイルを選択・編集・保存する操作」ができるようになるので、本当に便利です。ぜひ覚えて利用してくださいね。

Pocket
[`evernote` not found]