女性らしいテイストにピッタリなデザイン欧文フォント 【クール・エレガント編】

Read More

女性らしいテイストにピッタリなデザイン欧文フォント 【クール・エレガント編】

女性らしいテイストといっても様々なものがありますが、その中から「クール」「エレガント」といったデザインで使えそうな細身のデザインフォントや美しいスクリプトフォントをまとめてみました。中には特徴的なデザインで使い方が難しい感じがするものもありますが、高級感を出したいときに使えたり洗練されたデザインとの相性が良さそうなものが多いです。

  • Posted on
  • Material
女性らしいテイストにピッタリなデザイン欧文フォント 【ポップ・手書き編】

Read More

女性らしいテイストにピッタリなデザイン欧文フォント 【ポップ・手書き編】

女性らしいテイストといっても様々なものがありますが、その中から「ポップ」「手書き風」といったデザインで使えそうな丸みがある可愛らしいデザインフォントや親しみやすい印象を与えることができる手書き風のデザインフォントをまとめてみました。

  • Posted on
  • Material
CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

Read More

CSSで実装するボタンホバー時のボーダーアニメーションエフェクト

自分用に一覧化したのがほしくて作ったのでシェアします。主にゴーストボタンなどのシンプルなボタンデザインのホバーエフェクトとして使われることが多いと思うボーダーアニメーションのサンプルです。どれも特別派手な動きでもなく同じような感じではありますが全5種類あり、すべてCSSだけで実装しているのでボーダーの太さやカラーなどは簡単に変更可能です。

  • Posted on
  • Tips
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法

Read More

CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法

特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。

  • Posted on
  • Tips
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

Read More

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置して width:100%; と height:auto; を指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像を表示させたい時は以下の方法で実装することができます。

  • Posted on
  • Tips
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
ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

Read More

ユーザーにサイトやサービスを案内するサイトツアー機能を実装できるスクリプト 10

初めてサイトに訪れてくれた人にどのような機能やコンテンツがあるのか紹介をしたり、ちょっとわかりづらいサービスなどでユーザーが戸惑わないよう手助けしたりするのに便利なサイトツアー機能を実装できるスクリプトのまとめです。jQueryプラグインや中にはBootstrapと組み合わせて使用する感じのものもありますが、単体で動くものもあります。大体同じような動きではありますが、単純にヒントを出していくだけのシンプルなものから、オプション・コールバックが豊富に用意されていていろいろ好みにいじれるものまで様々です。

  • Posted on
  • Tips
WordPress:投稿画面を1カラムにして入力・選択漏れを少しでも減らす

Read More

WordPress:投稿画面を1カラムにして入力・選択漏れを少しでも減らす

WordPressに限ったことではないですし、もちろん全てがそのようになっているわけではないのですが、記事を作成する際に例えばタイトル・抜粋・アイキャッチ・カテゴリー・タグなどのように、WordPressの投稿画面には入力・選択するべき項目が複数あります。ほとんどの人は公開前に見直ししたりするとは思いますが、それでもたまに抜けている部分に気付かず公開してしまうという人やあらかじめそのようなことをできるだけ避けた状態にしたい人向けとして、投稿画面を1カラムにして入力・選択漏れを少しでも減らすカスタマイズを紹介します。

  • Posted on
  • WordPress
簡単にハイクオリティなテキストエフェクトを表現できる素材 40 #3

Read More

簡単にハイクオリティなテキストエフェクトを表現できる素材 40 #3

簡単にハイクオリティなタイポグラフィーデザインを表現することができるテキストエフェクトのまとめで、シンプル・ウッド・ヴィンテージ・ネオン・メタルなど全40種類です。ファイル内に用意されているテキストやスマートオブジェクトを変更するだけでエフェクトを適用させることができるものが多く、デザインツールの操作が苦手という方でも簡単に作成することができます。

  • Posted on
  • Material
入力欄フォーカス時のアニメーションをまとめた「Awesome input focus effects」

Read More

入力欄フォーカス時のアニメーションをまとめた「Awesome input focus effects」

覚えておきたいと思ったので備忘録兼ねて。「Awesome input focus effects」はinputやtextareaといった入力欄へフォーカスした際のアニメーションをまとめているもので、3グループ・全24種類のエフェクトがあります。もちろん人によりますが、個人的にはいずれもシンプルな動き(見た目)に思うので、どのタイプのサイトでも取り入れられるように思います。

  • Posted on
  • Tips

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