メモ帳

読むな

CSS

hoverしたときにテキストの枠線を左から右に引く

See the Pen text underline slide by miyata (@m1y474) on CodePen. 要点 通常時は疑似要素のborder-bottom: 1px solid #000; を指定したまま width: 0%; にしておく hoverしたときにwidth: 100%; にする

ボタンをhoverしたときに背景色をスライドさせる

これのこと 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…

hoverでbackground-imageを切り替えたときの画像のチラつきが気になる

↓これのこと*1 See the Pen preloadなし by miyata (@m1y474) on CodePen. なんでチラつくの? レンダリングのときは読み込まれなくて、hoverのときに初めて画像を読み込んでるから Networkタブを見てみるとhoverのタイミングで読み込んでるのがわかる 対応…

HTML と CSS のみでドラえもんを作る

(割とやりつくされたネタだから今更感すごいけど。。。) [ドラえもん CSS] とかでググると実装方法がわかってしまうため今回は終始ググらないようにして実装 できたもの 実装 感想 所詮丸と直線の組み合わせだし position とか使わんくても Flexbox だけでモ…

BEMを使用したCSSのclass名の命名規則

CSS

※過去ブログの転記 CSSでBEMというルールを使用して行う設計方法を初めて知りました。厳密にはBEMじゃなくてMindBEMding1についてのことをまとめています MindBEMding 単語 書き方 対象 イメージ Block block 構成の親となる要素 継承元クラス Element block…

CSSの結合セレクタ

CSS

※過去ブログの転記 結合記号 セレクタ 対象 + E + F E直後の兄弟(隣接)要素Fに適用 ~ F ~ F E以降の兄弟となる要素F全てに適用 > E > F 親要素Eの子要素Fに適用 (space) E F 親要素Fの子要素Fと孫要素Fに適用 こういう時に使う仮の要素名ってElementのEを使…

属性セレクタの指定方法

CSS

※過去ブログの転記 普段は適当なclass名をつけて 親 子or孫 {...} 形式でばかり書いているので属性セレクタの種類についてまとめてみた セレクタ 対象 E[attr] 指定された属性を持つ要素 E[attr="val"] 属性の値が一致する要素 E[attr*="val"] 指定した値の…

CSSの擬似要素と擬似クラス

CSS

※過去ブログの転記 擬似要素 擬似クラス 補足 いつもどっちがどっちかわからなくなるし、いまいち把握できていないのでmemo擬似要素と擬似クラスの違いをまとめてみました 擬似要素 指定したセレクタの一部に対して適用 セレクタ 対象 ::before 要素の前 ::a…