CSS

CSSでテキストを選択禁止にする方法

文字の上をマウスでダブルクリックしたりドラッグして移動すると選択されてしまうテキスト。 デザインの邪魔だったりする時がある。 選択したテキストを装飾する方法もあるけど装飾が必要ない時は、今回紹介する方...
javascript

【jQuery】コピペでスクロール値を常に画面に表示させる

スクロールアニメーションを作る時に、スクロール値をコンソールで確認するのも良いけど そうするとHTMLやCSSがブラウザ上で編集しずらくなる。 それなら画面にスクロール値だけ表示しておけば便利じゃん...
javascript

【jQuery】特定クラスがリストの何番目にあるかを取得!

リストの特定クラスが何番目にあるのかの取得方法をご紹介。 var number = $('.sample').index('ul li'); 「$('.sample')」に番号を取得したい特定のクラ...
スポンサーリンク
CSS

【CSS】めっちゃ便利なグラデーションジェネレーター

カードUIや背景、画像の上にも、ホントいろんな所で滅茶苦茶使うグラデーションも 自由に使えないと単色でいいかな。と思っちゃう。 でもグラデーションを使った方がひと手間かかってる気がするし、結構な場面で...
サイト制作

【jQuery】パラパラ漫画の作り方|画像切り替え&スプライト画像アニメ

動画とかGifを複数個ウェブページに載せると容量がデカくなっちゃって、困る時がある。 デザインを変えようか、それとも何個か省いてページ作成するか....。 そんな状況の時に使えるのが、パラパラアニメー...
CSS

CSSで改行コード<br>を無効化(消す)する方法

レスポンシブサイトを作る時とかに、PC表示の時は改行を入れたいけどスマホ表示の時は改行を無くしたい。 そんな時はCSSで<br>を消して対応しよう!! 例えば、こんなHTMLの時... H...
CSS

【CSS】:notで複数の要素を指定する方法

CSSでスタイリングしていると、「最初の要素以外」とか「特定class以外」にスタイルを当てたい時がある。 そんな時に使うのが疑似要素の「:not」です。 例えばリストの最初の要素以外を指定する時は「...
javascript

【jQuery】iOS・iPadOSでスクロールすると発生するリサイズ処理を止める方法

iPhone(iOS)のSafariでスクロールするとリサイズ処理が走るのやめて欲しい。 実機でしか確認できないので、忘れる時があるから困っちゃう。 この厄介なリサイズ処理問題の原因は、スクロールす...
javascript

【jQuery】offset().topエラーになる原因

jQueryでトップからの位置を取得する「offset().top」ですが、 chromeの開発ツールで確認するとたまにエラーになる時がある。 ちゃんと取得してたはずなのに、なんでこんな表示が出てる...
CSS

【CSS】ボヤけた画像をパキッとさせる方法

書き出したサイズより小さく表示してるのに、なぜか画像がボヤける。 そんなボヤけた画像をCSSで即解決する方法をお教えします! CSSのテンプレートに追加しとくと今後検索しなくて済む。 img { ...
javascript

【jQuery】スクロールの上下方向を検知・判定する方法

ページを作成しているとスクロールで変化させたいことって結構あります。 スクロールしたら特定の位置で固定したり要素が見えたら表示したり。 今回は上下にスクロールしたらを検知・判定のご紹介です。 まずはデ...
CSS

【CSS】「fixedで固定されない⁉」を速攻解決する方法!

固定させたい要素「header」とかロゴやドロワーメニューに「position:fixed」したのに固定されない時の解決方法のご紹介です。 親要素に「transform: translate3d(0,...
javascript

【jQuery】フォームの入力チェック|バリデーション

フォームのバリデーションって作るの結構手間だよね。 チェックする項目が多いと時間かかるしプラグインを使っても良いけど、自分で作った方が修正も手軽だしなんたってカスタマイズしやすいじゃん! だからコピペ...
CSS

cssアニメーションがカクカクするのを防ぐ方法

CSSアニメーションのカクカクした動きを指摘された時、すぐ対処できる方法をご紹介! 「will-change」でGPUを使って高速処理 「will-change」を使うとアニメーションする前にブラウザ...
javascript

jQueryで後ろからn番目を取得する方法

jQueryを使って後ろからn番目は取得方法が無いのでCSSの「:nth-last-child(n)」を利用して指定します。 疑似クラスで最初、最後、n番目や奇数、偶数を指定|CSS jQuery ...
タイトルとURLをコピーしました