デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
各項目を選択・入力するだけでgulpで使用するソースを出力してくれるジェネレータ「gulp generator」 - NxWorld
「gulp generator」はgulpで使用するgulpfile.jsとpackage.jsonに記述するソースを出力してくれるジェネレータで、用意されている各項目を選択したりファイルの読み込み・出力箇所を入力していくだけで簡単に必要なソースを出力してくれます。 サイトにアクセスすると上のイメージのような見栄えになっており、ページ左側で実行したいタスクを選択したりファイルの読み込み・出力箇所を入力して、その結果としてページ右側にgulpfile.jsとpackage.jsonに記述するためのソースが出力されるようになっています。 タスクの選択部分は大きく分けて「css」「js」「html」「その他」の4つに分類されており、上のイメージ（イメージは「css」を選択時）のようにそれぞれファイルのパス指定をする部分と各タスクを選択する項目が用意されています。 よく利用されると思うようなものは
ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」 - NxWorld
「Radiobox.css」と「Checkbox.css」は、それぞれラジオボタンとチェックボックスの選択時にアニメーションを加えることができるスタイルシートです。 全体的にこれどんな場面で使うのっていう感じのエフェクトが多いので案件などではあまり使われなそうですが、ちょっと遊び心いれたいとか変わったアニメーションを付けたい時には便利かもしれません。 Radiobox.css 「Radiobox.css」はラジオボタン選択時にアニメーションを付けることができるCSSで、小刻みに動くTremolo、跳ねるBoing、回転するWheelなど全12種類のアニメーションがあります。 アニメーションの適用は簡単で、該当のCSS（radiobox.min.css）を読み込み、あとは<input type="radio" />に特定のクラスを記述するだけです。 例えば、Boingエフェクトはクラスが.r
ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ - NxWorld
既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc
フォント検索・ワイヤーフレーム化・グリッド表示など、web制作時に便利なブックマークレット 15 - NxWorld
閲覧ページにグリッドを表示させたりレスポンシブ確認を容易にするものをはじめ、使用されているフォント確認、ページをワイヤーフレーム化するもの、ページの表示速度やHTMLチェックを行ってくれるものなど、サイト制作時や気になるサイトのことをちょっと調べたい時などに便利なブックマークレットを紹介します。 中には拡張機能やデベロッパーツール使えば十分というものもありますが、拡張機能を入れすぎて重くなるのを防ぎたいという場合やデベロッパーツールをあまり使っていないという人には手軽で便利ですし、何より様々なブラウザで使用できるのが嬉しいと思います。 ここではブックマークレットとして紹介していますが、中にはChromeの拡張機能として利用できるものもあるので、その場合は自分が使いやすいと思う方を利用してみてください。 また、ブックマークレットによってはPCだけでなくスマートフォンなどでも十分利用できるもの
Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」 - NxWorld
CSSでn番目の要素に適用したいときなどに利用する:nth-child疑似クラスや:nth-last-child疑似クラスですが、先頭または最後からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考えることがあると思います。 「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはSass(SCSS)を使っているのが条件にはなりますが、ちょっと複雑そうな指定もわかりやすく容易な記述で指定することができます。 使い方 まず、必要なSCSS (Family.scss) を配布サイト上部にある「DOWNLOAD」ボタン、またはGitHubからダウンロードするなどして読み込みます。 あとは、普段mixinを使うときと同様で@include mixin-name(n)という感じで記述すれば利用することができ、引数の部分は場合によっては空に
CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法 - NxWorld
特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。 これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを使わなくてもよくなったり、CSSも以前よりシンプルな記述で実装できるようになっているので、自分が最近利用した実装方法を備忘録も兼ねていくつか紹介します。
CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。 背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。 実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px 高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin
Brackets：様々な言語のスニペット登録・管理ができるエクステンション「Brackets Snippets (by edc)」 - NxWorld
Bracketsでスニペットの登録・管理を行いたいときに便利なエクステンション「Brackets Snippets (by edc)」を紹介します。 Bracketsユーザーで且つEmmetを利用しており、言語も普段からよく使うのはHTML・CSS・JavaScript辺りとかであれば、Emmetで十分だったり足りなくてもsnippets.jsonいじって追加とかで事足りる人もいるとは思いますが、例えばそれをもっとわかりやすく管理したいとかPHP・Ruby・Pythonといったその他の言語でもスニペットを管理したり簡単に呼び出せるようにしたいというときに便利なエクステンションです。 Bracketsの「拡張機能マネージャー」で**Brackets Snippets (by edc)**と検索すれば該当のエクステンションが出てくると思うのでインストール・有効化します。 エクステンションが有効
WordPress：カスタムフィールドの値で改行入力した際、そのまま表示したり任意のタグで括って表示する方法 - NxWorld
WordPressでカスタムフィールドの値入力欄で改行入力した際、単純に表示させるだけでは改行は反映されずに表示されます。 それをしっかり改行も反映させて表示させたり、改行された各行を任意のタグで括ってから表示させたりする方法です。 紹介している内容は下の入力イメージのように入力欄がテキストエリアの場合で説明しています。 ここではいずれもget_post_meta( $post_id, $key, $single );を利用する形で紹介します。 また、エスケープしたり値有無のチェックを行うなどの記述は省いているので、その辺は必要に応じて追記してください。 単純に表示する 例としてキーがfooだった場合、表示する方法としてよく見るひとつが下記のような記述になります。 この方法で表示しようとした場合、例えば上に合った入力イメージのようにカスタムフィールド入力欄で「あいうえお（改行）かきくけこ（
jQuery Snippets #7 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第7弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 画像のアスペクト比を割り出して、値によって処理を加える 例えば複数の画像を並べて表示したいという時に、同じサイズや同じ縦横比であればCSSなどで容易に調整可能ですが、それが横長や縦長など異なるサイズ（アスペクト比）で且つどのようなものが入ってくるのかを限定できない時などに利用できます。 jQueryを下記のように記述することでアスペクト比によってそれぞれ別の処理を実装することができ、例えばCSSのposition: absolute;とネガティブマージンを組み合わせることで、ど
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld
自分用に一覧化したものがほしくて作ったのでシェアします。 あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。 いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。 閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。 基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介して
WordPress：ログイン画面にログイン後に任意でページ移動できるセレクトボックスを表示させる方法 - NxWorld
WordPressはデフォルトだとログイン後にダッシュボードに移動しますが、それをログイン画面のセレクトボックスで選択したページに移動させる方法です。 イメージはここで紹介してるカスタマイズ後のログイン画面で、このようにパスワード入力フィールド下に「ログイン後の移動ページ」としてセレクトボックスを追加されるようになります。 イメージではセレクトボックスの中身が「ダッシュボード」となっていますが、例えばこれを「プロフィール」を選択した状態でログインすると管理画面ログイン後にプロフィールページに移動するという動きになります。 実装にはfunctions.phpに下記のように記述します。 // ログイン画面にセレクトボックスを追加 function add_login_redirect_select_field() { ?> <p> <label for="rd">ログイン後の移動ページ</la
WordPressの管理画面カスタマイズ時に使えるハック #5 - NxWorld
WordPressの管理画面カスタマイズ時に見るチートシート目的のメモ第4弾です。 紹介している内容は、基本的にWordPress Ver 4.4.2で実装・確認したものになります。 メディアアップローダのデフォルト表示を変更する 画像を追加したい時には投稿画面にある「メディアを追加」ボタンから行う人が多いと思いますが、その際にデフォルトのメディアアップローダでは「すべてのメディア」が初期選択された状態になっています。 例えば画像を多用しているサイトなどで不要な画像はできるだけ非表示にしたい時やロードさせたくない時などは、デフォルトで「すべてのメディア」となっているプルダウンを「この投稿へのアップロード」に変更することで表示されるメディアを絞り込んで表示させることができるのですが、これを毎回選択するのが面倒だとかデフォルトの初期選択を変えたいという場合はfunctions.phpへ下記のよ
CSSグラデーションを使ったデザインパーツサンプル - NxWorld
わざわざ画像を使わなくても簡単にグラデーションを表現することができるCSSのlinear-gradient。 未対応ブラウザをサポートすることもまだ完全になくなったとは言えませんが少しずつ減ってきてはいるので、利用頻度が増えたという人も多いと思います。 よくある使用方法としては例えばセクションの背景だったりボタンなどのパーツの背景にグラデーションカラーを適用するというのが一般的ですが、他にもいろいろ使用用途があるのでいくつか紹介します。 以下で紹介する方法は、ブラウザによっては表示確認ができないものもあります。 また、ベンダープレフィックスなどは必要に応じて追記・変更してください。 ここでは全て見た目を画像で紹介しているので、実際に表示を確認したい場合は以下デモで確認できます。 テキストが徐々に見えなくなる #1 イメージ（右）のようにテキストの上にグラデーションを重ねることで徐々にテキス
CSS：角丸のテーブルを作成する方法 - NxWorld
テーブルをCSSを使って角丸にする方法です。 以前は角丸部分に特定のクラスをそれぞれ記述して、場合によってはJavaScriptと併用して実装していたり、特定のブラウザの為に画像を使うとか親要素にdiv要素を幾つか記述するとかいろいろ面倒なことしてたのですが、最近はそれらをしないでも実現できる機会も増え、使用頻度も割と高いので備忘録として残しておきます。 角丸テーブルの完成イメージ 以下ではこのようなデザインの角丸テーブルを実装する想定で説明しています。 実際の表示用デモなどは用意していないので、ちゃんとブラウザで動きを見たい場合は以下で紹介しているコード使って自身の環境で確認してください。 あるプロパティが指定されていると角丸にならない CSSで角丸と言えばborder-radiusを思い浮かべ、これをtableに指定するだけではと思いがちですが、結論から言うとあるプロパティが指定されて
バナーデザインの制作フローやレイアウト、参考になるエントリー・デザインギャラリーをまとめてみました - NxWorld
バナーデザインは決められた領域内でどれだけユーザーやターゲットの目にとまるようなデザインにできるかが重要になってきます。 デザイン制作したことあるなら一度は経験したことあると思いますが、領域が決められているけどその中でしっかり伝えたい内容を目立たせる必要があるので、何度もレイアウトを調整したり、結局時間をかけて完成してもいまいちな出来になってしまったりなんてことも...。 そこで今回は、バナーデザインをするにあたって覚えておきたいレイアウトやデザインパターンをはじめ、効率良く制作していくことができる制作フロー、特に新米デザイナーさんなどには非常に参考になると思うので是非目を通して欲しいエントリー、インスピレーションをもらえるバナー関連のデザインギャラリーといった、バナーデザインの制作に関連することをまとめてみました。 バナーデザインの制作フロー 後ほど紹介するエントリーでこのような内容に関
data属性を利用したナビゲーションの実装サンプル - NxWorld
テキストのみで作られたようなシンプルなナビゲーションにdata属性を利用したカスタマイズを施した実装サンプルです。 いずれもカスタマイズといっても簡易的なものばかりでほぼホバー時の動きにはなりますが、紹介しているような方法を使うことでHTMLに記述する要素を少し減らすことができたり、ちょっとしたアニメーションを加えたりすることもできます。 また、あまりdata属性を使ったことがないという人はこういう使い方もあるということで参考にしてみてください。 ここで紹介している内容はdata属性を利用した実装サンプルのひとつとして紹介しており、擬似要素で表示させているテキストはあくまで装飾目的で表示している想定になります。 SEOやスクリーンリーダー対応などに影響があると考えられる場合は、しっかりとマークアップしたもので実装してください。 補足テキストを表示 #1 見かけることが多いと思う、ナビゲーシ
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Snippets - NxWorld
