低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

スタイルプロパティの記述順番ガイドライン

スタイルプロパティの記述順番にもガイドラインを作ることで、コードが更に読みやすくなります。

記述順番ガイドライン

要素の大きさ・領域・装飾に関するプロパティ

  1. margin
  2. padding
  3. width
  4. min-width
  5. max-width
  6. height
  7. min-height
  8. max-height
  9. background-color
  10. background-image
  11. background-repeat
  12. background-position
  13. border-width
  14. border-style
  15. border-color
  16. outline-width
  17. outline-style
  18. outline-color
  19. list-style-type
  20. list-style-image
  21. list-style-position
  22. display
  23. visibility
  24. overflow
  25. clip

要素の位置に関するプロパティ

  1. float
  2. clear
  3. position
  4. top
  5. bottom
  6. left
  7. right
  8. z-index

テキストに関するプロパティ

  1. color
  2. font-family
  3. font-size
  4. font-weight
  5. font-style
  6. text-indent
  7. text-decoration
  8. text-align
  9. vertical-align
  10. line-height
  11. letter-spacing
  12. direction
  13. unicode-bidi
  14. text-shadow
  15. text-transform
  16. white-space
  17. word-spacing

テーブルに関するプロパティ

  1. table-layout
  2. caption-side
  3. border-collapase
  4. border-spacinfg
  5. empty-cells
  6. font-size-adjust
  7. font-stretch
  8. font-variant

その他特殊なもの

  1. cursor
  2. content
  3. counter-increment
  4. counter-reset
  5. quotes

このように単純に順番だけではなく、スタイルプロパティをカテゴリー分けすることでより読みやすいコードになります。
また、スタイルプロパティを追記する際にも2重で指定してしまうというミスを減らすことができます。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