CSS

フレックスボックス(display:flex)の余分な余白を消す方法【CSS】

フレックスアイテムにmargin-topを指定すると、一番上の段に余分な余白ができてしまいます。 これを解決するには、親要素にmargin- […]

jQuery

カルーセルスライダー「slick」の使い方をシンプルに解説

使いやすくてカスタマイズ性の高いカルーセルスライダー「slick」についての解説です。 slickの読み込み まずはheadタグ内に下のコー […]

jQuery

【slick】デフォルトで非表示のスライダーをうまく動作させる方法

デフォルトで非表示になっていると、表示させたときにスライダーがうまく動作せずに形が崩れてしまいますよね。 こういうときは下のコードで解決でき […]

jQuery

ウィンドウサイズに応じてjQueryを切り替える【レスポンシブ】

ブレイクポイントを600pxと1200pxにするなら・・・ if (window.matchMedia(“(max-width: 600px […]

jQuery

スクロールに応じてサイドバーを固定する2つの方法【CSS・jQuery】

実装イメージ CSSを使うやり方 <div class=”flex”> <main></main> &l […]

jQuery

【jQuery】fadeInがホバーした回数分繰り返されてしまう問題の対処法

問題の挙動 解決法 $(“.btn”).hover( function() { $(“.content”).stop().fadeIn(); […]

CSS

【CSS】position: absolute;で配置した要素を中央寄せする方法

横方向に中央寄せ .box { position: absolute; left: 50%; transform: translateX(- […]

jQuery

jQueryのfadeInがちらつく、うまく動作しないときの対処法

fadeIn()やslideDown()の挙動がおかしくなるときがあるので、その原因について解説します。 fadeIn()、fadeOut( […]

CSS

【CSS】paddingとmarginの違いを超絶シンプルに解説

paddingとmargin、どちらも余白を表しますが、その違いについて解説します。 paddingとmarginの違い ズバリ言うと、ボー […]

CSS

CSSで作るボタンのデザインサンプル【グラデーションでおしゃれに】

全サンプル共通のコード 全てのサンプルで使っているコードです。 これにそれぞれのサンプルのコードを付け加えてください。 <a href […]