Category:Tips

jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5

Read More

jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5

一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。

  • Posted on
  • Tips
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

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