HTML/CSS/Sass CSSでチェックマーク・チェックボックスを自作する 忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋 チェックマーク チェックマークをCSSで作る時に行うことは以下3点です。 長方形の作成長方形の左... 2022.06.18 HTML/CSS/Sassフロントエンド
HTML/CSS/Sass 【CSS】枠線の付け方3つ(内側も含む) 「CSSで枠線をつけるといえばborder!」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ ... 2022.01.29 HTML/CSS/Sassフロントエンド
HTML/CSS/Sass 本番環境にデプロイしたらTailwind CSSが効かない時に確認すること tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを2つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tail... 2021.09.11 HTML/CSS/SassNext.jsフロントエンド
HTML/CSS/Sass 数値入力するスライドバー・スライダーの作り方 下の画像のような、数値入力できるインディケーターというか、スライドバー・スライダーみたいなものを作りたかったので、その備忘録です。 作り方 HTMLのinput要素で作れます。 <input type="r... 2021.06.03 HTML/CSS/Sassフロントエンド開発
HTML/CSS/Sass モーダル内のみスクロールする方法 モーダルを表示した時、モーダル内のみスクロール可能にしたくて調べた記録です。 やり方 CSSでできます🙆♀️スクロールさせたい要素の親要素に、以下のCSSプロパティを... 2021.05.10 HTML/CSS/Sassフロントエンド開発
HTML/CSS/Sass Next.jsにTailwind.cssを導入する方法 Tailwind.cssをインストール Next.jsのバージョンが10以上の場合 # npm の場合 npm install -D tailwindcss@latest postcss@latest autoprefixer... 2021.03.26 HTML/CSS/SassNext.jsフロントエンド開発
HTML/CSS/Sass 【Gulp】Sass/Scssをコンパイルする方法(推奨版) Gulpを使ってSass/Scssをコンパイルしていたのですが、非推奨の形で記載してしまっていたので、推奨版の書き方で記載したコードを備忘録として残しておきます。 元々書いていたやり方 こんな形で書いてました。しかし、公式HP... 2021.03.24 HTML/CSS/Sassフロントエンド開発
HTML/CSS/Sass 【JavaScript/jQuery】モーダル内の外部リンクが飛べない 問題 モーダル内で、aタグにhrefを使用してリンク先を指定していたのですが、何をしても外部リンクに飛べませんでした。 解決策 いろいろ調べましたが、HTML部分でどうにかするのは難しいようだったので、ちょうど使っていた... 2021.03.07 HTML/CSS/SassJavaScriptフロントエンド開発
HTML/CSS/Sass 【Sass/Scss】mixinが読み込まれない!そんな時に確認すること5つ。 あれ?mixinなんで使えないの!ってなることありませんか?私もたまにあるのですが、その際に確認することを5つまとめました。だいたいはいずれかで解決します。 mixinファイルが先に読み込まれているか mixinを指定するファ... 2021.03.06 HTML/CSS/Sassフロントエンド開発
HTML/CSS/Sass 【HTMLとCSS】オンオフ切り替えボタン(Googleっぽいやつ) Googleっぽいオンオフ切り替えボタンが作りたくなったので、自分で実装してみました。コードも含めて紹介していきます。 ざっくり方針 inputのcheckboxタイプを使って実装します。CSSクラスの切り替えで操作することも... 2021.02.27 HTML/CSS/Sassフロントエンド開発
HTML/CSS/Sass 【Sass保存版】便利なmixin4選 Sass使用するなかでも便利で、転用する場面が多そうなmixinを4つ集めました! linkのcolor指定 mixin @mixin links ($link, $visited, $hover, $active) {... 2021.01.03 HTML/CSS/Sassフロントエンド
HTML/CSS/Sass 【初心者向け・CSS】2つ以上の指定するClass名をもつ要素にスタイルを適用する方法(AND条件、かつ) 先日、クラスをAND条件で指定してスタイルを適用する際に少し躓いたので記事にしました。 sample1とsample2というクラスがあると仮定して、説明します。 「sample1」と「sample2」のどちらのクラスも... 2020.12.14 HTML/CSS/Sassフロントエンド開発