画面外に配置した要素が横スクロールで表示されてしまう。
スマホでよくあるハンバーガーメニューをクリックするとメニューがスライドインしてくるUIがあるかと思います。 よくメニュー要素をabsoluteの絶対配置でアニメーションさせる事があるかと思いますが、今回translate…
csscsscss
csscssCSSでコンテンツが少ない時にフッターを最下部に表示させる
コンテンツが少ない時、普通フッターはコンテンツ量に影響されるので、フッターとウインドウの下部に隙間ができてしまい、中途半端な位置に設置されてるような感じになってしまいます。 これをコンテンツ量が少ない時はウィンドウの最下…
csscssでハンバーガーメニューを作成してみたよ
さてスマホでよく見るようなハンバーガーメニューですが、せっかくCSSでTransitionについて記事にしたので、ハンバーガーメニューでも作ってみようかと思います。ネットで調べるといくつか定番？な作り方があるようですが今…
cssCSSで背景画像を縦横比を維持したままレスポンシブ対応するには？
スマホのデバイスが増えるにつれて背景画像のレスポンシブ対応が必要になってくると思いますが背景画像のレスポンシブってどうしたらいいのか忘備録。 高さを%指定してもダメなのか 背景画像の場合、テキストなど無い場合に高さをpx…
cssパララックス効果をCSSのみで実装してみよう（固定）
初めに背景画像がスクロールで切り替わるようなものを作ろうかと思います。背景画像が固定されていてアニメーションなどは含まずまずはシンプルなものです。
css【CSS】スマホで幅100％で要素がはみ出してしまう原因と対策
スマホページを作成しているたまに発生するのが幅を100%にしているのに微妙に横にスクロールが発生してしまってる現象。たまに画像がはみ出してる場合はすぐに原因がわかるんですがそうでないときもたまにあるんですよね。 今回はそ…
css【CSS】画像をスマホ対応！！ウィンドウに合わせて自動で拡大・縮小させるには？！
ここ最近はスマホが主流になってきているのでレスポンシブなWEBサイトを作ることも多いと思います。 そんな時に画像のサイズって悩んだりしません？ 例えばトップページだとメインの画像がファーストビューにあってスマホで見ると画…
css[CSS]スマホ制作で大活躍！？table-cellで要素を横並びに配置する方法
前回、要素を横並びにするのに inline-block を使ったんですが、なんと「display:table-cell」でも同じことができます。 IE8からでないと利用できなんですが、スマホなどはモダンブラウザなので問題…
css【CSS】のinline-blockで要素を横並びにしてみた！
今更の話ですが、ナビゲーションを作成するときは、結構「float」を利用して横並びにすることが多いですが、実はdisplay要素だけでも横並びに出来るのでメモ。 htmlとCSSのコード そんな難しいことでもないので、簡…
css【CSS】CSSで行ごとに背景色を交互に変更するには？
結構、新着情報などの背景色を交互に表示して行ごとに分かりやすくしているサイトを見てそれを実装しようとしたが、更新するたびに行ごとにクラスをつけたり外したりするのめんどくさいのでどうするか試してみた。 取り合えず新着情報み…
