HTML/CSS5-1 Sublimetext カスタマイズ

ここまでHTMLやCSSの基本的なことを学んできました。

次はSublimetextをカスタマイズして、制作スピードをあげるようにしましょう。

なお、このレッスンの終わりには、簡単なスマホサイトの制作、サーバーアップロードなどについても説明予定です。

まずは、Sublimetextですが、Pacage Controlをインストールし、様々なパッケージを使用できるようにしていきます。

今回導入するパッケージは、Emmetです。

Sublimetextには、ショートカットキー一覧が確認できるページがあります。

Sublime Text | Periodic table of the Keyboard Shortcuts.(Windows)

こちらでショートカットキーを覚えておくと作業効率がアップします。

※Macの方は、上のリンゴマークをクリックするとMac用ショートカットキーが確認できます。

PackageControllをインストールしましょう。Sublime Textを開いておきます。

これを入れると、HTMLのコードをハイライトしてくれるパッケージや入力補助をしてくれるパッケージなどを簡単にSublime Textに機能を追加することができます。(今回はSublimetext3へのインストール方法となっています。)

Sublime Text 3 PackageControll

https://sublime.wbond.net/installation

まずは上のサイトからスクリプトをコピーします。今回はSublime Text 3を使用してのインストール方法なので

Sublime Text 3のタブをクリックします。Pythonコード(画像青い部分)をコピーします。

lesson1

メニューより「View」→「Show Console」と選択すると、画面下にコンソールが表示されます。

lesson2

Package ControlをインストールするためのPythonコード(上記URL画像青い部分)のコピーを、コンソール(下の小さな四角い部分)に貼り付け、[Enter]キーを押下します。

lesson3

 

lesson4

 

上記のような画面になったらインストール完了です。一度Sublime Textを閉じて、もう一度開きましょう。

プラグインをインストールしていきます。

Preferences -> Package Control を開きます。

Package Controlが開いたらInstall Packageを選択します。

入れるプラグイン名を入れると途中である程度検索されたものが出てきます。emmと入れるとEmmetが出てきました。

Emmetを選択するとプラグインのインストールが開始されます。

lesson5

 

lesson6

 

上記の画面が出たらインストール完了です。ここでSublimeTextを再起動してインストールを完了させましょう。(いったん閉じてもう一度開いてください。)

先の方法でインストールできない場合や、SSL 経由でパッケージを入手したい場合は、手動インストールを選ぶ事もできます。
手順は以下のとおり。

Package Control.sublime-package」をダウンロード
すぐダウンロード開始されます。
Sublime Text 3 の「Preferences」→「Brows Packages」→ エクスプローラが開くので、ひとつ上の階層内の「Installed Packages 」ディレクトリを開く(例:C:Users[ユーザー名]AppDataRoamingSublime Text 3Installed Packages)
「1」 のファイルを「2」にコピーして Sublime Text 3 を再起動

ublime Text の「Tools」→「Command Palette」で「Package」と入力して「Package Control」関連機能が出ればインストールできています。
emmet をインストールしたが、PyV8インストールさていないと出た場合、下記より必要なファイルをDLしてサイト内にある
容量で、必要な場所にpyV8関連のファイルを入れれば動くようになります。

https://github.com/emmetio/pyv8-binaries

必要があれば、ショートカットキーの設定をします。

SublimeTextははデフォルトでも便利なショートカットキー(キーバインド)が用意されていますが、自分好みのエディタにカスタマイズするとより便利です。

やり方は、少し複雑ですが、基本的なルールに則って行けば難易度は高くないはずです。

注意点としては、インストールしたパッケージと設定したショートカットキーが衝突してしまうことです。割り当て時には一度確認しておくことをおすすめします。

ショートカットキーは検索エンジンで検索すればたくさん出てきますので、自分好みのキー設定を探してみてください。

最後に設定画面を閉じて保存(Save)し、SublimeTextを再起動すれば設定は完了です。

他にも下記のプラグインは便利なので入れておくといいかもしれません。

  • SublimeLineter:エラーチェッカー
  • HTML5:HTML5のスニペット集、自動補完とハイライト
  • BracketHighlighter:開始/終了タグの強調
  • SublimeLinter-html-tidy:HTML5の構文チェッカー
  • SublimeLinter-jshint:JavaScriptの構文チェッカー
  • SublimeLinter-phplint:PHPの構文チェッカー
  • WordPress:WordPressのコード補完
  • CSS Format:CSSを整形、プロパティをアルファベット順に整列
  • AutoFileName:画像やCSSでパス入力をするときにファイル名を補完

他にも Sublime Text プラグイン と検索すると便利な機能があると思います。

次からのページ作成は、Emmetがインストールされている前提で制作していきます。

 

Scroll Up