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

コーディングルール

目次一覧

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

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

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

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


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

　閲覧数:589　投稿日: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/8/19 21:37 更新
週間人気ページランキング ／ 8-12 → 8-18
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
1 Design 0 4
2 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
2 PNG画像透明化問題 | 画像 3
2 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 3
3 Chromeブックマーク(ブラウザ) カテゴリー 2
3 二次色(Secondary Color)とは？ ／ アプリ内での色の使用 2
3 Chromeでリンク先ページを常に別タブで開くためには、「Ctrlキーを押しながらクリック」 | Google Chrome(ブラウザ) 2
3 「Google Chrome」を経由したダウンロード個人ルール。「HTTrack Website Copier」とパッケージ化されていない拡張機能「Save As MHT 20220426」の 2 種類 | Google Chrome(ブラウザ) 2
3 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 2
3 Chromeブラウザは、ユーザーという単位で情報管理している(Cookieを使用する場面もあるが、必ずしもCookieだけに頼っているわけではない) | Google Chrome(ブラウザ) 2
3 コンソールエラー ／ ブラウザ間差異 | ブラウザ 2
3 「レイアウト崩れ」がどうしても解決しない → Chrome「デベロッパーツール」で怪しいと思った要素を、正常表示されるまで削除し続けていく | CSSトラブル対応(CSS) 2
4 Fireworks 8(Fireworks) カテゴリー 1
4 HTMLエディタ カテゴリー 1
4 Chrome 拡張機能 カテゴリー 1
4 フォント変更履歴 1
4 MediBang Paint | ソフトウェア 1
4 三大「高クオリティ」「モックアップベクター素材」配布サイト 1
4 HTML5で、set_include_pathを用いると、先頭に謎の空白行ができる | HTML5(HTML) 1
2026/8/19 5:05 更新