画面外に配置した要素が横スクロールで表示されてしまう。
スマホでよくあるハンバーガーメニューをクリックするとメニューがスライドインしてくるUIがあるかと思います。 よくメニュー要素をabsoluteの絶対配置でアニメーションさせる事があるかと思いますが、今回translate…
csscsscss
csscssCSSでコンテンツが少ない時にフッターを最下部に表示させる
コンテンツが少ない時、普通フッターはコンテンツ量に影響されるので、フッターとウインドウの下部に隙間ができてしまい、中途半端な位置に設置されてるような感じになってしまいます。 これをコンテンツ量が少ない時はウィンドウの最下…
css疑似要素で矢印作ってロールオーバーでアニメーションさせてみよう
ふと、思ったのでちょっとした忘備録。よくCSSでリストナビゲーションを見るが、「＞」このような矢印ボタンをよく見ます。以前は画像にして背景画像にしてロールオーバーで切り替えるなんて事やってた時期もありますが、現在はCSS…
csscssでハンバーガーメニューを作成してみたよ
さてスマホでよく見るようなハンバーガーメニューですが、せっかくCSSでTransitionについて記事にしたので、ハンバーガーメニューでも作ってみようかと思います。ネットで調べるといくつか定番？な作り方があるようですが今…
cssスクロールで要素を横からフェードインさせてみよう
先日、CSSでTransitionを利用したアニメーションの記事を書きましたが、それを利用して、よく他社のサイトで見るスクロールしたら文字などが下や横からフェードインしてくるコンテンツありますよね？せっかくなので、作って…
cssCSSで背景画像を縦横比を維持したままレスポンシブ対応するには？
スマホのデバイスが増えるにつれて背景画像のレスポンシブ対応が必要になってくると思いますが背景画像のレスポンシブってどうしたらいいのか忘備録。 高さを%指定してもダメなのか 背景画像の場合、テキストなど無い場合に高さをpx…
cssCSSのtransitionによるアニメーションを勉強してみる
今更ですが、transitionによるCSSアニメーションの勉強してみる。よくあるのが、マウスオーバーしたら色が変わるとか拡大・縮小だったりなどいろいろですが、これまでJavascript (jQuery)などで対応して…
cssパララックス効果をCSSのみで実装してみよう（固定）
初めに背景画像がスクロールで切り替わるようなものを作ろうかと思います。背景画像が固定されていてアニメーションなどは含まずまずはシンプルなものです。
css【CSS】スマホで幅100％で要素がはみ出してしまう原因と対策
スマホページを作成しているたまに発生するのが幅を100%にしているのに微妙に横にスクロールが発生してしまってる現象。たまに画像がはみ出してる場合はすぐに原因がわかるんですがそうでないときもたまにあるんですよね。 今回はそ…
css【CSS】画像をスマホ対応！！ウィンドウに合わせて自動で拡大・縮小させるには？！
ここ最近はスマホが主流になってきているのでレスポンシブなWEBサイトを作ることも多いと思います。 そんな時に画像のサイズって悩んだりしません？ 例えばトップページだとメインの画像がファーストビューにあってスマホで見ると画…
