CSS
経緯 ありがたいことに投稿日から数年経過しても、検索からアクセスされてる記事がいくつかあるんだけど、情報が古いから○iitaみたいに この記事は公開日からn年以上が経過しています。情報が古い可能性がありますので十分ご注意ください。 っていう注意書き…
See the Pen text underline slide by miyata (@m1y474) on CodePen. 要点 通常時は疑似要素のborder-bottom: 1px solid #000; を指定したまま width: 0%; にしておく hoverしたときにwidth: 100%; にする
これのこと HTML <button type="button">Button</button> ボタン部分 button { background-color: #fff; width: 200px; display: block; padding: 10px 0; border: 1px solid #000; position: relative; z-index: 1; } button:hover { color: #fff; } ボタン背景部分 button::before { posit…
↓これのこと*1 See the Pen preloadなし by miyata (@m1y474) on CodePen. なんでチラつくの？ レンダリングのときは読み込まれなくて、hoverのときに初めて画像を読み込んでるから Networkタブを見てみるとhoverのタイミングで読み込んでるのがわかる 対応…
(割とやりつくされたネタだから今更感すごいけど。。。) [ドラえもん CSS] とかでググると実装方法がわかってしまうため今回は終始ググらないようにして実装 できたもの 実装 感想 所詮丸と直線の組み合わせだし position とか使わんくても Flexbox だけでモ…
※過去ブログの転記 CSSでBEMというルールを使用して行う設計方法を初めて知りました。厳密にはBEMじゃなくてMindBEMding1についてのことをまとめています MindBEMding 単語 書き方 対象 イメージ Block block 構成の親となる要素 継承元クラス Element block…
※過去ブログの転記 結合記号 セレクタ 対象 + E + F E直後の兄弟(隣接)要素Fに適用 ~ F ~ F E以降の兄弟となる要素F全てに適用 > E > F 親要素Eの子要素Fに適用 (space) E F 親要素Fの子要素Fと孫要素Fに適用 こういう時に使う仮の要素名ってElementのEを使…
※過去ブログの転記 普段は適当なclass名をつけて 親 子or孫 {...} 形式でばかり書いているので属性セレクタの種類についてまとめてみた セレクタ 対象 E[attr] 指定された属性を持つ要素 E[attr="val"] 属性の値が一致する要素 E[attr*="val"] 指定した値の…
※過去ブログの転記 擬似要素 擬似クラス 補足 いつもどっちがどっちかわからなくなるし、いまいち把握できていないのでmemo擬似要素と擬似クラスの違いをまとめてみました 擬似要素 指定したセレクタの一部に対して適用 セレクタ 対象 ::before 要素の前 ::a…
