タグ

ブックマーク / www.nxworld.net (4)

  • UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld

    webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect

    UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
  • gulp:とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld

    主にこれからgulpを使い始めよう(使い始めた)という人向けに、とりあえず覚えておきたいよく利用するタスクの基的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基的な使用方法(環境準備やインストールなど)については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな

    gulp:とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
  • フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld

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

    フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld
  • CSSグラデーションを使ったデザインパーツサンプル - NxWorld

    わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSlinear-gradient。 未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。 よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。 以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスなどは必要に応じて追記・変更してください。 ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 テキストが徐々に見えなくなる #1 イメージ(右)のようにテキストの上にグラデーションを重ねることで徐々にテキス

    CSSグラデーションを使ったデザインパーツサンプル - NxWorld
  • 1