リセット用CSSはもういらない、ブラウザのバージョンに適したスタイルを適用して標準化 -PostCSS Normalize
ブラウザごとに異なるデフォルトのスタイルを整える時、リセット用CSSやノーマライズCSSを使用して、すべてのブラウザに共通のスタイルシートを適用している人が多いと思います。 定義したブラウザのリストに基づいて、normalize.cssの必要なスタイルのみを使用できるPostCSS Normalizeを紹介します。 PostCSS Normalize -GitHub normalize.cssについては、下記を参考に。 Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意 PostCSS Normalizeは、browserl.istに基づいて必要なnormalize.cssの必要なスタイルのみを使用できます。 例えば、各ブラウザの最新から3つまでのバージョン、IEだと9, 10, 11をサポートする場合は、下記のようにな
動画キャプチャで解説！gulp.jsのインストール方法と簡単な使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのはっちゃんです。 自分は髭が濃く、小学生の頃から電動髭剃りで剃っていたほどなのですが、LIGに入ってからは髭キャラとして生かすことができました。濃く産んでくれた親に感謝しています。 話は変わって、LIGのフロントエンドエンジニアによる連載がはじまります！ 今回は「gulp.js編」の第1回。gulpについては、すでに多くの技術書や記事が出回っていますが、今回は連載という形で改めて基礎から応用までをご紹介していきます。 こんなこともできたんだ！という新たな発見もあるかもしれません。 gulpを使う理由 制作をしていて、こういったことを面倒くさいと感じたことはありませんか？ 修正があったときに、同じHTMLのパーツを探して全部修正する Webサービスを利用してCSSやJavaScriptを圧縮する スプライト画像が増えるたびにPhotoshopなどでいちい
Gulp導入手順 - Qiita
node.jsのインストール node.jsにて開発されているので、まだインストールしていない場合はインストールが必要です。 node.js gulpのインストール（グローバル） コマンドラインにて作業を進めます。
BrowserSyncはLiveReloadより手軽で便利 – なんてこったい
長らく、HTML/CSSコーディングをする時にはGrunt + LiveReloadを使ってファイル更新時のブラウザ自動リロードを実現してきたが、BrowserSyncに乗り換えるのも悪くないかもしれない。 LiveReloadもBrowserSyncも 動作確認用のブラウザと作業用のエディタを並べて作業し エディタでファイルを編集・保存したら 自動的にブラウザ側でリロードをする という基本的な機能・目的は同じ。 Gruntと組み合わせて使う場合はLiveReloadでもなんの不便はないのだが、Gruntを使わないような場合(PHPやRuby on Railsのプロジェクトとか)だと、使えるようにするための設定が面倒臭い(ブラウザにエクステンションいれるか、HTML側に手を入れる必要がある)という問題があり、どうしたものかと思って調べていたところBrowserSyncの噂を聞いた。 Liv
gulp Webサイトコーディングを効率化する必要最小限4つのプラグインの導入手順
2016/11/15 gulp-compassをやめて、gulp-sassに変更しました。 gulpプラグインは多数公開されていますが、実務に必要なものはそう多くありません。 4つあるだけで作業時間をかなり短縮できますから、その導入手順を紹介します。 gulpの準備については、1つ前の記事をご覧ください。 目次4つのプラグインプラグインをインストール作業用ディレクトリを構築gulpfile.js 作成gulp 起動gulp 停止プラグインのアンインストール方法 4つのプラグインBrowsersyncファイルを保存するとブラウザに反映するライブリロード系。 ブラウザ間の同期機能があり、現時点では最も便利。 gulpなしの単体でも使える。 gulp-sassgulp-compassは謎エラーが多いので、gulp-sassを利用。 gulp-autoprefixerコンパイル後のCSSに、現時点
いまさらgulpはじめてみました - 終電23時11分って早くね？
GulpとかGruntとか「タスクランナー」って聞くとだいぶ敷居がたけえなって感じていた私。 「色々何でもタスクにしてGulpとか使うとめっちゃはかどるよ！！」 って言われても色々何でもって・・・覚えること多そう・・・ ってなってずっと敬遠してたんですがこのたび重い腰をあげて、 ようやっと手をだしてみたのでまとめます。 同じように感じていた人が使ってみてうおーってなってくれるとうれしい。 なるべく分かりやすくgulpがどんな感じのものか手順をまとめたつもりなので、 上から順番に手元で動かしながら試してみてもらえばと。 とりあえずやってみたこと(gulpにどんなタスクを実行させたか) CSSとかJSとかを更新するとブラウザが自動的に更新される。 CSS・JSを編集して、ブラウザに切り替えて、F5押して・・・っていう作業をしなくてよくなります。 CSS・JSファイルを圧縮する。 ファイル容量が
サックっとbrowser-syncを設定 - Qiita
gulpfile.js作成 myproj以下にgulpfile.jsを下記の内容で作成。 下記はXtraFinderなどの、「新規ファイルテンプレート」とかに登録しとくと楽。 var gulp = require('gulp'); var browserSync =require('browser-sync'); gulp.task('default', ['browser-sync']); gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "./htdocs/" //対象ディレクトリ ,index : "index.html" //インデックスファイル } }); }); // //ブラウザリロード // gulp.task('bs-reload', function () { browserS
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
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
