Atomテキストエディタでhtml・cssファイルを、コピー→貼り付け→名前を変更するなど、複製する3つの方法

Pocket

Atomテキストエディタでhtml・cssファイルを、コピー→貼り付け→名前を変更するなど、複製する3つの方法をお伝えしますね。これはたとえば共通のヘッダー・フッター・共通部分などを記述したhtmlファイルなどを複製していくなど、効率的にhtml・cssファイルを作成していく技のひとつです。入門書などにもよく書かれていますので、超初心者さんもどれか一つを覚えてホームページ作成に役立ててください。

test.html を test-save.html に複製する方法で説明しますね。それではまず1つめの方法から……

ツリービューの 複製 を使う

1つ目は、ツリービューの小さなメニュー(=コンテキストメニュー)にある[複製]を使用する方法です。まず、コピーしたいhtmlファイルを選択します。

右クリックして、小さなメニュー(=コンテキストメニュー)を表示させ、[複製]を選択します。

Enter the new path for duplicate と 複製する新しいファイル名 の入力欄が表示されます。

複製する新しいファイル名を入力します。.htmlと拡張子も入力してくださいね。

これで複製ができました。ツリービューに複製した新しいファイルが表示されています。

これが、一番簡単ですね。

メニューバーの ファイル → 別名で保存 で複製する

2つ目はメニューバーの[ファイル]→[別名で保存]で複製する方法です。まずは、ツリービューで複製するファイルを選択します。

メニューバーの[ファイル]→[別名で保存]を選択します。

ダイアログボックスが表示されるので、複製する新しいファイル名を入力し、[保存]ボタンをクリックします。

これで複製ができました。ツリービューに複製した新しいファイルが表示されています。

ツリービューの コピー → ペースト → 移動・名前変更 で複製する

3つ目は、ツリービューの小さなメニュー(=コンテキストメニュー)にある[コピー]→[ペースト]→[移動・名前変更]で複製する方法です。まず、コピーしたいhtmlファイルを選択します。

右クリックして、小さなメニュー(=コンテキストメニュー)を表示させ、[コピー]を選択します。

そのままツリービュー上で右クリックして、小さなメニュー(=コンテキストメニュー)を表示させ、[ペースト]を選択します。

複製されました。しかしファイル名が test0.html と適当な名前になっています。

小さなメニュー(=コンテキストメニュー)でtest0.html を選択して、右クリックして[移動・名前変更]を選択します。

Enter the new path for the file と新しいファイル名を入力する欄が表示されます。

新しいファイル名を入力します。ここでは test-save.html です。

これで複製ができました。

ちなみにショートカットキーも使えますので、あなたがショートカットキーを使うようでしたらこちらをおすすめします。

  • コピー …… Ctrl + c
  • ペースト …… Ctrl + v
  • 移動・名前変更 …… F2

まとめ

今日はAtomテキストエディタでhtml・cssファイルを複製する3つの方法をご紹介しました。共通のヘッダー・フッター・共通部分などを記述したhtmlファイルなどを複製していく時など、超初心者のあなたでも効率的にhtml・cssファイルを作成していくことができます。あった方法を選んで効率的にホームページを作成してくださいね。

Pocket