css否定擬似クラス、:not()の詳細度
まれに疑似クラス:not()が予想とちがう振る舞い（効いてほしくないところに効く）をすることがあったので、cssの詳細度についてきちんと調べ直しました。 ...
ミフネWEB
css
HTMLfont awesomeの使い方
無料で多種多様のアイコンフォントを利用することのできるfont awesome 新しく作っているサイトで使おうと思ったら、以前とバージョンが変わり若干...
JavaScriptSwiperで複数のスライドを連動する方法
Swiperのcontrollerメソッドを使うことで、複数のスライドを同時に動かすことができます。 // 3つのスライドをすべて連動させあうサンプル ...
css画像や動画を自動トリミング、object-fit
画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比（縦横の比率）がバラバラだと、表示が凸凹になってしまい見づらくなってしま...
cssinput[type=number]の矢印を消したい時のCSS
input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCS...
css要素サイズの決め方を指定するbox-sizing
横一列に並べたつもりの要素が一列に収まりきらず段落ちしてしまった。ほとんどの場合borderかpaddingの値を見落としていることが原因ですが、この辺のトラ...
css兄弟要素をもたない要素を指定する疑似クラス、:only-child
タイトルの通りです。 :only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。 個人的にはリスト（ul, o...
JavaScript配列内の要素すべてが条件に一致しているかチェックするArray.every()
ある文字列が複数条件にマッチするか調べる良い方法がないかと考えていたら、every()メソッドを使うのが一番スマートのようでしたので備忘録。 e...
JavaScriptJavaScriptのレスポンシブ
CSSで@media screenをつかってレスポンシブなデザインを作るように、JavaScriptでもメディアクエリにあわせた設定が可能です。 ...
cssFirefoxブラウザで:hasセレクタを試す方法
「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。 その...
JavaScriptselect要素のoptionを操作するときのJavaScript
たまに使うと忘れているので自分用メモ。 選択されているoption要素のvalueではなく要素自体（テキスト）を取得 手順 直接op...
css画期的な発明、:hasセレクタ
これまでのcssは、先にある要素 → 後にある要素 の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようにな...