jqueryとレスポンシブに関するokacchiespのブックマーク (3)

  • 【slick】レスポンシブ対応!ブレイクポイントでスライドの表示枚数を変える方法

    PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。 それにはslickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます(ブレイクポイントは複数指定できます) 今回はコピペ可能なコードとデモを使って解説していきます。 slickの基的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。

    【slick】レスポンシブ対応!ブレイクポイントでスライドの表示枚数を変える方法
  • 【CSS + jQuery】アコーディオンの作り方(プラスマイナス他) - EgTips

    ホームページの「よくある質問」などでよく使うアコーディオン。 カスタマイズしやすいように最低限のコードに絞って残します。 CSSのみで作る方法などを見かけますが、 なるべく余計なコードを書きたくないのでjQueryとのセットがおすすめ。 今回は2パターン作りますが、クリックアイコンのデザインが違うだけで開閉の仕組みはほぼ同じです。 1. プラスマイナスアイコンのアコーディオン 2. 矢印アイコンのアコーディオン プラスマイナスアイコンのアコーディオン プラスアイコンをクリックすると、隠れていた内容が表示され、マイナスアイコンに変わるアコーディオンです。 See the Pen rNjQePY by kei (@momoi) on CodePen. 重要部分のみ抜粋。 <ul class="ac"> <li> <div class="ac-label"> <p>Label</p> <div

  • レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】

    スマホで現れるハンバーガーメニューとは スマホでホームページを見ていると右上に「三」のようなマークを見ることが多いと思う. これを見かけがハンバーガーのようだからハンバーガーメニューと呼ぶようだ. 恐らく,箇条書きのメニューを遠くから見ると「三」のように見えるからだろう. ちなみに「三」を押すと「×」に表示が切り替わって「閉じる」ボタンのようになる. 「三」が「開く」で「×」が「閉じる」になるわけだ. ここではこのハンバーガーメニューの css のみでの作り方を紹介・解説する. つまり,javascript (jQuery も当然含む) を使わずに実装する方法をサンプルコード付きで掲載する. jQuery は読み込まないで済むならその分,重くなるので読み込みたくないし,javascript を使わずとも実現できるものは使わずに実現したい. javascript を使わない css のみ

    レスポンシブな多階層ハンバーガーメニューの作り方【CSSのみ】
  • 1