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

コーディングルール

目次一覧

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

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

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

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


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

　閲覧数:580　投稿日: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/6/17 8:13 更新
週間人気ページランキング ／ 6-10 → 6-16
順位 ページタイトル抜粋 アクセス数
1 Design 0 7
1 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 7
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 6
3 「属性」「プロパティ」「アトリビュート」の違い | CSS 5
3 RGB ／ 24ビットカラー 5
4 HTMLエディタ カテゴリー 4
4 XnConvertとは？／ インストール ／ 変換実行してみる 4
4 (ショートカットキーで拡張機能を起動する)拡張機能のキーボード割り当て | Chrome 拡張機能 4
4 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 4
4 GIMPで大画像の上に複数枚の小画像を横一列に並べる | GIMP 系(ソフトウェア) 4
4 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 4
5 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 3
5 黒体 ／ 色温度 ／ D65（6500K）／ D50（5000K）／ K | 色 3
5 Chromeがおかしくなった。width認識が狭くなりレイアウトが崩れる | Google Chrome(ブラウザ) 3
5 チェック柄　斜め線 | CSS 3
5 resizeが効かない場合は、min-heightを設定してみる | CSS 3
5 画像縦横比の問題 | 画像 3
5 RGBの種類 ／ ビットカラー | RGB(色) 3
6 Sleipnir | ブラウザ 2
6 レイアウトがどうしても崩れるときは、div marginへマイナス値が設定されていないか、確かめる | CSS 2
2026/6/17 5:05 更新