【VSCode】CSSフォーマットの拡張機能『CSSComb』の使い方
CSSのフォーマットが簡単にできるVSCodeの拡張機能、『CSS Comb』について解説してゆきます。 ▼この記事を書いたひと フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。 VSCodeでCSSをフォーマットする方法 テキストエディタ『Visual Studio Code』 CSSコードに対する『フォーマット（書式ルール）』の適用は、きれいで見やすい、品質の高いコードを書くうえでの重要な一要素になります。 ▼CSSのフォーマット例 引用符の統一（シングルorダブルクォーテーション） インデント（空白・タブ） や改行の位置 CSSプロパティの並び順 コーディングの際には、上記のルールを守る事でコードをきれいな状態を保てますが、常にルールを意識するのも大変ですし、かといって、コーディング後に全体を手
絶対つまずかないGulp 5入門 - インストールとSassを使うまでの手順 - ICS MEDIA
ウェブサイト制作には煩雑な処理を自動化する「タスクランナー」や「ビルドシステム」というツールがあります。この記事では、タスクランナー「Gulp.jsガルプ」の導入手順を解説します。 導入は簡単で、本記事の手順では5分程度でセットアップできます。Gulpはコマンドラインで使うのが一般的ですが苦手な人でも安心して学べるよう、ビデオでも解説します。 この記事で学べること イマドキのGulpの導入手順 Gulp 5に対応した書き方 Sassサスの導入手順 GulpやSassの導入や使い方にはいろんな方法がありますが、この記事では現場で使われている方法を紹介します。Gulpの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。本記事は最新版に対応させているので、安心して読み進めてください。 ※この記事では、Node.js v18〜v20で動作検証をしています。 ※Gulp
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
CSS Grid Layout generates compile warnings from autoprefixer · Issue #5964 · angular/angular-cli
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. Pick a username Email Address Password Sign up for GitHub By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails. Already on GitHub? Sign in to your account
【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する | バシャログ。
今年も残り1ヶ月になりました、そろそろ娘へのクリスマスプレゼンの準備をしなくては… ishida です。 さて今回は、grunt-csscomb についてです。 grunt-csscomb は CSSのプロパティをソートしてくれるプラグインです。 コードを記述する際に並び順を意識することなくコーディングを進められるのでとても便利です。 しかしデフォルトのまま使用すると以下のような感じになります。 無駄な改行や { 前での折り返しなど気になる点が多々あります。 このコードを整形するには、configファイルで設定します。 Gruntのcsscombオプションでjsonファイルを指定 まず、Gruntfile.js にて csscombオプションでjsonのファイルを以下のように指定します。 grunt.initConfig({ csscomb: { options: { config: 'c
gulp-csscombで任意のプロパティ記述順序を設定する - Qiita
設定ファイルの内容を定義 整形方法 こちらのジェネレーターでファイルの整形方法を定義できます。 (例)カラーコードの表記方法(小文字 or 大文字) #aaa or #AAA これにはジェネレーターはないので、自分で定義することになります。以下を参考にしました。 ・記述順序の参考 https://github.com/csscomb/csscomb.js/blob/master/config/csscomb.json https://github.com/csscomb/csscomb.js/blob/master/config/yandex.json https://github.com/csscomb/csscomb.js/blob/master/config/zen.json .csscomb.jsonを作成 gulpfile.jsと同じ階層、もしくはプロジェクトのルートフォルダに「
Gulp.jsとPostCSSを使ってCSSの面倒な作業をなくそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ここ最近はいろいろと勉強したいことがあふれかえってます。うまく時間を作って知識を増やしていきたいところです。こんにちは、CTOの林です。 近年のエンジニアリングは自動化の方向へどんどん流れています。 Grunt,Gulp,WebPack,CI,Chef,Ansible…… etc. もちろんCSSにも自動化の流れが来ています。 過去にこんなことがありませんでしたか？ CSSのインデントや記述の仕方がバラバラ パフォーマンス・チューニング？？ とりあえずベンダープレフィックスを全部つけておけばいいだろう！ 圧縮を納品前にやって、圧縮したら崩れた 今日は普段の制作ですぐに使えるCSS自動化の方法を紹介しつつ、実際に使えるパッケージを導入するところまでを行いたいと思います。 ※11月18日にいいオフィスで行われた「書籍『最強のCSS設計』出版記念イベント＆勉強会―CSS設計、チーム開発を成功させ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ | コリス
GitHub - purifycss/purifycss: Remove unused CSS. Also works with single-page apps.
Tumblr
csscomb.js/doc/options.md at master · csscomb/csscomb.js
GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env