WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

HTMLを書く前に!作業が爆速になる高機能エディタの使い方を覚えよう

コーディングの環境を整える

HTML・CSS・javascriptといったWEBサイトを作るためのコードはwindowsのテキストエディタ、Macのテキストエディットなどでも作ることができます。windowsならば拡張子の.txtを.htmlに変更してあげるだけでHTMLファイルにすることができます。

しかしそれでは作業が遅く、すべてが手書きになるのでHTMLの習熟が遅くなり非効率です。そこで使用するのが無料のテキストエディタです。有料のものを含めて有名なものをご紹介します。

デザイナーLevel:1 「はじめてのWEBデザイン」目次

この記事の内容

コーディングで使用する高機能テキストエディタ・オーサリングソフト

Sublime Text3

SublimeText
Sublime Text3

Atom

atom
https://atom.io/

Vim

vim
http://vim-jp.org/

秀丸(4,320円)

hidemaru
http://hide.maruo.co.jp/software/hidemaru.html

Dreamweaver(月2,180円~)

Dreamweaver
http://www.adobe.com/jp/products/dreamweaver.html

実際のWEBデザインの現場の多くでAtomやSublime Textが使われていて、業界の常識としてDreamweaverの操作スキルが必須とされています。ブログやウェブサイトを立ち上げるだけが目的ならば無料の高機能エディタを利用し、WEBデザイナーを目指すのであればDreamweaverを購入しましょう。

使いやすさでいうと、手書きでHTMLやCSSを書ける人ならばSublime TextかAtom、初心者であればDreamweaverが補助機能が最初から付いているため使いやすいです。Sublime Textなどの無料高機能エディタは使いやすくためのカスタマイズが初めてWEBデザインをする人には大変です。

高機能エディタを使うと学習速度が早くなる

なぜ高機能なテキストエディタが必要なのか。それは打ち込もうとするコードを予測してヒントが表示されるからです。例えばGoogle日本語入力や検索画面でも自分が打ち込もうとしてる単語を数文字入れると候補の単語が現れますね。この機能がエディタに搭載されているのです。

この機能を使用ことでうろ覚えだったコードでもエディタが候補として出してくれますので、再確認でき暗記しやすくなります。ほとんどのWEBデザイナーはこの機能を活用してコードの記述スピードをあげています。

Sublime Textを使用インストールしてWEBデザインに使いやすいようにカスタマイズする

Sublime Textのインストールが完了したらアプリケーションを立ち上げます。
まずはSublime Texstに機能を追加するためのPackage Controをインストールします。

Package Controlをインストール

View>Consoleを選択して、エディタの下に入力欄を表示せます。

コンソールにコードを入力

次にhttps://packagecontrol.io/installationの「Sublimetext3」タブに書かれているコードをコピーして、起動してるSublime Textの下の入力欄にペーストしてEnterを押します。

import urllib.request,os,hashlib; h = ‘2915d1851351e5ee549c20394736b442’ + ‘8bc59f460fa1548d1514676163dafc88’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://packagecontrol.io/’ + pf.replace(‘ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)

エラーが出たら再起動

これでpackage cotrollのインストールは完了です。この機能を使って機能をどんどん拡張していきます。時々インストールのエラー表示が出ることがありますが、
Preferenceの中にPackage Controllが表示されていれば問題ありません。念のため再起動をおすすめします。

Package Controllから機能拡張プラグインをインストール

Package controlを選択

Tool > Comand Palette(Ctrl+Shift+P)からコマンドパレットを起動します。表示されたウィンドウに「install」と打ち込めば「Package Controll : Install Package」という項目が出るのでクリックします。そうするとインストールできるプラグイン一覧が表示されます。

プラグインをインストール

ここでは私が普段使用していてHTMLとCSSのコーディングで役に立つプラグインをご紹介します。
慣れてきたらいろいろ調べてみて自分の使いやすいプラグインをインストールするといいでしょう。

Sublime Textに必須なプラグイン

IME Support

IME Support
デフォルト設定のSublime Textだと日本語の変換がアプリの画面の外に表示するため入力しづらくなっています。
アプリの中で日本語変換が正確に使えるように対応させます。

ConvertToUTF8

Shif-JISなどの文字コードはSublime Textで開くと文字化けします。それを防いでくれるプラグインです。WEBデザイン初心者の方はピンとこないかも知れませんがSublime Textを仕事で使う上で必須のプラグインです。

HTML・CSSコーディングに便利なプラグイン

HTML5

HTML5

HTML5のコード補完のプラグイン。タグの頭文字を打ち込むことでコードが表示されることからうろ覚えが多い初心者が勉強するには必須のコードです。
熟練のWEBデザイナーはこの機能を利用してこのようなタグを記述しようとする。

実際はこれだけ打ち込んで表示されたタグを選んでEnterを押すことで効率良くコードを書いていきます。

Emmet

emmet
旧Zen-cordingと呼ばれていた、当時WEBデザイナーたちを熱狂させたコーディング補助プラグイン。Dreamweaver版もあります。HTMLやCSSで特定の文字を打ち込みTabかCtrl+Eを押すことで定形コードに変換させる。pと入力してTabをクリックすれば

このようになります。多くの補完機能を持つため、そのルールを覚えることに時間を費やしても十分価値のあるプラグインです。

エメットのショートカットキー一覧

All Auto complete

All  Auto complete
コードの補完機能を強化してくれるプラグイン。HTMLは【HTML5】プラグインで補完してくれますが、こちらのプラグインはCSSのクラス名などを補完してくれるためコーディングが捗ります。

