Sass:cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録

Read More

Sass:cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録

CSSでイージングを使用する際、`ease`や`linear`の場合はそのままその名前を値に記述すればいいですが、例えば`easeOutCubic`や`easeOutExpo`といったイージングを使用したいときは`cubic-bezier`を用いて記述する必要があります。ただ、それぞれどのような数値になるかいちいち覚えておくのは面倒なのと単純にイージング名で使用できたらいいなと思ったので変数化してみた備忘録です。

  • Posted on
  • Tips
Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット

Read More

Sass(SCSS)のmixinを使って、Media Queries(メディアクエリ)を使いやすくするスニペット

ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries(メディアクエリ)を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3つ紹介します。

  • Posted on
  • Tips
Sass(SCSS) mixin Snippets

Read More

Sass(SCSS) mixin Snippets

普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。

  • Posted on
  • Tips
Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ

Read More

Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ

レイアウト(特にグリッドレイアウト)を作っていく上で、Flexboxを利用して且つ手軽に実装したいというときに便利なCSSフレームワークをいくつかご紹介します。Bootstrapのようにレイアウトに限らず様々なコンポーネントまで用意されているものもあれば、Flexboxを使ったグリッドレイアウトの実装のみに特化したシンプルなものまでいろいろありますが、全体的に適用したい箇所にクラスを付与するだけと簡単に利用できるものになります。

  • Posted on
  • Tips
テキスト・記号・特殊記号をCSSアニメーションと組み合わせたローディングスピナー「text-spinners」

Read More

テキスト・記号・特殊記号をCSSアニメーションと組み合わせたローディングスピナー「text-spinners」

「text-spinners」はその名の通りテキストを利用したローディングスピナーを実装できるスタイルシートで、テキスト以外にも記号・特殊記号をCSSアニメーションと組み合わせてローディングスピナーを表現しています。デモにも様々な記号を使った例がありますが、少し変更すれば任意のものに変更できますし、CSSなのでサイズ・カラー・スピードなどの調整についても容易にできます。

  • Posted on
  • Tips
ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」

Read More

ラジオボタンとチェックボックスの選択時アニメーションをCSSで実装する「Radiobox.css」と「Checkbox.css」

面白い動きも幾つかあったのでご紹介。「Radiobox.css」と「Checkbox.css」はそれぞれラジオボタンとチェックボックスの選択時にアニメーションを加えることができるスタイルシートです。全体的にこれどんな場面で使うのっていう感じのエフェクトが多いので普段のサイトではあまり使われなそうですが、ちょっと遊び心いれたいとか変わったアニメーションを付けたい時には便利かもしれません。

  • Posted on
  • Tips
ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ

Read More

ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ

既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたい時に参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。

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