jQueryレスポンシブ対応
jQueryレスポンシブ対応
jQueryを使用してレスポンシブデザインを実装する方法を学びます。
タスク
ウィンドウサイズの検知
ウィンドウサイズの変更を検知し、表示を更新します
レスポンシブメニューの実装
画面サイズに応じてメニューの表示を切り替えます
グリッドレイアウトの調整
画面サイズに応じてグリッドアイテムの表示を調整します
ヒント
ウィンドウサイズの変更検知と、それに応じた要素の動的な調整を実装しましょう。
参考コード
$(function() {
// ウィンドウサイズの表示
function updateWindowSize() {
$('#windowWidth').text($(window).width());
$('#windowHeight').text($(window).height());
}
// 初期表示時とリサイズ時にウィンドウサイズを更新
updateWindowSize();
$(window).resize(updateWindowSize);
// レスポンシブメニューの切り替え
$('.menu-toggle').click(function() {
$('.menu-list').toggleClass('active');
});
// ウィンドウサイズに応じたグリッドアイテムの調整
function adjustGridItems() {
const width = $(window).width();
if (width <= 480) {
$('.grid-item').css('font-size', '14px');
} else if (width <= 768) {
$('.grid-item').css('font-size', '16px');
} else {
$('.grid-item').css('font-size', '18px');
}
}
// 初期表示時とリサイズ時にグリッドアイテムを調整
adjustGridItems();
$(window).resize(adjustGridItems);
// メニューリンクのクリックイベント
$('.menu-list a').click(function(e) {
e.preventDefault();
if ($(window).width() <= 768) {
$('.menu-list').removeClass('active');
}
});
});