未分類 【CSS】scroll-padding-topを使ってアンカーリンクの固定分ずれる不具合を解消
scroll-padding-topを使う機会があったのでメモ。以下のコードを追加するだけで解消されるのでぜひためしてみよう。html { scroll-padding-top: 100px;//ヘッダーの高さを指定}
未分類 未分類 【JS】最初からコンテンツが非表示のタブ切り替えの実装方法
html<!--ここがタブ--> <ul class="tab"> <li><a href="#tab1"><img src=" alt="tab1"></a></li> <li><a href="#tab2"><img src=" alt...
Web技術 【jQuery】クラスで色指定、メニューの作り方
メニューでクリックしたらクラスが付与され色が変わったりするメニューの作成方法をメモしておく。codepenで実装したサンプルを見て参考にしてほしい。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on Co...
未分類 【jQuery】クリックした要素にクラスを追加し他の要素をクリックしたらクラスが外れるようにする方法について
jQuery$(function(){ $('.tab_item').click(function(){ $('.tab_item').removeClass('on'); $(this).addClass('on'); }) })
Web技術 【WordPress】トップと投稿ページでそれぞれにタイトルを指定する方法
今回はwordpressでタイトルタグをトップと投稿ページでそれぞれ指定する方法を紹介する。修正するファイルは、head.phpだ。もしタイトルタグが２つ存在している場合は、function.phpファイルも修正する必要がある。head.p...
PC周辺 【iPhone】iPhoneでmkvファイルの動画を見る方法
iPhoneでmkvの動画ファイルを見たかったので今回はその方法を紹介する。以下の手順でやればOK1.iPhoneにVLCをインストール2.MacにiPhoneをlightningケーブルで繋ぐ3.mkvファイルをドラッグアンドドロップiP...
Web技術 【JS】swiper.jsでスライドが１枚とそれ以外で処理を分けるやり方
swiper.jsでスライドが１枚の場合と複数枚の場合で処理を分けるやり方を紹介しておく。例えば複数枚の場合は、ループを１枚の場合はループなしを行いたい場合は以下のようにするとよいvar swiper;$(window).load(func...
Web技術 【CSS・JS】モーダル：コンテンツ量が多い場合にスクロール
モーダル内のコンテンツが多く、スクロールしたい場合は以下のコードのようにコーディングすればOKHTMLの構造は同じなので運用面でも問題ない See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen...
Web技術 【JS】swiper.jsを使ってモーダルでスライダー・カルーセル表示
今回はswiper.jsを使ってモーダルでスライダー・カルーセルを実装する方法を紹介する。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術 【JS】同じクラスで複数のモーダルを表示する方法
今回は同じクラスを使って複数のモーダルを表示させる方法を紹介する。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.