HTML/CSS/Sass CSSでチェックマーク・チェックボックスを自作する
忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋チェックマークチェックマークをCSSで作る時に行うことは以下3点です。長方形の作成長方形の左辺と下辺のみ、ボーダーをつける45度回転させるHT...
HTML/CSS/Sass
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 数値入力するスライドバー・スライダーの作り方
下の画像のような、数値入力できるインディケーターというか、スライドバー・スライダーみたいなものを作りたかったので、その備忘録です。作り方HTMLのinput要素で作れます。<inputtype="range"min="2"max="32"s...
HTML/CSS/Sass モーダル内のみスクロールする方法
モーダルを表示した時、モーダル内のみスクロール可能にしたくて調べた記録です。やり方CSSでできます🙆♀️スクロールさせたい要素の親要素に、以下のCSSプロパティを付与します。overflow:scroll;縦方向のスクロールだけ適用させた...
HTML/CSS/Sass Next.jsにTailwind.cssを導入する方法
Tailwind.cssをインストールNext.jsのバージョンが10以上の場合#npmの場合npminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest#yarnの場合ya...
HTML/CSS/Sass 【Gulp】Sass/Scssをコンパイルする方法（推奨版）
Gulpを使ってSass/Scssをコンパイルしていたのですが、非推奨の形で記載してしまっていたので、推奨版の書き方で記載したコードを備忘録として残しておきます。元々書いていたやり方こんな形で書いてました。しかし、公式HP見たり調べてみると...
HTML/CSS/Sass 【JavaScript/jQuery】モーダル内の外部リンクが飛べない
問題モーダル内で、aタグにhrefを使用してリンク先を指定していたのですが、何をしても外部リンクに飛べませんでした。解決策いろいろ調べましたが、HTML部分でどうにかするのは難しいようだったので、ちょうど使っていたjQueryで実装しました...
HTML/CSS/Sass 【Sass/Scss】mixinが読み込まれない！そんな時に確認すること5つ。
あれ？mixinなんで使えないの！ってなることありませんか？私もたまにあるのですが、その際に確認することを5つまとめました。だいたいはいずれかで解決します。mixinファイルが先に読み込まれているかmixinを指定するファイルが、mixin...
HTML/CSS/Sass 【HTMLとCSS】オンオフ切り替えボタン（Googleっぽいやつ）
Googleっぽいオンオフ切り替えボタンが作りたくなったので、自分で実装してみました。コードも含めて紹介していきます。ざっくり方針inputのcheckboxタイプを使って実装します。CSSクラスの切り替えで操作することもできますが、Boo...
HTML/CSS/Sass 【Sass保存版】便利なmixin4選
Sass使用するなかでも便利で、転用する場面が多そうなmixinを4つ集めました！linkのcolor指定mixin@mixinlinks($link,$visited,$hover,$active){&{color:$link;&:vis...
HTML/CSS/Sass 【初心者向け・CSS】2つ以上の指定するClass名をもつ要素にスタイルを適用する方法（AND条件、かつ）
先日、クラスをAND条件で指定してスタイルを適用する際に少し躓いたので記事にしました。sample1とsample2というクラスがあると仮定して、説明します。「sample1」と「sample2」のどちらのクラスも持つ要素にスタイルを指定す...