(私の)CSSコーディングルール | 「コーディングルール」カテゴリー

目次一覧

　状態:- 　閲覧数:992 　投稿日:2020-03-06 　更新日:2020-03-16

CSS至上主義を改める／「@charset "utf-8"」を記述しない／ id名 class名

セレクタを「可能な限り短く」指定する／単位／色指定

CSS至上主義を改める／「@charset "utf-8"」を記述しない／ id名 class名

　閲覧数:422　投稿日:2019-10-12　更新日:2020-03-12

CSS至上主義を改める

他ページでも使用する場合のみ、CSS使用
そのページでしか使用しない場合は、HTMLへStyleを直書

「@charset "utf-8"」を記述しない

HTMLもCSSも UTF-8 で保存していて、HTML側で文字コードの宣言をしていたら、CSS側では不要

・ほんっとにはじめてのHTML5とCSS3：外部CSSの読み込み

id名 class名

短い名称はなるべく避ける
「navi」など「ありがちな短い名前」を付けると、後でgrep検索した際に結果が多く表示されてしまい、困ることになる

区切り文字
ハイフン

.h2-entry-title{}

.global-navigation-ul

.global-navigation-li

セレクタを「可能な限り短く」指定する／単位／色指定

　閲覧数:413　投稿日:2020-02-07　更新日:2020-03-16

セレクタを「可能な限り短く」指定する

可能な限り、先祖セレクタを使用しない
先祖セレクタを除去する

具体例 △ 〇改善内容備考

p.tag{
  color:blue;
}

.entrylist-metatag-txt
{
  color:blue;
}

・セレクタ要素名を削除
・class名「tag」が短くて重複する可能性があるため、より「一意な名称」へ変更

ul li{
  color:blue;
}

.global-navigation-li
{
  color:blue;
}

・先祖セレクタを削除
・class名をHTML階層が分かる「一意な名称」へ変更

単位

「rem」「%」使用を推奨
比較一覧表／個人的評価／注意点

値0は常に「0」と記載

△ 〇

#hoge{
  position:absolute;
  left:0px;
  top:50px;
  width:220px;
  padding:0px 0px 0px 30px;
  z-index:2;
}

#hoge{
  position:absolute;
  left:0;
  top:50px;
  width:220px;
  padding:0 0 0 30px;
  z-index:2;
}

色指定

1.可能な場合は、名前付き色(Named Colors)を使用する

body{
  color:blue;
}

2.可能であれば、3文字の色コードを使用する
〇

body{
  color:#fff;
}

△

body{
  color:#ffffff;
}

3.値は小文字で記述する
〇

body{
  color:blue;
}

body{
  color:#fff;
}

△

body{
  color:BLUE;
}

body{
  color:#FFF;
}

・CSS 「id」「class」名に関する調査履歴 1
・CSS の class名と id名を、全プロジェクトで意識的に統一しようかと

CSS管理効率化のために

(私の)HTMLデザインコーディングルール

順位	ページタイトル抜粋	％
1	(私の)CSSコーディングルール	81
2	(私の)HTMLコーディングルール	67
3	(私の)HTMLデザインコーディングルール	59
4	コーディングルールのための命名規則	48
5	フォーム要素に対する(私の)CSS適用ルール	42
6	CSS3で背景色にグラデーションをつける	33
7	グラデーション練習	32
8	Chromeデバッグする際CSSが()で表示される	29
9	サイトにプログラムコードを貼り付ける preタグのCSS	27
10	ドキュメントルート外のCSSファイル読込。～ 2018年	27
11	Chrome コンソール画面で CSSの:hover 適用スタイルを確認	27
12	CSSで画像をロールオーバー	27
13	CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する	26
14	背景CSS シームレスパターン	26
15	モバイルデザイン6 ／フォーム	25
16	Chromeをインストール出来ない	24
17	遠近グリッドはCS3にはないの？	24
18	「ヴィンテージ」画像フィルタ実行例	24
19	色モデルイメージ図	24
20	コンソールエラー／ブラウザ間差異	24
	2025/6/01 4:47 更新

順位	ページタイトル抜粋	アクセス数
1	「Chrome拡張機能」開発中に遭遇したエラー \| Chrome 拡張機能	11
2	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	9
3	FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 \| Font Awesome(フォント)	8
4	鉄道会社毎のカラーコード \| カラーコード(色)	7
4	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	7
4	「東京都」のカラーコード取得は難しい \| カラーコード(色)	7
5	RGB ⇔ Lab \| 色変換(色)	6
6	「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」	4
6	「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 \| カラーコード(色)	4
6	キャラクター無料着せ替えジェネレーター Rinmaru Games ／オンラインサービス \| イラスト素材(デザイン)	4
7	効果を打ち消すスタイルシート \| CSS	3
7	色モデルイメージ図 \| 色変換(色)	3
7	「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 \| Google Chrome(ブラウザ)	3
7	ICCプロファイル \| カラーマネージメント(色)	3
8	「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) \| Font Awesome(フォント)	2
8	RGB ⇔ XYZ ／ CIE RGB ／ sRGB(D65) ／ sRGB(C) ／ Adobe RGB ／ NTSC RGB	2
8	黒体／色温度／ D65（6500K）／ D50（5000K）／ K \| 色	2
8	「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される \| CSSトラブル対応(CSS)	2
8	Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない \| Google Chrome(ブラウザ)	2
9	「Sleipnir」という選択肢	1
	2025/6/1 1:01 更新