読者です 読者をやめる 読者になる 読者になる

Develop and Design Note

フロントエンドなデザイナーの覚書

jQuery

プラグイン使わずにjQueryだけでスワイプ対応のカルーセル作ってみた。

以前、ボタンで動かすカルーセルは作成したのですが(レスポンシブWebデザインでカルーセルを実装してみた - Web Design Note)、これをスマートフォンのスワイプに対応させました。 JavaScriptのプラグインを使えば早いのですが、勉強のため、今回はプラグ…

背景画像とともに要素を伸縮させるには、background-size:containとjsを使う

画像をブラウザウィンドウの横幅に応じて伸縮させる場合、以下の2つの方法があると思います。 img要素のwidth属性を%値にしてheight属性をautoにする。 css3のbackground-size:contain(またはcover);を使う。

レスポンシブWebデザインでカルーセルを実装してみた

フォトギャラリーなどでよく使われるカルーセルをレスポンシブWebデザインで試しみました。