jQueryヘッダー固定の場合のアンカーリンクのずれ ページの一番上にヘッダーやナビゲーションを固定する場合、ページ内アンカーリンクがずれる問題cssで固定の分の調整をする.link-margin {margin-top: -100px;padding-top: 100px;}スムーススクロー...2021.09.08jQuery
jQueryウィンドウサイズによって使うj Queryを変えたい ウィンドウズサイズに合わせてjQueryを使いたい場合はcssのようにブレイクポイントを使って切り替えられます。 if (window.matchMedia( "(max-width: 640px)" ).matches) { /* ウ...2021.05.10jQuery
jQueryハンバーガーメニュー でページ内リンクをクリックしたら閉じさせる ディレクターが大好きなページ内リンク。 制作の私から見ると見辛いし… ちょっとし調整も必要になるしで大嫌いです。 HTML <a href="#" id="panel-btn" class="pc-none"><span id="pan...2020.06.26jQuery
jQueryIEでもobject-fitが使えるようにするjQuery WordPressなどのブログのアイキャッチ使用時の画像のサイズ調整に便利なのがobject-fit。 しかし、IE非対応です。 そのため、object-fitを使うとIEでは画像が変形してしまいます。 最新のEdgeは対応済みのようで崩れ...2020.06.18jQuery
jQueryアンカーリンクをクリックしたらハンバーガーメニューを閉じる //spメニュー $(function() { $("#panel-btn").click(function() { $("#panel").fadeToggle(500); $("#panel-btn-icon").t...2019.11.12jQuery
jQuery固定されたヘッダーのアンカーリンクに最適「smooth-scroll.js」 ■GitHubでダウンロード html <script src="js/smooth-scroll.polyfills.min.js"></script> js <script> var scroll = new SmoothScro...2019.07.26jQuery
jQueryスライダ―を入れるとアンカーリンクがずれる ページ内のアンカーリンクだと問題ありませんが、別ページからのアンカーリンクだと、アンカーの場所がおかしくなってしまうことがあります。 これは、スライダーで使っているjQueryやcssが読み込まれる前にアンカーリンクが着地するためです。 先...2019.07.26jQuery
jQueryスクロールで特定の位置にまで行ったら実行 せっかくjQueryで動きを付けても、ページの表示と同時に実行されてしまうと、目につかない場合があります。 見せたい位置までスクロールしたら実行してあげましょう。 簡単です! 動かしたい位置のタグにクラス名やid名を付けて「セレクタ」に入...2019.03.06jQuery
jQueryウィンドウサイズによってjQueryの記述を変える レスポンシブでホームページを作るとき、ウィンドウサイズによってcssを切り替えます。 jQueryも変えたい時ってありますよね。 ウィンドウサイズによってjQueryを切り替えたい時は下記のコードを。 //ウインドウサイズの横幅によって...2018.09.07jQuery
jQueryヘッダーを固定していると別ページへのアンカーリンクがずれる ヘッダーを固定しているサイトで面倒くさいのがアンカーリンク。 ページ内でもページ外でも... ヘッダー固定している分すれてしまいます。 そんな時はアンカーリンクをしているページにこちらのコードを。 ※ヘッダー固定が120pxの場合。 $(...2018.09.07jQuery