CSS Web制作

CSSのプロパティを書く順番(記述順)は大きく分けて2種類

※ 当サイトではアフィリエイト広告を利用しています

CSSのプロパティってどういう順番で書くのがいいんだろう?

結論から言えば人によって様々ですが、少なくともみんな自分の中でルールは設けていると思います。

なのでどういったルールがあるのか書いていきたいと思います。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

CSSのプロパティを書く順番は大きく分けて2種類

Progateを始めたばかりの頃やサイトの模写を始めたばかりの頃はあまり考えてなかったかも知れませんが『CSSのプロパティは書く順番を意識した方がいいのではないか?』感じるようになってくると思います。

そして記述順には大きく分けて2種類あります。

  1. 内容順
  2. アルファベット順

どちらが正しいという事はないのでどちらを採用するかは個人の判断か、もしくはチームでやる場合はチームで決められたルールに則ってやる形になります。

それではそれぞれの特長について解説したいと思います。

 

内容順

まずは内容順です。

コードを書き始めた時、まず幅であるwidthを書いて次に高さであるheightを書いたことがあるかと思います。

またpositionであれば『top』『right』『bottom』『left』と書くと思います。

このように『幅と高さ』だったり、1つのプロパティで複数の項目がある場合などはそれをひとまとめにして書くと分かりやすいですね。

あとはフォント系、背景であるbackground系、アニメーション系など種類ごとに分けます。

そしてその種類をどの順番で書いていくか決める感じです。

なので、

  1. 内容ごとにまとめる
  2. そのまとめた内容の中でさらに書く順番を決める

となります。

内容順の特長

  • メリット:内容ごとに分けられているのでイメージしやすい
  • デメリット:種類分けをする手間が発生する
  • デメリット:人によってバラつきが発生する

 

アルファベット順

そしてもう1つがアルファベット順です。

これは説明するまでもないのですが、私はこっちを採用しています。

理由の1つとしては、googleが推奨しているからです。

その他の特長としては以下になります。

アルファベット順の特長

  • メリット:人によってバラつきがなくなる
  • メリット:種類分けをする手間がなくなる
  • デメリット:内容がバラバラになるのでイメージしにくい

チームでやるときに内容順だと人によってバラつきが発生する可能性があるので、アルファベット順の方がいいと思います。

デメリットとしてはposition: absolute;など使ったとき『top』『right』『bottom』『left』がそれぞれバラバラの配置になるので、ちょっと分かりにくくなります。

最初はwidthheightが離れている事など気になると思いますが、そのうち慣れます。

最大のメリットは内容や種類など考える必要がない事だと思います。

個人的には、

  • googleが推奨
  • 人によってバラつきがない
  • 内容を考える必要がない

という理由から、多少イメージがしにくくてもアルファベット順で書く方がメリットが大きいと思っています。

あとは、

  • align-itemsであれば最初
  • leftであれば真ん中
  • z-indexであれば最後

といった感じで大体の位置が分かるので、探してるプロパティが見つけやすいというメリットもあります。

例えばアルファベット順だとこのような感じになります(あえて色々入れてみました)

align-items: center;
bottom: 0;
color: #fff;
display: flex;
font-family: "メイリオ";
font-size: 4rem;
font-weight: bold;
height: auto;
left: 0;
margin: 0;
position: absolute;
right: 0;
top: 144px;
width: 100px;
z-index: 10;

まとめ

今回はCSSのプロパティを書く順番について解説しました。

最初の頃はアルファベットの歌が常に頭に流れていましたが、もう慣れたのでそんなこともなくなりました。

今までルールを決めていなかった人も、自分に合ったやり方でいいのでルールを決めて書くと綺麗なコードになると思います。

また自動でアルファベット順にソートする事も出来ます。

CSSプロパティをアルファベット順に並べる方法については以下の記事を参照下さい。

あわせて読みたい
【VSCode】CSScombの使い方とCSSプロパティをアルファベット順に並べる方法も解説
【VSCode】CSScombの使い方とCSSプロパティをアルファベット順に並べる方法も解説

続きを見る

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作