1. ホーム
  2. コラム
  3. CSS修正の速度が向上!ChromeとSublime Text使用してリアルタイム即反映!

CSS修正の速度が向上!ChromeとSublime Text使用してリアルタイム即反映!

CSS修正の速度が向上するChromeとSublime Textの環境設定をご紹介します。

コーディングによる更新作業で、良く使用している手法としてChromeの「要素の検証(デベロッパーツール)」を使用したCSSのデバック対応があります。
しかし、この方法で修正作業を行うと「ブラウザチェック」→「要素の検証で修正」→「ファイルのコード修正」→「保存」→「リロード」→「ブラウザチェック」を繰り返し作業しなければならず効率が悪いです。
そこで、今回はこの工程を省く事が可能となるSublime TextとChromeの環境設定の導入方法についてまとめました。

導入手順

今回の設定では、Sublime Text3とChromeとEmmet LiveStyleを使用して設定していきます。

1、Sublime TextにLiveStyleパッケージをインストール

2、Chromeの拡張機能でLiveStyleをインストール

3、Emmet LiveStyleのアプリケーションをインストール

導入方法

1、Sublime TextにLiveStyleパッケージをインストール

① Sublime Textを開きメニューから「Preferences(基本設定)→Package Control(パッケージコントロール)」を選択。ショートカットでは「Ctrl + Shift + P」で表示。

② 「package install」と入力してPackage Control: Install Package」を選択。

③ 検索画面にlive styleを入力し「LiveStyle」を選択。

2、Chromeの拡張機能でLiveStyleをインストール

① アドレスバーで「Livestyle 拡張機能」と検索。

② 表示されたページの右上「Chromeに追加ボタン」をクリック。

3、Emmet LiveStyleのアプリケーションをインストール

こちらの「livestyleページ」にアクセス。

② 中央のDownloadボタンをクリック。

③ ダウンロードした「LiveStyleSetup.exe」ファイルをダブルクリック。

④ 上記の画面が出れば準備完了。

操作方法

① Chromeメニューバーのアイコンから、Enable LiveStyle をONにする。

② 同期編集したいCSSファイルを選択する。

③ 双方向編集がリアルタイムで反映されているか確認する。

今回の設定をするだけで無駄な工程を省く事ができ、楽に更新作業ができる様になります。
編集時はデベロッパーツールを開いた状態にしなければなりませんが、容量の大きいファイルでない限り動作に遅延が出ることはありません。
構築の際もリアルタイムでレイアウトを確認できるので便利です。

コーディングのスピード向上のための1つの便利ツールとして使用して頂ければ幸いです。
Sublime Textを業務で使用している方は利用してはいかがでしょうか?


■コラム執筆者

第1ビジネスユニット アカウントサービス第17ユニット 飯塚 祐毅

カテゴリ: Webサイト構築
2016年06月08日

RSS