爆速コーディングを実現！Emmetの使い方とVSCodeのおすすめ設定まとめ | Web Design Trends
Emmetを使うと、HTMLやCSSを省略記法でコーディングできるようになり、作業効率が大幅に向上します。 VSCodeであれば、デフォルトの状態でEmmetが有効になっていて、特別な設定無しに利用することができるので、Emmetだと気付かずに使っている方も多いのではないでしょうか。 今回は、Emmetの基本的な使い方と、VSCodeでEmmetを利用する時のおすすめ設定をご紹介したいと思います。 Web制作者必見！VSCodeのおすすめ拡張機能15個まとめ VSCodeを使ってHTML/CSS/JavaScriptなどを使ったWeb制作、Webコーディングを行っている人も多いのではないでしょうか。 VSCodeは様々な拡張機能が公開されていて、それらを活... Web Design Trends Emmetとは Emmetとは、HTMLやCSSを省略記法で入力することができるプラグイン、
Web開発を爆速にする！Sublime Text 用のすごい拡張プラグイン厳選15個まとめ
Sublime Text は現在もっとも人気のあるコードエディタのひとつです。そのスピードとシンプルさ、豊富なプラグインで多くのプログラマーに愛されています。最大限に Sublime Text を活用するために、今回は普段よく利用している拡張機能をまとめてご紹介します。 詳細は以下から。 Package Control まずはじめに Package Control をインストールしなければ始まりません。Sublime Text の拡張機能を管理するためのパッケージで、これなしで拡張機能のインストール、削除も大変な作業となってしまいます。今回紹介するプラグインをインストールする前に、まず最初に行いましょう。 詳しいインストール方法については、こちらのページを参考にどうぞ。 JavaScript & NodeJS Snippet より素早くJavaScriptを記述することができるスニペットの
Gulp+WebPackで作るTypeScript開発環境【5分でできる！】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
それでは順を追って作ってみましょう！ ディレクトリの準備 まずはディレクトリを用意します。 今回はts-templateフォルダの中にindex.htmlを置きました。 ts-template �└── index.html 作ったらterminalで移動しましょう。 package.json作成 package.jsonを作成します。 npm init 何かいろいろ聞かれますが、全て[enter]でOKです。 ts-template ├── index.html └── package.json モジュールのインストール 必要なモジュールをインストールしましょう！ まとめてインストールもできますが、今回は1つずつインストールしていきます。 gulp gulp-connect gulp-webpack ts-loader typescript npm install gulp --save
Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
いい感じにコーディングを爆速化できるフロントエンド開発環境をリニューアル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近は少しずつCTO業務に取りかかれるようになってきました。やっぱり夏は忙しくなりそうです。こんにちは、先生です。 以前「エンジニアがいい感じにフロントエンド開発を爆速化できる環境構築の手順」という記事でフロントエンドの開発環境を作ったものを紹介しましたが、やはり変化の流れが激しく、この環境も少しずつ変化していきました。 今日は新しくなった環境をご紹介します。このまま使ってもいいですし、一部を取り入れてもいいと思います。 おさらい「爆速化できる環境」とは？ フロントエンド開発（コーディング）を早く終えるための環境で、以下のような機能を持ったテンプレートです。 外部テンプレート（EJS） SASS HTMLバリデーション ユニットテスト スプライト画像&SCSS生成 スタイルガイド生成 JS/CSSの圧縮 ES5で書ける（ES5非対応ブラウザへの自動対応） LiveReload（ファイルを更
Avocodeを使ってスライスとコーディングの効率をグッとあげよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
最近健康診断で初バリウムを体験してきました。意外と大丈夫だったのでもう怖くないですね。検査結果を除いては。こんにちは、先生です。 さて、みなさんはAvocodeをご存知でしょうか。今日はスライスとコーディングの効率を上げてくれる、このAvocodeを紹介します。 Avocodeとは http://avocode.com/ Avocodeはデザイナーとフロントエンドエンジニアの橋渡しとなるWebサービス＆アプリケーションです。 PhotoshopやSketchで作ったデザインデータを解析し、コーディングに必要な情報を表示したり、簡単にスライスを切って画像を出力したりすることができます。 またデザインデータのバージョン管理ができ、デザインにコメントがつけられるので、デザインレビューツールとしても活用することができます。 Avocodeができること デザインデータの追加/更新 Photoshop
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
パッケージマネージャーBowerとGulpを組み合わせてコーディングを効率化させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、外部ライターの田路です。 春の足音がどんどん大きくなってきていますね。 春といえば卒業の季節です。 今回はパッケージマネージャーBowerとGulpを組み合わせて、ファイルのコピペを卒業する方法をご紹介いたします。 使うための準備 jQueryとBootstrapを例に進めていきます BowerとGulpを使います 「フロントエンド用パッケージマネージャーBowerの導入方法と使い方」を参考に、Bowerの基本的な使い方を理解しておいてください。 「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」を参考に、Gulpへの入門を済ませておいてください。 黒い画面が苦手なあなたへ bower-browser – これは便利！Bower管理フロントエンド http://www.moongift.jp/2015/02/bower-browser-これは便利！bo
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう
2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
