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サイト制作

関連記事

-webkit-とかのベンダープレフィックスをつける重要性

プレフィックスとは、CSS3を使う際に使用するプロパティの前につけるキーワードです。 サイト制作者には当たり前に思えるベンダープレフィックス。 今までどうしてこれを付けないといけないかがよく分かってい ...

cssだけで画像をテキストの形に切り抜き表示してみる

面白かったのでメモ。 テキストの形に切り抜くやつです。 どこかで使えそう。 目次1 まずはhtml2 cssを追加します。3 テキストの背景指定も まずはhtml 何でもいいので適当なクラスか何かあた ...

no image

画像の拡大表示(ポップアップ)

目次1 やりたいこと2 タグを設置3 画像にクラスを付与4 スクリプトを記載5 スタイルを記載6 完成! やりたいこと 画像のポップアップがしたい! タグを設置 html内であればどこでも良いので、ポ ...

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

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

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

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