サイト制作メモ

投稿日:

Atomエディタが便利です

今まで使っていたのはDreamWeaver

htmlを書くようになって使っていたのはAdobeのDreamWeaverでした。
こちらも使い勝手がよく好きだったのですがAtomエディタが便利とのことで変えてみました。
Atomは無料で使えるので気軽に試すことができるのも魅力です

おすすめのパッケージ

メニューを日本語化[japanese-menu]

やっぱり日本語メニューがわかりやすい!

タグが簡単に書ける[emmet]

普段コードを書く時に一番目に見えて便利なのがこれ。
省略して書いたタグ+ショートカットキーでコードを展開してくれます。

例えばpタグ。普通ならカッコが必要ですがemmetならp+ショートカットキー。カッコを書く必要がありません。

pタグのような簡単なタグならそんなに気になりませんが、例えばhtmlの宣言なども簡単です。

    <!--こう書くと-->
    html
    
    <!--こう展開してくれる-->
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <meta charset="utf-8">
            <title></title>
        </head>
        <body>
            
        </body>
    </html>
    

class名があるリストとかもこんなふうに簡単に。何度もコピペしなくていいのが便利!

    <!--こう書くと-->
    ul.list>li.list-item*5
    
    <!--こう展開してくれる-->
    <ul class="list">
        <li class="list-item"></li>
        <li class="list-item"></li>
        <li class="list-item"></li>
        <li class="list-item"></li>
        <li class="list-item"></li>
    </ul>
    

FTP接続するなら[remote-ftp]

FTP接続情報を保存してエディタ上でファイル更新できるパッケージ。決まったサイトをさわるなら必須!

プロジェクト管理が簡単[project-manager]

その名の通りプロジェクト管理パッケージ。
よく使うフォルダのパスを保存してプロジェクトとして登録しておくと「フォルダを開く」からわざわざたどってから開かなくても一発でフォルダが開けます。さらに、remote-ftpでFTP情報も保存しておくとAtomエディタを開くだけでファイルの更新ができるので便利です
DreamWeaverを使っていた人は馴染みのある機能ですよね。

コードを見やすく![atom-beautify]

ソースコードをきれいにしてくれます。
HTML,CSS,JavaScript,PHP Python,Rubyなどなど、いろいろな言語に対応してます

コードのチェックをしてくれる[linter]

コーディングの際のミスをチェックしてくれるパッケージです。エラーが有ると教えてくれます。
PHPのチェックがしたい時はlinter-phpを入れます。

よく使う機能をツールバーに表示[tool-bar]

プロジェクトフォルダを開く、とかリモート接続とか、とにかくよく使う機能をボタンで表示してくれるので便利です。

別のパソコンにも同じ設定を追加できる[sync-settings]

パソコンの入れ替えをした際に使ったパッケージ。
一から設定しなくてもGitHub経由で同期してくれます。

Githubあまり使ったことないけどググって出てきた手順にそって進めればできました。
ちょっと検証してないので分かりませんが一部移行できない部分もあるかも?

sassのコンパイルも[sass-autocompile]

sassが使ってみたくて導入しました。
あぁ、もともとsass使うならAtomが便利だよというところからAtomを使い始めたのかもしれない。以前はkoalaとかのコンパイラというやつを使っていたのでそれに比べると便利です。

sassに関しては書き方を少し勉強して便利さは分かったものの、実務であまり使う機会がないのでいつか使いたいな。複数編集に便利そうなのでぼっちの私にその機会があるかどうかは分からないけど。

ちなみにwordpressもsassが使えるプラグインみたいなのあります。
ただ、ファイルの更新とかが間に1~2手間入るので面倒です。普通にstyle.cssのやり取りするのが便利。

- サイト制作メモ

関連記事

ページ読み込み時にフェードインのエフェクト【超簡単!】

jQueryの取扱が苦手な私でもすぐに実装することができたフェードインエフェクト。 トップのイメージ画像の上にテキストをふわっと表示させたいなーと思い調べてたら、かなりシンプルな記述でフェードインエフ ...

パーマリンクの設定

stinger8のダウンロードサイトにはパーマリンク設定を"postname"にしているとあったのでそのように設定してみた。 で、実際に新規で記事を追加すると 記事のタイトルが反映されURLは以下のよ ...

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあっ ...

webサイト制作時に役立つ!メインカラーを元にカラーを選べるサイト

web制作する時にカラーの組み合わせを調べたい時、色々なジェネレーターはあるけど たとえば メインカラーがすでに決まっていて それに合うカラーが知りたい時 ってないですか?私は結構あります。で、ジェネ ...

翻訳する