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

Develop and Design Note

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

レスポンシブWebデザイン

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

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

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

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

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

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

レスポンシブWebデザインの工数

「レスポンシブWebデザインって、工数的には良いの?悪いの?」という検証を兼ねて、3年前に作成したサイトを「レスポンシブWebデザイン」でリニューアルしてみました。結論から言うと、制作工数は増えます。具体的に言うと、