HTML/CSS– category –
-
【SCSS】@extendの使い方と使いどころ
本記事では、SCSSの@extendの使い方と使いどころについて解説しています。 @extendの使い方 @extendはセレクタのスタイルを継承したい時に使います。使い方は以下のとおりです。 .example { @extend 継承元セレクタ; } @extendを使ったサンプルコードを用... -
【SCSS】必要のないcssファイルを出力されないようにする方法
本記事では、SCSS(SASS)で必要のないcssファイルを出力されないようにする方法について解説しています。 ファイル名の先頭に_を付ける 例えば、ヘッダーのスタイルのみを記述しているheader.scssと、フッターのスタイルのみを記述しているfooter.scssを、s... -
style.css.mapは何のためのファイル？
本記事では、SCSS(SASS)→CSSに変換(コンパイル)した時に一緒に生成されるstyle.css.mapファイルの役割について解説しています。 style.css.mapの役割 style.css.mapの役割ですが、結論から申し上げますとコンパイルされた.cssファイルと.scssファイルを繋... -
【Live Sass Compiler】cssファイルの出力先を変更する方法
本記事では、Visual Studio CodeでSCSS→CSSに変換(コンパイル)する時に便利な拡張機能Live Sass Compilerでcssファイルの出力先を変更する方法について解説しています。 Live Sass Compilerのデフォルト出力先はコンパイルするscssファイルと同階層です。 ... -
Error: Function finished without @return.の原因と対処法
本記事では、SCSS→CSSに変換(コンパイル)する時に「Error: Function finished without @return.」のエラーが出力された時の原因と対処法について解説しています。 原因と対処法 このエラーが出る原因は、関数(@function)に@returnを設定していないことです... -
required parameters must precede optional parametersの原因と対処法
本記事では、SCSS→CSSに変換(コンパイル)する時に「required parameters must precede optional parameters」のエラーが出力された時の原因と対処法について解説しています。 原因と対処法 このエラーは、@functionや@mixinなどの引数の順番によって引き起... -
Internal Error: Incompatible units: ‘px’ and ‘vw’.の対処法
本記事では、min()やmax()をSCSSで使用していてCSSに変換(コンパイル)した時に「Internal Error: Incompatible units: 'px' and 'vw'.」のエラーが返された時の対処法について解説しています。 対処法 このエラーが返される箇所に対して、unquote()を使用... -
【CSS】クルクル回っているローディング画面を作る方法
本記事では、ローディング画面でよく見かけるクルクル回っているものを作成します。実際に作成する成果物は以下のとおりです。 円を作成する まず始めに円を作成します。完成系のコードは以下のとおりです。 <!DOCTYPE html> <html lang="en... -
【CSSのみ！】ページ内をゆっくりスクロールする方法
本記事では、JavaScriptを使わずにHTMLとCSSのみでリンクをクリックするとページ内をゆっくりスクロールする(スムーススクロール)の作り方について解説しています。 サンプルコード 以降の解説では、下記のサンプルコードを使用します。このサンプルコード... -
SCSSの関数(@function)の使い方・使いどころ
本記事では、SCSSの関数(@function)の使い方について解説しています。実際に関数をしようしたサンプルコードも用意しているので、使いどころについても理解できると思います。 関数(@function)の使い方 SCSSで関数を使用したい場合は、@function/@returnを...
