JavaScript

アコーディオンメニューやハンバーガーメニューで使用するjQueryのslideToggle()をcssで実装しました。

ハンバーガーメニューを作成しました。3本線からバツ印に変わるボタン、右からスライドしてくる第2階層もあるハンバーガーメニューです。ソースコードも紹介しています。

3枚の画像が順番に切り替わっていくメインビジュアルをSlick.jsで作成しました。ソースコードも紹介しています。

ページ内のアンカーリンクにスムーススクロールを実装するJavaScriptのソースコードを紹介をしています。また、スムーススクロール後にヘッダーと見出しが被ってしまう原因についても解説しています。

HTMLの「Image Map」を使用して、1枚の画像に複数のリンクを追加する方法についてご紹介しています。

クリックした点から波紋が広がるアニメーションをHTML・CSS・JavaScriptで実装しました。

swiperスライダーの発動条件について解説しています。例として、よくある記事一覧レイアウトをswiperスライダーに変更します。

「もっと見る」をクリックするとn件ずつ記事が表示される機能を実装しました。ソースコードも紹介しています。

親カテゴリーをクリックすると開いていた他の子カテゴリーを閉じて自身の子カテゴリーを開くメガメニューを実装しました。ソースコードもご紹介しています。

実務経験で作成したレイアウトのHTML・CSS ・JavaScriptソースコードを紹介した記事まとめています。