「CSSプロパティ」書く順番

コーディングルール

目次一覧

　状態:結論(後で見返す用) 　閲覧数:2,885 　投稿日:2017-01-15 　更新日:2019-09-30
従来の問題点 ／ きっかけ ／「レイアウトベース」で記述していく

設定例

従来の問題点 ／ きっかけ ／「レイアウトベース」で記述していく

　閲覧数:644　投稿日:2017-01-15　更新日:2019-09-30

従来の問題点


適当に設定していたため、確認に手間取る

きっかけ


「box-sizing: border-box;」指定しても「margin」は対象外

従来
「margin」「padding」をセットで考えていた

昨日、気が付いたこと
・「margin」は、「width」「height」よりも上位レイヤー
・少なくともレイアウトにとっては

「レイアウトベース」で記述していく


レイアウトに影響を及ぼす内容から順番に記載していく

完璧さを求めない
・どうせ覚えられないので、主要なもののみ順番ルールを設定
・具体的には、下記7種類のみ

特徴
・「margin」を「padding」から分離
・「margin」を「width」「height」より先に記述

ルール
セレクタ{
 display
 position
 top
 left
 margin
  width
 height
 padding
 background-color
 color
 font-size
 font-weight
}


※Googleコーディング規約では、アルファベット順

設定例

　閲覧数:557　投稿日:2019-09-30　更新日:2019-09-30

設定例


2017/1/15
#brother{

  position:relative;

  top:0;

  left:0;

  margin: 20px;

  width:800px;

  height:600px;

  background-color:#4CAF50;

  color:white;

  font-size:2em;

  font-weight:bold:

}


CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと



類似度ページランキング
順位 ページタイトル抜粋 ％
1 「CSSプロパティ」書く順番 93
2 resizeプロパティ 40
3 「属性」「プロパティ」「アトリビュート」の違い 38
4 transformプロパティ 36
5 テディポップ 30
6 CSS仕様書 30
7 「OOCSS」とは別の考え方？ 28
8 ICCプロファイル 26
9 「ヴィンテージ」画像フィルタ実行例 26
10 プロジェクト別CSSリファクタ履歴 26
11 「秀丸」 VS 「Crescent Eve」 22
12 「漫画」画像フィルタ実行例 22
13 transitionプロパティ ／ animationプロパティ 22
14 CSSで画像をロールオーバー 21
15 「油彩画」画像フィルタ実行例 21
16 「水彩画」画像フィルタ実行例 21
17 「鉛筆画」画像フィルタ実行例 21
18 PhotoShop CS3で、ドロップシャドウと、テキストを囲む色 21
19 OOCSS 21
20 「Illustrator CS3」で出力範囲指定 21
2026/6/04 5:35 更新
週間人気ページランキング ／ 5-28 → 6-3
順位 ページタイトル抜粋 アクセス数
1 RGBの種類 ／ ビットカラー | RGB(色) 5
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
3 RGB → HSL | 色変換(色) 2
3 鉄道会社毎のカラーコード | カラーコード(色) 2
3 ログイン 2
3 「max-width:100%;」は原寸画像幅までしか拡大しない ／ 「width:100%;」は要素幅まで拡大する 2
3 画像縦横比の問題 | 画像 2
3 「要素{position:absolute;}親要素{position:absolute;}」と「要素{position:absolute;}親要素{position:relative;}」の違い | position(CSS) 2
3 レスポンシブ カテゴリー 2
3 CMY 2
3 CSSだけで、任意の要素に配置した画像を画面一杯に表示することは、基本的には出来ない。「img src」「背景画像」「div要素」何れの場合でも。可能なのは、特殊な要件が重なった場合だけ | CSS 2
3  全体基準となるhtmlタグへのfont-size指定案 2
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
4 P46 1
4 HSV → RGB 計算方式の違い | 色変換(色) 1
4 正規表現　2つのキャプチャ 1
4 SCSSは良いことばかりではないかも | SCSS(CSS拡張メタ言語) 1
4 色空間 ／ 表色系 ／ 顕色系 ／ 混色系 1
4 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 1
2026/6/4 5:05 更新