css

css

否定擬似クラス、:not()の詳細度

まれに疑似クラス:not()が予想とちがう振る舞い(効いてほしくないところに効く)をすることがあったので、cssの詳細度についてきちんと調べ直しました。 ...
css

画像や動画を自動トリミング、object-fit

画像スライドやリスト表示のように複数の画像を並列させるとき、画像のアスペクト比(縦横の比率)がバラバラだと、表示が凸凹になってしまい見づらくなってしま...
css

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

input要素の入力値を数値に指定する type=number に設定すると、既定で上下の矢印が表示されます。 これを消したいときに設定するCS...
スポンサーリンク
css

要素サイズの決め方を指定するbox-sizing

横一列に並べたつもりの要素が一列に収まりきらず段落ちしてしまった。ほとんどの場合borderかpaddingの値を見落としていることが原因ですが、この辺のトラ...
css

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

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

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

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

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

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

checkboxとflexを使った可変ボックス

カラーミーテンプレートを作るにあたり、極力jsを使わずにhtmlとcssだけで作ってしまおうと決めていたのでドロワーメニューやアイコンの変形など、ch...
css

cssセレクタ「+」「>」「~」の意味と使い分け

div > imgやdiv + pのように、+ > ~ で接続したcssセレクタを見かけることがあります。これらはcssの適用範囲を限定するセレクタの使い方です。それぞれの違いと使い方を解説します。
css

z-indexが効くとき、効かないとき

簡単そうに見えて実は難しいz-index。基本原理が分かっていないと思わぬところでつまずきます。z-indexがどのよように重なり合っているのか解説します。
css

text-alignが効かない・text-alignとmargin :autoの違い

要素の中央寄せに使われる"text-align:center"と"margin:0 auto;"。同じように見えますが対象が違います。使い方を誤らないように理解を深めておきましょう。
css

transformの基準点を分かりやすく図解します

変形や回転に使えるtransformプロパティですが、基準点を理解していないと思わぬ挙動をすることがあります。基準点の指定についてわかりやすく図解します。
タイトルとURLをコピーしました