(私の)CSSコーディングルール

コーディングルール

目次一覧

　状態:- 　閲覧数:1,369 　投稿日:2020-03-06 　更新日:2020-03-16
CSS至上主義を改める ／「@charset "utf-8"」を記述しない ／ id名 class名

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

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

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


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

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

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


可能な限り、先祖セレクタを使用しない
先祖セレクタを除去する
具体例 △ 〇 改善内容 備考
1 
p.tag{

  color:blue;

}
 
.entrylist-metatag-txt

{

  color:blue;

}
 ・セレクタ要素名を削除
・class名「tag」が短くて重複する可能性があるため、より「一意な名称」へ変更		 -
2 
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
2026/3/19 5:09 更新
週間人気ページランキング ／ 3-12 → 3-18
順位 ページタイトル抜粋 アクセス数
1 ログイン 20
2 Design 0 19
3 Adobe Camera Raw 4.0 | Photoshop 5
4 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
4 RGBの種類 ／ ビットカラー | RGB(色) 4
4 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 4
4 色モデルイメージ図 | 色変換(色) 4
5 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 3
    5 RGB ⇔ Lab | 色変換(色) 3
    5 「bgcolor」「background-color」「background」の違い | CSS 3
    5 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
    5 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 | Backgrounds and Borders Module(CSS) 3
    5 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
    6 「Illustrator CS3」で出力範囲指定 | Illustrator CS3(Illustrator) 2
    6 型 ／ 型 ／ 型 2
    6 ボーダーでごまかす 2
    6 CSSが反映されない時にやること 2
    6 「Illustrator CS2」「Fireworks 8」「Photoshop CS2」比較 | Fireworks 8(Fireworks) 2
    6 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 2
    6 キャッシュを待機しています →「chrome://net-internals/#dns」→「Clear host cache」ボタンクリック | Google Chrome(ブラウザ) 2
    2026/3/19 5:05 更新