マガジンのカバー画像

Web制作Tips

3
運営しているクリエイター

記事一覧

【jQuery】タブ切り替え「お知らせリスト」作成

【jQuery】タブ切り替え「お知らせリスト」作成

jQueryを使って、Webページにタブ切り替え機能を実装する方法です。
(後日、ページネーションもjQueryで実装予定。)

カテゴリ毎にコンテナを分けると、リストを追加する際にスクロールして目的の挿入位置を探すのが少し面倒なので、リスト最上部に追加してカテゴリを指定しておけば、勝手にタブ分けできるようにしてあります。

ちなみにお知らせのサンプルテキストはChatGPTに作ってもらいました!

もっとみる
【jQuery】『slick.js』アクセス毎にランダムに並び替える

【jQuery】『slick.js』アクセス毎にランダムに並び替える

スライダープラグイン『slick.js』。
簡単にスライド設定ができて便利ですよね。いつもお世話になってます。
ある日「アクセスする度に、スライドの表示順を変えたい。」とご要望をいただき、「OKです!」と元気よく答えたはいいものの、そんなオプションは、、、ない!

ということでランダム表示できるように設定しました。

▼サンプルコード▽HTML
いつも通りslickを設定したい要素を任意のクラスを

もっとみる
【CSSのみ】header固定のスムーススクロール実装

【CSSのみ】header固定のスムーススクロール実装

スムーススクロールはCSSのみ(js不要)で実装できるって本当ですか?
ということでやってみました。

ソース(CodePen)基本的にはHTMLタグにCSSプロパティ、
・scroll-behavior
・scroll-padding-top
の2つを設定するのみ。

スムーススクロールは scroll-behavior で指定ヘッダー固定時は scroll-padding-top でオフセット

もっとみる