【slick】レスポンシブ対応！ブレイクポイントでスライドの表示枚数を変える方法PCではスライドを3枚表示していたけど、スマホでは1枚にしたいといったケースがあると思います。 それにはslickのオプションを使ってブレイクポイントを指定すれば、スライドの表示枚数を変えることが出来ます（ブレイクポイントは複数指定できます） 今回はコピペ可能なコードとデモを使って解説していきます。 slickの基本的な使い方と、slickを使うのに必要なjQueryの使い方については以下の記事を参照下さい。
【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 のみ
『slick』の基本的な使い方（オプションなど）を細かくまとめていく | Weblasts
以前紹介した“『slick』を使った無限ループスライダーの作り方と注意点“の記事が結構人気みたいなので、改めてjQueryのプラグイン『slick』の使い方をまとめていくことにします。 実際に動く、よく使うオプションのサンプルを配置していくのでページ自体が重めになりますがよろしくどうぞ。 jQuery不要で使えるswiperにも手を出しているのでこちらもどうぞ
動くWebデザインアイデア帳
サイト閲覧方法 1ウェブサイトへアクセス https://ugokuweb.coco-factory.jp/ugokuweb/ 新サイトはこちらから 2【ユーザー名】と【パスワード】が求められますので、以下の情報を入力してください。 【ユーザー名】：ugokuweb 【パスワード】：指定のページ数を【半角数字3桁】で入力 （例）30ページの場合は 030 と入力 ※黄色本をご購入の方：7-2「検索」の表紙ページ数 ※ピンク本（実践編）をご購入の方：9-4「SVGアニメーション」の表紙ページ数を【半角数字3桁】で入力してください。 3閲覧制限が解除され、サイトを閲覧できるようになります。 ブックマークをしてご利用ください。 ※掲載されているコードは、2021年に出版された時のものをそのまま掲載しています。 （jQueryのバージョン、プラグインのソースコードの書き方を含む） ソースコードの書
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
