Archives : August 2017

- 9 Articles -

CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5

Read Article

CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5

特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。カラーやサイズ指定をはじめ、ライブラリよっては20種類以上のデザインが用意されているものもあります。そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできま…

  • Tips
WordPress:特定のページのみビジュアルリッチエディタを無効化する方法

Read Article

WordPress:特定のページのみビジュアルリッチエディタを無効化する方法

WordPressでビジュアルリッチエディタを使用しない場合、すべてで無効化するのであれば管理画面のプロフィールページにある「ビジュアルリッチエディターを使用しない」にチェックを入れることで無効化できますが、そうではなく特定のページでのみ無効化したい場合に使える方法です。

  • WordPress
Sketchのデザインリソースがダウンロードできたりまとめられているサイトのまとめ

Read Article

Sketchのデザインリソースがダウンロードできたりまとめられているサイトのまとめ

Sketchのデザインリソースをダウンロードできたり、様々なところで配布・公開されているものをまとめているサイトのまとめです。中には素材に限らずちょっとしたテクニックやチュートリアルを紹介したり、便利なツールやプラグインの紹介をしているサイトもあるので、普段からSketchを多用している人はもちろん、これから使ってみようと思っている人もぜひチェックしてみてください。

  • Material
slickのカレントクラスを利用した実装サンプル

Read Article

slickのカレントクラスを利用した実装サンプル

手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド(表示の仕方やオプションの指定によって付与の対象となる位置は変わります)に対して`.slick-current`というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプルを…

  • Tips
CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

Read Article

CSSで実装するオーバーレイ表示時のエフェクトサンプル 10

初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベ…

  • Tips
CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

Read Article

CSS(一部SVGも使用)で作成されたユニークなローディングアニメーション 15

見栄えからアニメーションまで基本的にCSS(一部SVGも使用)を使って作成されているユニークなローディングアニメーションを、CodePenにアップされているデモから紹介します。ローディングはそんなに長い時間表示させることは少ないですし、自分の場合はサクっと汎用的なシンプルなデザインのものを実装することがほとんどですが、こういった部分まで拘りたいとかちょっと面白いアニメーション付けたいってときに参考…

  • Tips

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