» 【朗報】ブラウザでいちいち更新するのめんどくさくない?【エンジニアの皆様へ】|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

【朗報】ブラウザでいちいち更新するのめんどくさくない?【エンジニアの皆様へ】

スタッフブログ

  • 2019.05.28

    【朗報】ブラウザでいちいち更新するのめんどくさくない?【エンジニアの皆様へ】

    顔アイコン

     

     

    おはこんばんちは。

    どらごんでございます。

    さて今回は、最近僕が発見したエンジニアにとっては便利な機能をご紹介しようと思います。

     

     

     

     

    こんなことありません?

    ウェブサイトを構築しているときは、少しでも省きたいのが『手間』。

    なのに、やっていることといったら、

    1.一通り構築する。

         ↓

    2.ブラウザで確認する。

         ↓

    3.違っていたら直す。

         ↓

    4.ブラウザで確認する。

     

     

    こんな感じですよね?

     

    いつものように構築していたら、ふと気が付いたんです。

    「確認しながら構築できないか?」

    手間を省きたいのに、確認する作業が一つの流れの中に二つも入ってしまっているんです。

    これめっちゃ無駄じゃない?

     

     

    ということで、探した結果「Emmet live style」というプラグインがあることに行きつきました。

    簡単に説明をすると、「cssの編集が即時にブラウザに反映される。」というものです。

    このプラグインを使用すると、

    1.ブラウザを確認しながら構築する。
           ↓
    2.終わり

    こういうことになるんです。
    めっちゃ楽。

    ※Sublime Text3を使用、さらにPackage Controlのインストールは終わっている前提で進めます。

    ただ、使用できるまでいくつかの手順が必要なのでご説明します。

    1.プラグインのインストール

    pakage controlの「Install Pakege」から、Live Styleのプラグインを選択しインストール。
    インストールが完了すると、長々とよくわからないメッセージが表示されます。

    2.GoogleChrome用プラグインのインストール

    Emmet LiveStyleはGoogleChromeとの連携が必要なため、chromeにも別途拡張機能の追加が必要です。
    https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmgから拡張機能をブラウザにダウンロードして有効化します。

    3.Windows用のソフトをダウンロード

    今度はブラウザとパソコンを繋ぐためのソフトをダウンロードします。
    http://livestyle.io/

    Windowsをお使いの方はウィンドウズ版を。Macの方はMac版をそれぞれダウンロードしてください。

     

     

    以上で、準備は終わり。

    使ってみよう。

    では早速使ってみましょう。

    ブラウザの右上の↓

    img02

    をクリック。

     

    すると↓

    img03

     

    こんな画面が出てきます。この時点ではまだ反映されません。

    ですので。

    1.右上のOFFをONに。

     

    2.Add stylesheetをクリック。

     

    3.反映させたいCSSを選択。

    ※Sublimeで反映させるシートを開いていないと出てきません。

    ↓この表示になったら完了。

     

    img01

     

     

    これで、手間から解放される構築の始まりです(・∀・)ウヒョヒョ

     

     

     

     

     

     

    まとめ

    いかがでしたでしょうか?

    僕はもう手放せないくらいにお世話になっている機能です。

     

    ぜひこの感動を味わってほしくて、この度紹介させていただきました。

     

    皆さんも「NO手間コーディング」味わってみては?

     

     

     

     

     

     

     

     

     

     

    では(´∀`*)ノシ

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2020年12月
« 5月    
 123456
78910111213
14151617181920
21222324252627
28293031  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス