パララックスで背景を動かしてみよう
前回、「パララックス効果をCSSのみで実装してみよう（固定）」いうのをやってみました。今回はその背景画像がスクロールするとゆっくり上に移動するものを作ってみようかと思います。 ライブラリを使ってもいいのですが作り方を知る…
cssでハンバーガーメニューを作成してみたよ
さてスマホでよく見るようなハンバーガーメニューですが、せっかくCSSでTransitionについて記事にしたので、ハンバーガーメニューでも作ってみようかと思います。ネットで調べるといくつか定番？な作り方があるようですが今…
スクロールで要素を横からフェードインさせてみよう
先日、CSSでTransitionを利用したアニメーションの記事を書きましたが、それを利用して、よく他社のサイトで見るスクロールしたら文字などが下や横からフェードインしてくるコンテンツありますよね？せっかくなので、作って…
CSSで背景画像を縦横比を維持したままレスポンシブ対応するには？
スマホのデバイスが増えるにつれて背景画像のレスポンシブ対応が必要になってくると思いますが背景画像のレスポンシブってどうしたらいいのか忘備録。 高さを%指定してもダメなのか 背景画像の場合、テキストなど無い場合に高さをpx…
CSSのtransitionによるアニメーションを勉強してみる
今更ですが、transitionによるCSSアニメーションの勉強してみる。よくあるのが、マウスオーバーしたら色が変わるとか拡大・縮小だったりなどいろいろですが、これまでJavascript (jQuery)などで対応して…
パララックス効果をCSSのみで実装してみよう（固定）
初めに背景画像がスクロールで切り替わるようなものを作ろうかと思います。背景画像が固定されていてアニメーションなどは含まずまずはシンプルなものです。
PCとスマホの画像切り替えがpictureタグで幸せになれる
最近ではレスポンシブデザインが当たり前になっています。そこで問題になってくるのがPC用とスマホ用の画像の切り替え問題。これまでは、メディアクエリで切り替えてたりしましたが、html5の現在、これに対応できるpicture…
【CSS】スマホで幅100％で要素がはみ出してしまう原因と対策
スマホページを作成しているたまに発生するのが幅を100%にしているのに微妙に横にスクロールが発生してしまってる現象。たまに画像がはみ出してる場合はすぐに原因がわかるんですがそうでないときもたまにあるんですよね。 今回はそ…
【CSS】画像をスマホ対応！！ウィンドウに合わせて自動で拡大・縮小させるには？！
ここ最近はスマホが主流になってきているのでレスポンシブなWEBサイトを作ることも多いと思います。 そんな時に画像のサイズって悩んだりしません？ 例えばトップページだとメインの画像がファーストビューにあってスマホで見ると画…
【jQuery】スクロールしてヘッダーやナビを上部に固定するには？
スマホサイトのリニューアルでスクロールしたらヘッダーが上部に固定させるようにしたいとの事で久々にjQueryを触ったのでせっかくなのでメモします。サンプルを作りましたのでスクロールしてみてください。 サンプルを見ると背景…
