古くなったgulpのプラグインをチェック&更新する方法

いつもコマンドを忘れてしまうのでその備忘録です。。 npm-check-updates このnpm-check-updatesを使うと、package.jsonに書いてあるdevDependencies(プラグイン)のバージョンと最新バージ….

…Read More

jQueryを使わずにCSSのみで背景画像をX軸にスライドさせる方法

WEBサイトでよく見かけるコンテンツのひとつ、スライドショー。 今回は、複数の画像をスライドさせる方法ではなく、背景画像をX軸内で無限ループさせるスライドショーをCSSのみで実装する方法です。 jQueryを使わずCSSアニメーションを使っ….

…Read More

スマホで:hoverを使ってリンク色を変える方法

hover

スマホサイトでタップした時のリンク色を変えたいときのTips。 本来ならば:hoverだけでリンク色を変えることができるのですが、iOSはなぜかこの:hoverが指を話した時に効いてしまうというバグがあります。 ※ iPhone5は:hov….

…Read More

イメージ画像の横にテキストを配置する際に、文字の表示位置を真中にする

verticalalignthum

先日、スマホサイト制作中にはまった事なのですが、イメージ画像の横にテキストを配置したい時にvertical-alignプロパティを使ってもうまく表示位置を真ん中に出来ない事がありました。 上記のようにしたかったので、vertical-ali….

…Read More

CSS3 グラデーションが簡単に作れるジェネレーターまとめ

grd_icon

美しいグラデーションが簡単に作れちゃうジェネレーターまとめ。 グラデーションの書き方は、ブラウザによってちょい違うので覚えにくい…。 基本の書き方は以下になります。 上記を参考に実際に位置指定やカラーコードを当てはめて記述するとこうなります….

…Read More

123