gulp:とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル

Read More

gulp:とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル

主にこれからgulpを使い始めよう(使い始めた)という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。

  • Posted on
  • Services & Resource
gulp:タスクをファイル分割する方法

Read More

gulp:タスクをファイル分割する方法

gulpは実行したいタスクを gulpfile.js に記述していくというのをよく見かけると思いますが、タスクが増えれば増えるほど gulpfile.js 内の記述は増えていきます。もちろん特に気にならないという人もいるとは思いますが、できれば各タスクがどのような処理を行っているのか把握しやすくしたり管理しやすくしたいという場合は、以下で紹介する方法で各タスクをファイル分割することができます。

  • Posted on
  • Services & Resource
フォント検索・ワイヤーフレーム化・グリッド表示など、Web制作時に便利なブックマークレット 15

Read More

フォント検索・ワイヤーフレーム化・グリッド表示など、Web制作時に便利なブックマークレット 15

閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。

  • Posted on
  • Services & Resource
EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

Read More

EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

ひとりで行っているものであれば自分の中でルールが決まっているし使用するエディタがそのような設定になっていることがほとんどだと思うので特に必要ないと思いますが、逆に複数人で行うプロジェクトだったり自分とは全く異なるルールでコーディングしなければいけないとなると、毎回そのプロジェクト毎に設定を変更したり、他のメンバーにどのようなルールなのか説明するのが面倒です。そんな時に便利なのが「EditorConfig」というもので、例えばインデント設定や文字コードといったエディタ設定を自動で適用してくれるので、先述したようなプロジェクト・チーム間のエディタ設定を容易に統一させることができます。

  • Posted on
  • Services & Resource
gulp:特定のディレクトリやファイルを対象から除外する方法

Read More

gulp:特定のディレクトリやファイルを対象から除外する方法

gulpを使っていると基本的には指定した全てのファイルで処理を実行してほしいけれど、一部ファイルに関しては実行してほしくないという時があります。そんな時に使える特定のディレクトリやファイルを対象から除外する方法で、簡易的なものであれば特にプラグイン等も必要なく実装できます。

  • Posted on
  • Services & Resource
gulp:タスクやインストール済みプラグイン・モジュールの一覧を表示する方法

Read More

gulp:タスクやインストール済みプラグイン・モジュールの一覧を表示する方法

gulp使用時に現在どのようなタスクが定義されているか確認したり、どのプラグイン・モジュールをインストールしているかをコマンドで確認する方法です。すごく使用頻度が高いというわけではないですが、ざっくりと定義されてるタスクを見たい時や package.json を見に行くのが面倒な時に使えます。

  • Posted on
  • Services & Resource
Brackets:様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」

Read More

Brackets:様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」

Bracketsでスニペットの登録・管理を行いたい時に便利なエクステンション「Brackets Snippets (by edc)」を紹介します。Bracketsユーザーで且つEmmetを利用しており、言語も普段からよく使うのはHTML・CSS・JavaScript辺りとかであれば、Emmetで十分だったり足りなくてもsnippets.jsonいじって追加とかで事足りる人もいるとは思いますが、例えばそれをもっとわかりやすく管理したいとかPHP・Ruby・Pythonといったその他の言語でもスニペットを管理したり簡単に呼び出せるようにしたいという時に便利なエクステンションです。

  • Posted on
  • Services & Resource
Bracketsで行間(line-height)を変更する方法

Read More

Bracketsで行間(line-height)を変更する方法

僕が知らないだけな可能性もありますが、Bracketsではフォントサイズやフォントファミリーを変更することは「表示 > テーマ」から設定可能ですが、行間を設定できる項目が見当たりません。デフォルトがあからさまに見辛いということでもないのですが、エディタ内の行間を変更する方法を見かけて変更してみたので備忘録です。

  • Posted on
  • Services & Resource
様々なサービスやブランドのロゴをSVGとPNG形式でダウンロードできる「Instant Logo Search」

Read More

様々なサービスやブランドのロゴをSVGとPNG形式でダウンロードできる「Instant Logo Search」

覚えておきたいと思ったので備忘録兼ねてご紹介。「Instant Logo Search」は様々な有名サービスやブランドのロゴデザインをSVGまたはPNG形式でダウンロードすることができるサイトです。他の同じようなサイトではあまり見かけないような国内の企業やサービスのロゴなども多数含まれているので、特にデザイナーの方など覚えておいて損はないと思います。

  • Posted on
  • Material
Flexboxの具体的な使用例がまとめられた「Flexbox Patterns」

Read More

Flexboxの具体的な使用例がまとめられた「Flexbox Patterns」

数は少ないですが、今後増えるの期待しつつ覚えておきたかったので備忘録。「Flexbox Patterns」はタブ・フッター・リストなどサイトでよく使われるレイアウトやパーツを、CSSのFlexboxを使った実装例としてまとめているサイトです。Flexboxが便利なのはわかるけど具体的にどんなところに使うのかまだピンとこない人や勉強したい人には便利そうです。

  • Posted on
  • Services & Resource
Webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100+

Read More

Webサイト制作や勉強をする際に役立つ便利なツール・サイトまとめ 100+

画像の軽量化やコード圧縮といったツールをはじめ、各種リファレンスサイト、利用している人が多いエディタやデザインツールのショートカット一覧など、Web制作時に便利だと思うツール・サイト・チートシートを自分のブックマークがかなり乱雑化してきたのでその整理も兼ねて一気にまとめてみました。もちろん他にもこういった便利なものは沢山ありますし、自分も普段からここで紹介しているもの全てを利用しているというわけではないのですが、こういったものを利用することで人によっては大幅に制作時間を減らすこともできると思います。また、覚えておくとど忘れした時に容易に確認等もできたり、勉強時の参考にすることができるものもあります。

  • Posted on
  • Services & Resource

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。