LinuxWSLからWindowsのデスクトップにアクセスする Windows Subsystem for Linux(WSL)からデスクトップやドキュメントにcdしたいときどうすれば良いのかなと迷ったので備忘録。 ...2023.05.25Linux
HTMLモーダルをdialog要素で実装してみる 主要ブラウザがdialog要素が対応してそろそろ1年経つので、そろそろ良いだろうと実際の制作で使用してみました。 dialog要素を使用することによって...2023.03.17HTML
css否定擬似クラス、:not()の詳細度 まれに疑似クラス:not()が予想とちがう振る舞い(効いてほしくないところに効く)をすることがあったので、cssの詳細度についてきちんと調べ直しました。 ...2023.01.25css
JavaScriptSwiperで複数のスライドを連動する方法 Swiperのcontrollerメソッドを使うことで、複数のスライドを同時に動かすことができます。 // 3つのスライドをすべて連動させあうサンプル ...2023.01.22JavaScript
css兄弟要素をもたない要素を指定する疑似クラス、:only-child タイトルの通りです。 :only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。 個人的にはリスト(ul, o...2022.11.21css
JavaScript配列内の要素すべてが条件に一致しているかチェックするArray.every() ある文字列が複数条件にマッチするか調べる良い方法がないかと考えていたら、every()メソッドを使うのが一番スマートのようでしたので備忘録。 e...2022.11.11JavaScript
JavaScriptJavaScriptのレスポンシブ CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。 ...2022.11.10JavaScript
cssFirefoxブラウザで:hasセレクタを試す方法 「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。 その...2022.11.08css
JavaScriptselect要素のoptionを操作するときのJavaScript たまに使うと忘れているので自分用メモ。 選択されているoption要素のvalueではなく要素自体(テキスト)を取得 手順 直接op...2022.10.25JavaScript
cssinput[type=number]の矢印を消したい時のCSS input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCS...2022.11.24css
css画期的な発明、:hasセレクタ これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようにな...2022.09.24css
JavaScriptObjectをkey,valueで呼び出す ループの中でオブジェクトをkey、valueで呼出したいときの備忘録です。 Object.entries(object)を使う Object.en...2022.09.20JavaScript