更新2020年01月30日はじめにCSSのプロパティの順番や全体の書き方を統一するため、CSScombというツールを使いました。Code(VSCode)というエディタに拡張機能として組み込みます。整形に使った設定ファイルと備忘録を書いておきます。3を使った方法を書いていましたが、インストール時にいろいろ面倒なのでVSCodeに変更しました。今のところVSCodeはCSS整形にしか使っていません。validator」「HTMLHint」も入れました。VSCodeとCSScombは、2020年01月26日にダウンロード、インストールしたものを使っています。CSScombは、バージョン5.3.0。VSCodeメインで使うエディタはあるし、あまり使うことはなさそうなので、ポータブル版(zip版)を使っています。インストーラ版とは手順で異なる箇所があると思います。公式サイトからアーカイブファイルをダウンロード。ファイルを解凍し、できたフォルダ内に「data」フォルダを作成。適当なフォルダにコピー。拡張機能の日本語パックをインストール。拡張機能のCSScombをインストール。設定を変更して有効化する。csscomb.jsonを設定変更済みのファイルに変更。@ITを参考にしました。CodeからWindowsのzip版、64bitをダウンロード。解凍すると長い名前のフォルダができるのでわかりやすく変更。私は「VSCode」にしてます。フォルダの中に「data」という名のフォルダを作成。ユーザーデータや拡張機能がこのフォルダにコピーされていくようです。ファイラ(As/R)での表示その後、VSCodeフォルダをプログラム関連のフォルダに移動。日本語化フォルダ内のCode.exeを実行。右下にメッセージが出ます。~とあり、マイクロソフトが利用状態を収拾する件について書いているようですが、とりあえずそのまま進みます。左端の四角いアイコン(拡張機能)をクリック。Code」が出てくるのでそれを選択、Installボタンを押してインストール。(インストールされたばかりの言語パックを有効にするためにVSコードを再起動しますか?)と出るのでYes。再起動で日本語化されます。1月26日のインストール時にはこれを忘れてエディタを終了させ再度起動させましたが、うまくいってるようでした。ありますが、特に何もせず日本語化されているようです。使い込んでいるわけではないのでなにか見落としているかもしれませんが。設定変更[ファイル]→[基本設定]→[設定]から設定変更。フォントファミリなどを変更していきます。「Tabキーを押すとスペースが挿入されます」はチェックを外しています。アプリケーションの更新とテレメトリはチェックを外したりnoneを選択しています。(VSCodeフォルダ)\data\user-data\User\settings.jsonが、デフォルトから変更した項目のファイルっぽいです。この後とりあえずVSCodeを再起動。CSScombインストール拡張機能の検索で「CSScomb」を検索し、インストール。2020年01月25日ではバージョン違いで2つ表示されましたが、バージョンが進んでいる「5.3.0」をインストールしました。(VSCodeフォルダ)\data\user-data\User\settings.jsonを開き、最後の項目の行末にカンマを打ち、改行。"csscomb"をコピー&ペーストしたあと一旦終了。最後の項目の行末にカンマを打ち、改行。"csscomb"」を書く。CSScomb設定変更(VSCodeフォルダ)\data\extensions\mrmlnc.vscode-csscomb-5.3.0\node_modules\csscomb\config\csscomb.jsonが設定ファイル。これの拡張子に「.old」でも追加して無効化する。用意しておいたcsscomb.jsonをコピー&ペースト。下記のCSScomb設定で書いているもの。使用手順ドラッグ&ドロップなどでCSSファイルをエディタで表示させる。Ctrl+Aで全体を選択。Styles]を選択。整形が行われるので、[ファイル]→[保存]で保存。F1キーでコマンドが大量に表示され、CSScombが見つからないときは、すぐ上の検索窓に「csscomb」等と入れて検索する。次からは先頭で出てくるはず。一度使えば次からは先頭で表示されるエラーcss変数を使うとき、変数の宣言で連続したハイフン2個を書いた箇所でエラーが出ました。#96663644;}変数の宣言箇所(もしくは全体)をコメントアウトしてからCSScombを使います。#96663644;*/}変数の使用箇所はそのままで大丈夫。var(--border-a);}CSScomb設定変更カスタマイズルールの整形は、設定ファイルの値をいじってなんとかしてます。プロパティの順番も、デフォルトのは古い感じなので変更しています。optionsに詳細な解説があります。before、afterくらいしか英語のわからない私でも例を見るだけでなにがどうなるか判ります。3のプラグインCSScombのカスタマイズ(Soraxism)の「プロパティのソート順の変更」も参考にしたのですが、2020年01月26日現在アクセスできませんでした。2.1仕様書日本語訳のプロパティ登場順の折衷でいきました。2.1仕様書のを使っています。2.2仕様書日本語訳を参考にしました。2.2仕様書でプロパティが紹介されるのは8章から18章と付録Aの範囲です。これをmozilla.org風に並べ替え、CSS3を間に追加しています。確認には以下のサイトを利用しました。MDN順序は以下の通りです。3プロパティは基本的にCSS2.1仕様書の記述順で。overflow-x、overflow-y、overflow-styleは、overflowのすぐ後に追加するなど、例外もあります。簡略プロパティは個々の数値を指定したプロパティより先に書いています。簡略でまず4箇所同時に指定し、次に1箇所だけ変更する場合があるためです。書き順は上、右、下、左で、値を4つ書くときの順番と同じです。ユーザ設定ファイルCSScombのユーザ設定ファイルです。2019年5月に作り直したもので、2020年1月には非推奨になっていることに気づいた2個のプロパティを削除しています。訳はいくつかのブログに載っていたもの+Google翻訳+公式サイトのbefore、afterを見ながら適当に書いてます。ページメディア"break-before","break-after","break-inside","page-break-before","page-break-after","page-break-inside","orphans","widows","-webkit-box-decoration-break","box-decoration-break"]]}セレクタ区切り文字の後は改行するようにしてます。複数のセレクタがある場合、セレクタの名称が長ければ改行、短ければ横に並べたいのですが、そんな器用な設定はなさそうなので、改行することにしました。結果なんとかなったようですダウンロードCSScombのユーザ設定ファイル:テキスト形式csscomb_20200126.txt使う場合はファイル名と拡張子を「csscomb.json」に変更。コメントは省いています。ユーザ設定ファイルのアンカー要素でdownload属性削除。2015年03月09日-moz-box-sizingを追加。ダウンロード用のファイルも変更。2015年01月15日このページを公開。案内サイト情報サイトマップ更新履歴パンくずリストHomePC関係HTML+CSS小冊子作成CSSの整形についてページ内ナビゲーションページ先頭はじめにVSCodeCSScomb使用comb設定変更ダウンロードproxima@coomaru.com正当な引用の範囲を越える無断転載は一切お断り。注意事項を無視したメールは破棄する可能性があります。