Archives : May 2016

- 12 Articles -

Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

Read Article

Sass(SCSS)のmixinを使って、:nth-child疑似クラスなどを指定しやすくする便利スタイルシート「Family.scss」

便利だと思ったので備忘録兼ねてご紹介。CSSでn番目の要素に適用したい時などに利用する`:nth-child`疑似クラスや`:nth-last-child`疑似クラスですが、先頭(または最後)からn番目になどの単純な指定ではなく、ちょっと複雑な指定をする際は指定方法を考える(悩む)ことがあると思います。「Family.scss」はそんな面倒な指定を楽にしてくれるスタイルシートで、利用するためにはS…

  • Tips
新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

Read Article

新しいInstagramのロゴデザインを再現したデザインリソースやCSSテクニック

少し前に新しいInstagramのロゴデザインが発表されましたが、発表直後から様々な人達が各種デザインツールを使ってロゴデザインを再現したり、中にはHTMLとCSSを使って再現する人も出てきました。人によってはそれらを公開するだけでなく配布しているという人もいたので、個人的に目についたロゴデザインを再現したデザインリソースやCSSテクニックをいくつかまとめてみました。もちろんデザインで使用する際な…

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

Read Article

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

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

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

Read Article

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

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

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

Read Article

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

特に何も考えず組んでいると、コンテンツの内容が少ない場合に本来ウィンドウ下部に表示されてほしいフッターコンテンツなどが中途半端な位置に表示され、その分フッターとウィンドウ下部の間にある領域に大きな空白ができてしまうことがあります。これをCSSや場合によってはJavaScriptで解決する方法があるのはご存知の方も多いと思いますが、最近では特に古いIEの対応がなくなってわざわざJavaScriptを…

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

Read Article

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

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

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

Read Article

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

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

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

Read Article

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

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

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

Read Article

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

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

  • WordPress

Close the search window,
please press close button or esc key.