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
各種カーソルの見た目と対応ブラウザが確認できる「CSS Cursor」

Read More

各種カーソルの見た目と対応ブラウザが確認できる「CSS Cursor」

地味ですけど便利だと思ったので備忘録兼ねてご紹介。CSSを使ってカーソルの見た目を変更することができるのですが、「CSS Cursor」はそれらをまとめているサイトで、CSSでどのように記述することでどのようなカーソルが表示されるようになるのかを簡単に確認できるようになっています。また、見た目だけでなく併せて対応ブラウザについても確認できます。

  • Posted on
  • Services & Resource
参考デザインの管理やインスピレーション向上に役立ちそうなChromeエクステンション

Read More

参考デザインの管理やインスピレーション向上に役立ちそうなChromeエクステンション

自分はデザインが得意ではなく引き出しもあまりないので、日頃から参考にさせてもらうために素敵だなと思うサイトやデザインを見つけてはメモしたり、時間がある時は沢山のデザインをできるだけ見るようにしているのですが、同じような方に便利だなと思ったChromeエクステンションです。いずれも参考デザインの管理に役立つものやChromeの新規タブを使って様々なデザインなどを見ることができるものになります。結局いろいろと試した結果愛用しているのは2つだけなのですが、他のも今後使用することがあるかもしれないし、折角使ってみたので備忘録兼ねて試してみたものをひと通りご紹介します。

  • Posted on
  • Services & Resource
ロゴデータやカラーコード確認など、サイト・ブログ制作時に利用する機会が多いサービスのガイドラインリンク集

Read More

ロゴデータやカラーコード確認など、サイト・ブログ制作時に利用する機会が多いサービスのガイドラインリンク集

サイト制作時にTwitterやFacebookなどのソーシャルメディアサービスのボタンを設置する機会が多いと思いますが、それらを特に独自デザインなどで実装する場合はロゴデータが必要だったり、どのようなカラーコードを使用しているかなどを調べることがあります。自分もそのような場合は公式からデータをもらったりカラー確認したりするのですが、毎回ググるのが面倒なのと、サービスによってはすぐに該当ページを見つけられないなんてことも稀にあるので、個人的にサイトやブログ制作時によく設置・利用されると思う各種サービスのガイドラインへのリンクを一覧化しました。

  • Posted on
  • Services & Resource
有名なWebサービスやサイトのロゴが一覧化され、SVGコードやカラーコードも確認できる「Simple Icons」

Read More

有名なWebサービスやサイトのロゴが一覧化され、SVGコードやカラーコードも確認できる「Simple Icons」

これは普通に便利で覚えておきたいと思ったので、備忘録兼ねてご紹介。「Simple Icons」はFacebookやInstagramといった有名なWebサービスのロゴが一覧化されれているサイトで、それぞれのSVGコードやカラーコードを容易に確認することができます。一覧化されているのはソーシャルサービスに限らず、他にもAppleやYahoo!のロゴもあったり、WordPress、Dropbox、Wikipediaなど様々なサービスやサイトがあります。

  • Posted on
  • Services & Resource
Brackets:コードヒントやクイックドキュメントを拡張できるエクステンションまとめ

Read More

Brackets:コードヒントやクイックドキュメントを拡張できるエクステンションまとめ

Bracketsにはコーディング時に役立つ機能として、HTML・CSS・JavaScriptを記述する際にヒントを出してくれるコードヒントとCSSの各種プロパティについて簡単なドキュメントを確認できるクイックドキュメントという機能が予めついているのですが、それらを更に便利にしてくれるエクステンションを紹介します。また、正確には少し違うのかもしれませんが、同じくコーディング時にヒントを出してくれたり、プロパティなどのブラウザ対応状況を確認することができるエクステンションも併せて紹介します。

  • 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のアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。