HTML/CSS/Sass CSSでチェックマーク・チェックボックスを自作する
忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋 チェックマーク チェックマークをCSSで作る時に行うことは以下3点です。 長方形の作成長方形の左辺と下辺のみ、ボーダーをつける45度回転させ...
CSS
HTML/CSS/Sass 
HTML/CSS/Sass 【CSS】枠線の付け方3つ（内側も含む）
「CSSで枠線をつけるといえばborder！」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ border ...
HTML/CSS/Sass 本番環境にデプロイしたらTailwind CSSが効かない時に確認すること
tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを２つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tailwindcss...
HTML/CSS/Sass モーダル内のみスクロールする方法
モーダルを表示した時、モーダル内のみスクロール可能にしたくて調べた記録です。 やり方 CSSでできます🙆♀️スクロールさせたい要素の親要素に、以下のCSSプロパティを付与します。 overflow: scroll; 縦方向のスクロールだけ...
HTML/CSS/Sass 【HTMLとCSS】オンオフ切り替えボタン（Googleっぽいやつ）
Googleっぽいオンオフ切り替えボタンが作りたくなったので、自分で実装してみました。コードも含めて紹介していきます。 ざっくり方針 inputのcheckboxタイプを使って実装します。CSSクラスの切り替えで操作することもできますが、B...
HTML/CSS/Sass 【初心者向け・CSS】2つ以上の指定するClass名をもつ要素にスタイルを適用する方法（AND条件、かつ）
先日、クラスをAND条件で指定してスタイルを適用する際に少し躓いたので記事にしました。 sample1とsample2というクラスがあると仮定して、説明します。 「sample1」と「sample2」のどちらのクラスも持つ要素にスタイルを指...