2021.03.29
@at-rootによるルートへの書き出しと@keyframes
通常通りSassをコンパイルした場合、ネストされたルールセットをルートに書き出すことはできません。 コンパイル後のCSSは以下のようになります。 クラス名con…
2021.03.22
gulp-plumberとgulp-notifyでエラーを通知
gulpのwatchメソッドでscssファイルを監視し、scssファイル更新時にsassを自動コンパイルする場合、scssファイル内に記述エラーがあるとwatc…
2021.03.22
gulpのwatchメソッドでsassを自動コンパイル
gulpのwatchメソッドでscssファイルを常時監視し、scssファイルが更新されたタイミングでsassをコンパイルします。 gulpfile.jsにwat…
2021.03.21
gulp-postcssでpostcss-sortingを実行
gulp-postcssはgulp上でPostCSSが実行できます。postcss-sortingはPostCSSのプラグインで、CSSプロパティの記述順を並べ…
2021.03.20
gulp-postcssでautoprefixerを実行
gulp-postcssはgulp上でPostCSSが実行できます。PostCSSはポストプロセッサーとして、コンパイル後のCSSに対して整形等の後処理ができま…
2021.03.19
gulp-sass実行時のエラー対処法
Node.jsのメジャーバージョンが異なる環境の場合、gulp-sass実行時にnode-sassで以下のようなエラーが発生する場合があります。 npm ls …
2021.03.18
gulpでソースマップを出力
gulpでsassコンパイル時にソースマップを出力します。gulp4は標準機能でソースマップが書き出せます。gulp3のようにgulp-sourcemapsのイ…
2021.03.17
本番環境と開発環境の処理をgulp-modeで分岐
gulpでsassコンパイル時に、開発環境はoutputStyle: 'expanded'、本番環境はoutputStyle: 'compressed'で書き出…
2021.03.17
gulp-sassによるsassコンパイル時の文字コード指定
gulp-sassでsassをコンパイルすると、scssファイル内に文字コードの指定があっても削除されます。 sassコンパイル後のlayout.css内に文字…
2021.03.16
gulp-sass-globでパーシャルファイルを読み込み
sassコンパイル時、コンポーネントごとに細分化されたパーシャルファイルは、読み込み元のscssファイルから@importを利用して読み込みます。以下の例ではl…
2021.03.16
gulp-sassの実行
gulpでsassをコンパイルします。まずnpm initでpackage.jsonを作成し、gulpとgulp-sassをインストールします。npm inst…
2021.03.14
jQueryのcssメソッドで要素のCSSを取得・変更
デモページはこちら jQueryのcssメソッドで要素のCSSを取得・変更します。以下のhtmlの構造でテストします。 まずCSSの変更です。対象の要素に設定さ…
2021.03.10
npm run-scriptでgulpを実行
ローカルにインストールしたnpmパッケージの実行は、npxコマンドを利用するのが簡単です。以下のgulpfile.jsでテストします。各タスクのfunction…
2021.03.07
.eslintrcの設定
ESLintはJavaScriptの構文をチェックするツール（Linter）の一つで、.eslintrcはESLintの設定ファイルです。以下を記述することでE…
2021.03.06
gulp-eslintの動作要件
gulp-eslint実行時に以下のようなエラーが発生する場合があります。これはgulp-eslintがインストールされていても、parserで使用しているba…
2021.03.05
jQueryのremoveAttrメソッド・removeDataメソッドで要素の属性を削除
デモページはこちら jQueryのremoveAttrメソッドとremoveDataメソッドで要素の属性を削除します。removeDataメソッドはカスタムデー…
2021.03.03
tableの横スクロール時にタッチデバイスでアニメーション表示
ブラウザの幅がtableの幅よりも狭くなった時に、CSSのoverflow-xを利用して横スクロールでtableを表示します。ただしiOS13以降safariで…
2021.02.19
CSSプロパティ::-webkit-scrollbarでブラウザのスクロールバーをカスタマイズ
webkit系ブラウザのSafariとChromeは、CSSプロパティの::-webkit-scrollbarでスクロールバーの見た目をカスタマイズできます。デ…
2021.02.19
mixinでfont-sizeとletter-spacingを設定
htmlタグやbodyタグにfont-sizeの基準値を何も設定していない場合、1emを指定すると16pxで表示されます。20pxで表示したい場合は、20px …
2021.02.14
Photoshopのカラーサンプラーツール
Photoshopのカラーサンプラーツールはスポイトツールの中にあります。カラーサンプラーツールの状態で左クリック、またはスポイトツールの状態でshiftキーを…
2021.02.12
scss-lint.ymlの設定
Ruby製のscss-lintはscssのコードを検査して設定と異なる場合は警告してくれるツールです。ルールを記述する設定ファイルは拡張子ymlのファイルで作成…
2021.02.07
gulp-scss-lintの動作要件
gulp-scss-lint実行時に以下のようなエラーが発生する場合があります。これはgulp-scss-lintがインストールされているにもかかわらず、scs…
2021.02.06
高さを判定してoverflow-yプロパティで縦スクロール
画面の高さが要素の高さよりも低くなった場合、要素にoverflow-yプロパティを適用して要素内のコンテンツを縦スクロールで表示します。デモページはこちら 画面…
2021.02.02
flex-growプロパティを利用した横並びのリスト
flex-growプロパティを利用して、左右にボーダーのある横並びのリストを作ります。リスト内のテキストの文字数が異なる場合でも、簡単にレスポンシブ対応できます…
2021.02.01
IcoMoonの使い方
IcoMoonはフォントファイルとCSSをダウンロードして使用するタイプのアイコンフォントです。Font AwesomeのようにCDNの読み込みはありません。デ…