CSS Web制作

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

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

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

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

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

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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制作