読者です 読者をやめる 読者になる 読者になる

お願い、フォントをかえさせて

2015年秋、グラフィックデザイナーがウェブデザイナーになりました。

おすすめテキストエディタ「Atom」を使ってみよう!

今日は、新人ウェブデザイナーなわたしが使っている

おすすめのテキストエディタAtom」を紹介します!

 

おすすめの理由1:フラットデザインっぽくてMacに合う💻

そこ?って思うかもしれませんが、

やっぱり見た目ってやる気に直結しているので重要なんですよね。

特にデザイナーが本業の方はわかってもらえると思う。

古いデザインだと、萎える…!!

 

 

おすすめの理由2:自動色分け🎨

f:id:emo_momomo:20151230140844p:plain

文字列がただただ続くというのは右脳タイプには辛いもの…

でも、こうやって色分けしてくれてるとそれだけで見易いのです👀

ちなみにidやclassにも色が付くから、探し易いです。

 

 

おすすめの理由3:2画面ができる💞

f:id:emo_momomo:20151230124713p:plain

タブのところを右クリックすると、

ペイン分割というのが出て上下左右に画面を分割できます。

HTML組むときはいらないけど、CSS組むときはHTML見ながらやりたいので

とっても便利です。

 

 

おすすめの理由4:予測変換?がある⏳

f:id:emo_momomo:20151230140949p:plain

タグを打つときに常に予測変換をしてくれるので

打ち間違いを防ぐことができます🙆

これがちょー便利!!!

 

f:id:emo_momomo:20151230125634p:plain

たとえば、こうやってタグ打ってるときに

f:id:emo_momomo:20151230125749p:plain

セミコロンを忘れたりすると、予測変換が出ないんです。

正直heightとかheiくらいしか打っていないので(笑)

予測変換がでないことで閉じ忘れを防ぐことができます👍

色も白くならないので、それでも知らせてくれます。

これで「あれ、、cssが効かない、、😰」とかもありません!

ちなみに閉じタグは自動ではないので、自分で閉じましょう。

CSSの{}は自動でやってくれます😉

 

 

おすすめの理由5:ショートカットキーが充実してる👇

f:id:emo_momomo:20151230130947p:plain

f:id:emo_momomo:20151230130921p:plain

わたしは、インデントとすべて折りたたみをめちゃくちゃ使ってます👍

単にインデントするだけならtabでももちろんできますけどね。

慣れるとショートカットキーでやる方が楽です。なんせ減らすこともできますし😄

 

 

おすすめの理由6:GitHubが開発したエディタ

Atom(アトム)は、GitHubが開発したオープンソーステキストエディタである。

これは正直今知りました(笑)

ソースの管理とかをするサービス「GitHub」の会社が作ったエディタです。

わたしはGitHubのアカウントすら持っていないので、

使ったことないですが、

GitHubに同期?することもできます。

f:id:emo_momomo:20151230133549p:plain

 

 

 

Atomどうですかー?使いたくなりました?

最後にダウンロードの仕方とちょっとした設定を紹介しておわり〜😘

 

ダウンロードは公式サイトから!

atom.io

サイトのデザインもかわいい💕

f:id:emo_momomo:20151230131813p:plain

 

インストール📥

f:id:emo_momomo:20151230131945p:plain

 

ご覧の通り、Atomは英語なので、とりあえず日本語にしましょう。

最初の画面(Welcome Guide)から日本語のパッケージをインストールします。

勢いでWelcome Guideを消してしまった場合は、

メニューバーのHelpの一番下にあるのでもう一度開けますよ😉

f:id:emo_momomo:20151230134223p:plain

まずは、「Install a Package」(Open Installerを押すと左画面が出ます)

検索窓に「japanese-menu」と入れて、Packagesを押すと

出てくるsyonさんの「japanese-menu」をInstall。

そうするとメニューが日本語になるので使いやすくなります。

ちなみにパッケージの中身は英語のままです。

 

ちなみに黒い背景いやだなーという人は、

テーマで白くもできます。

(左のツリーのテーマをクリック!)

f:id:emo_momomo:20151230135409p:plain

まあ、でも黒の方が見やすい気もする。。

特に色分けのところとか。

でも黒だとテンションが上がらない!という人は

変えた方がよいかもですね。

インターフェーステーマは、メニューバー周り、

シンタックステーマは下のタグ打ちするところです。

 

 

以上です!

 

今年最後のブログかな?

来年はたくさん書くぞー😆