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

目次一覧

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

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

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

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

　閲覧数:425　投稿日: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

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

　閲覧数:418　投稿日: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/14 21:35 更新

順位	ページタイトル抜粋	アクセス数
1	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	9
2	RGB ⇔ Lab \| 色変換(色)	7
2	鉄道会社毎のカラーコード \| カラーコード(色)	7
3	「Chrome拡張機能」開発中に遭遇したエラー \| Chrome 拡張機能	6
3	キャラクター無料着せ替えジェネレーター Dress up game ／オンラインサービス \| イラスト参考(デザイン)	6
3	「マウスオーバー」「ロールオーバー」「ホバー」の違い \| CSS	6
4	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	5
5	金融機関ブランドカラー／コーポレートカラー \| カラーコード(色)	4
6	黒体／色温度／ D65（6500K）／ D50（5000K）／ K \| 色	3
6	「東京都」のカラーコード取得は難しい \| カラーコード(色)	3
6	RGBの種類／ビットカラー \| RGB(色)	3
6	「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 \| カラーコード(色)	3
6	「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」	3
7	カラーコード／色コード \| カラーコード(色)	2
7	HTML5でiframeスクロールバーを表示しない方法が不明 \| HTML5(HTML)	2
7	3 行で結論／経緯／都のシンボルマーク	2
7	「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある \| z-index(CSS)	2
7	「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される \| CSSトラブル対応(CSS)	2
7	効果を打ち消すスタイルシート \| CSS	2
7	結論	2
	2025/6/14 1:01 更新