BracketHightlighter

BracketHightlighter
タグのはじめと終わりを強調してくれるプラグイン。HTMLでよく使用するダブルクォートにも対応しています。複雑なコードになると、開始タグと終了タグの位置が分からなくなることがあるため、コーディングには必須プラグインです。

syncedsidebar

syncedsidebar
Sublime Textのサイドバーに現在編集しているファイルを表示してくれるプラグイン。複数のファイルを同時に編集することに長けているテキストエディタであるため、その分どのファイルを編集しているのかが分からなくなってしまう欠点を解消してくれるプラグインです。

Sublime Textの基本的な使い方のおすすめ

SublimeTextの使い方

起動したらすでにコードを入力できるようになっています。
この状態ではHTMLなのかCSSなのかの判別ができないため、Emmetなどの補助機能が上手く作動しません。よってどの形式のコーディングをするのかを選択します

テキスト編集モードの切替

右下の【Plain Text】と書かれている箇所をクリックして【HTML】を選択します。
こうして編集するファイルはHTMLとして扱われ、補完機能も作動します。

サイドバーを表示させよう

ウェブサイトはHTMLが置いてあるフォルダとは別のフォルダあるCSSを読み込んだり、画像を指定したりと複数のフォルダによって管理運用します。
そのためウェブサイト一式が入ったフォルダを表示させておくと編集速度が早くなります。

サイドバーとプロジェクトの表示

まずはView> Side Bar > Show Side Barと選択肢、Sublime Textの左側にサイドバーを表示させます。
その後ウェブサイト一式が入ったフォルダをサイドバーにドラッグアンドドロップすることでファイル管理をSublime Textで行うことが出来るようになります。

HTMLファイルを作って保存してみよう

Sublime Textは起動したらコードを打ち込める状態なので、右下の【Plain Text】を【HTML】に変更しても良いですし、Ctrl+Nを押すことで「untitled」というファイルを作ることができます。File> Save(Ctrl+S)で現在作業中のファイルを保存できます。この時編集モードをHTMLに指定していれば自動的に拡張子【.html】つきます。

これがSublime Textを使用したHTMLファイルの作り方と保存の仕方です。

WEBデザイナーを目指す人はDreamweaverを使用する

dreamweaver

就職やアルバイト採用を目指すのであればDreamweaverをおすすめします。実際のデザイン現場ではSublime Textなども多くのデザイナーが使用しますが会社としてはDreamweaverが基準としているところが多いからです。またSublime Textを愛用している多くのデザイナーのほとんどはDreamweaverを使用することができます。仕事としてのWEBデザイアナーを目指すのであればデファクトスタンダードに合わせましょう。

コーディングの補完プラグインEmmetも最新のDreamweaver CCでは標準でインストールされています。
もちろんSublime Textと同時並行でコーティングとアプリ操作を学べればなお良しです。

Adobeクリエイティブクラウドに加入

WEBデザイナー志望の方にDreamweaverをすすめるのはもう1点の理由があります。デザイナーになるならPhotoshopとIllustratorの勉強も必須となるからです。Adobe製品の単品の使用料金は月額2180円。すべてのアプリケーションが使用できるコンプリートプランが4980円です。

PhotoshopとIllustratorを買ったらDreamweaverがついてくる計算になります。Dreamweaverはカスタマイズ不要でWEBデザイナーのコーディングの勉強環境が整っていますので、HTMLとCSSの基礎を覚えるまではこちらを使用することをおすすめします。

http://www.adobe.com/jp/creativecloud.html

Dreamweaverを起動してサイトを追加する

サイトを新規作成

DreamweaverはSublime Textと少し作業の仕方が異なります。
起動したらまず最初にプロジェクトを作ります。ウェブサイトのフォルダを指定するということです。

サイト>新規サイトを選択して、ウェブサイトを作るフォルダを選択します。

サイドバーにサイトが表示

そうすると右のサイドバーにプロジェクトが表示されます。ここでファイルの管理を行いながらウェブサイトを作っていきます。

新規ファイルからHTMLを作成する

DreamweaverでHTMLを作る

ファイル>新規作成(Ctrl+N)でファイルを新規作成します。ここで色々なファイルを選択できますが、まずはHTMLを選択しましょう。
すでに色々なHTMLのタグが記載されているファイルが作られます。

Dreamweaverの編集画面

コードが見えない場合は【分割】ボタンを押すとコードとプレビューで上下にわかれた画面が表示されます。分割ボタンの横に【デザイン】【ライブ】と選ぶ項目があります。【デザイン】を選ぶとおおまかなデザインが表示され、テキスト編集などは実際のプレビュー画面内で編集することができます。そうするとコード部分にも反映されます。

【ライブ】はブラウザでの表示に近いかたちで記述したコードを表現してくれます。どのようなコードを書くとブラウザではどう表示されるのかをリアルタイムで確認しながら作業でできますので、初心者のWEBデザインの勉強としてはDreamweaverの方が便利です。

ファイルを保存する

ファイル>保存(Ctrl+S)をクリックでファイルを保存します。

カスタマイズが終わったらいよいよコーティングへ

これがコーティングの勉強に入る前のテキストエディタのカスタマイズになります。
Sublime TextやDreamweaverをインストールし、HTMLやCSSの勉強できるプラグインをインストール完了したら、いよいよ実際にコードを書き始めることになります。
ここまできたらあとは実践あるのみです。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST