マウスオーバーでヒラッとさせる

マウスオーバーでちょっと違うエフェクト

html

jQuery

css

こちらを参考にさせていただきました

http://jsdo.it/fctale/mLaO

Retina Display 用のMedia Query

Retina 対応の画像を用意する場合

device pixel ratio とは
デバイスピクセル比とかいわれている
デバイスピクセル(dpx)とCSSピクセル(csspx)の対応

スマートフォンの画面解像度とピクセル密度についてはこちらのサイトがとても分かりやすかったです。
http://myakura.github.io/n/density.html

CSS TRICKS
Retina Display Media Query
http://css-tricks.com/snippets/css/retina-display-media-query/

mixin

device pixel ratio が1.3にするとAndroidの高解像度デバイスにも対応するってことでしょうか
より素早くCSSコーディングするための、Sass(SCSS)のmixinスニペット集
http://www.webcreatorbox.com/tech/sass-mixin/

config.rbに追記するべき

imagesフォルダへのリンクはデフォルトだと絶対パスになる。
それを相対パスになるようにするには

生成されたcssにcompassのコメントが入るのを消したい

コメントアウトされてるので「#」をとる

スマホで使えるjQuery アコーディオンメニュー

スマートフォンで活用大のアコーディオンメニュー。

jqueryなら実装がカンタン。
dlパターン
htmlはこんな感じ

javascriptは

css

ulを使うパターン

デモ

scss でフォントサイズをremで指定するmixin

今さらながら、SCSSからCompassを使いはじめました。

今さらながら、その便利さに驚愕している日々です。

いろいろ覚えておきたいことは一杯あるのですが今日は基本となるfont-sizeの指定をカンタンにできるようにするmixinの覚え書き。

まずは、rootのフォンとサイズを10pxにするため、htmlに以下のように指定します。

そしてbodyを14pxを指定する場合、

css3のremの指定と対応していないIE対策としてpxを一緒に指定します。

これをmixinにするには

とし、18pxで表示したいところには

とするだけ!

めちゃくちゃカンタンになりました!

 

参考にさせていただきました:

SCSSで古いIEなどにもrem感覚でフォントを指定する方法

http://negimemo.net/1141

一定期間だけNew!マークを表示する

新しく更新したページに「New!」を付けて、一定期間がすぎたら自動的に消えるようにする

マークを表示したい場所に
※2014年1月31日まで表示する

テキストの場合:

画像の場合:

Google AJAX APIを使ってjqueryを読み込む

jqueryを読み込むのに、わざわざjqueryのサイトから最新ファイルをダウンロードしなくても、
Google AJAX Libraries API などを使えばカンタンです。

今はGoogle Developerにjquery だけでなくjquery ui , MooTools , prototypeなどもあります。

https://developers.google.com/speed/libraries/?hl=ja

1.x系の最新バージョンを自動的に読み込むには