タグ

responsiveとjqueryに関するkyaidoのブックマーク (2)

  • jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法|BLACKFLAG

    Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください。 「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますが それぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。 全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ

    jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法|BLACKFLAG
  • レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20

    スマートフォンやタブレットが絡むサイト制作時に実装することが多い、レスポンシブ対応やスワイプ(フリック)などといった機能を簡単に実装できるスライダー・カルーセルのプラグインやチュートリアルのまとめです。 いずれかひとつの機能のみ実装するだけでなく、中にはひとつのプラグインで複数の機能を同時に実装できるのもあります。 普段からよく使うものは大体決まっていたりするんですが、見せ方、対応ブラウザ、一部の機種で挙動が怪しいなどの理由で他のものを探すということもたまにあるので、そういった時の手間を省くためにメモしていたものです。 全てのプラグインをじっくり使ったことがあるわけではないのと、僕はiPhone持ちなので特にAndroidで上手く動作してくれるかわからないものも正直幾つかありますが、いずれもPCiPhoneで確認した際には問題なく動作してたものです。

    レスポンシブやスワイプ機能を実装できる、スライダー・カルーセルのプラグインやチュートリアル 20
  • 1