css

兄弟要素をもたない要素を指定する疑似クラス、:only-child

タイトルの通りです。 :only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。 個人的にはリスト(ul, ol, dl)の...
JavaScript

配列内の要素すべてが条件に一致しているかチェックするArray.every()

ある文字列が複数条件にマッチするか調べる良い方法がないかと考えていたら、every()メソッドを使うのが一番スマートのようでしたので備忘録。 every()、基...
JavaScript

JavaScriptのレスポンシブ

CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。 window....
スポンサーリンク
css

Firefoxブラウザで:hasセレクタを試す方法

「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。 その為、実際のサイト...
JavaScript

select要素のoptionを操作するときのJavaScript

たまに使うと忘れているので自分用メモ。 選択されているoption要素のvalueではなく要素自体(テキスト)を取得 手順 直接optionを指定することはでき...
css

input[type=number]の矢印を消したい時のCSS

input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCSSをメモ。 ch...
css

画期的な発明、:hasセレクタ

これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようになったのが...
JavaScript

Objectをkey,valueで呼び出す

ループの中でオブジェクトをkey、valueで呼出したいときの備忘録です。 Object.entries(object)を使う Object.entries( ...
JavaScript

【非同期通信】fetchの完了を待って続きの処理を行う

これまでasync / await をなんとなくでしか理解していなかったばかりに盛大に時間をロスしてしまったので反省として記録にまとめます。 今後どなたかの役に...
JavaScript

初心者向け Swiper jsの使い方 覚書

Twitterに勝手に表示されるおすすめ投稿で「Swiperの使い方がわからない!」という叫びと、それに共感する声をたくさん見たので、ざっくりとした基本の使い方...
Linux

zipファイルの文字化けを直す

Windowsでzip圧縮すると自動的にShift-jisで保存されてしまうらしく、これをLinuxで展開すると当然のようにファイル名が文字化けします。 今回は...
JavaScript

DOMの変化を監視してくれるMutation Observer

Java ScriptのObserver(監視者)にはいくつか種類がありますが、Mutation ObserverはDOMの変更を監視してくれます。 単純にDO...