Webサイト制作

投稿日:2021年1月19日 更新日:

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のやり取りするのが便利。

- Webサイト制作

関連記事

Amazon Product Advertising APIを使って気づいた事

目次1 APIの使い方が分からない時は2 最低価格(MinPrice)、最高価格(MaxPrice)の結果がおかしいと思ったら2.1 価格は*100にします3 一度に取得できる情報の件数4 よく分から ...

動画や連続写真からのアニメーションgifの作成

アドビのサイトにとっても分かりやすく説明されていたアニメーションgifの作り方。 連続写真や動画から簡単に作成できます。 アニメーションgifの作成方法 動画の再生やアニメーションgifのサンプル作成 ...

display:flexを使った時のIE10のバグに対応する

display:flex;を使った時、IE11では問題なくてもIE10で見ると色々な不具合が生じることが多い。例えば、このサイトのレイアウト。クロームで見るとこんな感じまぁまぁ均等に並んでいるように見 ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...