Sass(SCSS) mixin Snippets - NxWorld
普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。 特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。 特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。 以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。 プレフィックスに関する記述に関してはAutoprefixerなどを
jQuery Snippets #3 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第3弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 要素の幅・高さを取得する jQueryを使って要素の大きさを取得する方法で、下記のように幅だけを取得するもの以外にもpaddingやborderも含めての大きさを取得することもできます。 また、ここでは高さを取得したい場合はwidthの部分をheightに変更すれば取得できます。 // width $('element').width() // width + padding $('element').innerWidth() // width + padding + bord
jQuery Snippets #4 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第4弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 hoverでon/off切り替え まずbtn_01_off.png, btn_01_on.pngのように同じ拡張子で且つ画像名が_offと_on部分のみ異なるホバー前後の画像を用意しておきます。 あとは、HTMLが<a href="#"><img src="btn_01_off.png" alt="ボタン" /></a>のような記述を想定のときにjQueryを下記のように記述することで、ホバー時に画像がオン画像へと切り替わります。 $('a img').hover(functi
jQuery Snippets #1 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第1弾です。 今まで頻繁に使うものや覚えておきたいと思ったもの、今後使う機会ありそうなものを見つけた場合は、とりあえずEvernoteやJSFiddleなどに突っ込んでおいたりエディタへスニペット登録したりという感じだったのですが、それらをスッキリさせたくなった＋日頃参考にさせてもらっているかちびとさんの「jQueryスニペット」みたいなのを パクry… 自分用にほしかったので、ある程度溜まったらこのブログにまとめていくことにしました。 この動きならわざわざjQuery使わないといった脱jQueryな感じの記事もよく見かけるし、自分も案件によっては使わないことが稀にあったりはしますが、やっぱりjQueryだといろいろと短い記述で容易に指定できたり、ちょっと特殊な動きの場合でもプラグインを使っ
[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld
jQuery Snippets #2 - NxWorld
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP