こんにちは！フロントエンドエンジニアを目指し日々勉強しているエンジニア１年生です！
今回は前回の続きで、先輩エンジニアから指摘を受けた気を付けるべきポイント４点まとめましたのでご紹介していきます！
１、CSSの記述順番に気を付けよう！
統一感のあるコーディングをする上で、CSSの記述順番を決めることは非常に重要になります。
下記がCSS記述の順番一例です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
グループ分けルール例 /** ボックスモデルの表示や性質 **/ display position float など /** サイズや余白 **/ width height margin padding など /** 色やテキスト周り **/ background color font-size text-align など ショートハンド margin: 5px 20px 15px 0; ※ショートハンドとは 上記のmargin:5px 20px 15px 0; のように特定プロパティにおいては簡略化表記ができるため、 宣言をいくつもすることなく一括指定できます。 |
カンナートでは上記のように大きな”くくり”から小さな”くくり”に向かって記述(グループ分けを行う)しています。
ぜひ上記の順序を参考にして統一感のあるコーディングをしていきましょう！
２、クラス名の命名に気を付けよう！
クラス名の命名は難しいですが、運用していくにあたって誰がみてもこのクラス名はどこを指しているかをわかるようにすることは重要になります。
クラス名を付けるにあたっては、文章構造上、意味のある名前にすることがルールとなります。
具体的に下記を見ていきましょう
上記のレイアウトをコーディングする際に、一番左上のKANNARTのロゴマークのクラス名を指定する際は、
headerの位置にあるロゴマークということで、header-logoもしくはlogoという名前でクラス名を指定します。
このように意味のあるクラス名をつけることで、誰が見てもすぐにどこの要素を示しているかがわかります！
３、コーディングの前にブロックごとで区分けしよう！
ブロックで分けるとは、「ここからここまでがひとつのかたまりです」と、まとめることを言います。共通の要素ごとに分けていくイメージです。
具体的にブロック分けの一例を見ていきましょう！
例えば上記のWebページをコーディングするとします。上記をブロック分けした場合、下記の通りになります。
上記のようにひとくくりになっている箇所をグルーピングしてブロックを区分けしていきましょう！
上記を参考にして全体のおおまかなコーディングは下記の通りとなります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<header class="header"> </header> <section class="top"> </section> <section class="services"> </section> <section class="news"> </section> <section class="recruit"> </section> <section class="faq"> </section> <section class="contact"> </section> <footer class="footer"> </footer> |
コーディングの前にブロック分けすることで、大枠のコーディングができました！
このように全体のブロック分け→コーディングという手順を踏むことで効率よく進められると思います！
４、共通クラスを見つけてコーディングの記述を短縮しよう！
コーディングを進めていく中で、サイトの特性を十分に考慮し、適切かつ必要最小限の記述でコーディングを行うことが重要になります。
具体的に下記を見てみましょう。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="btn-red"> 株式会社カンナート </div> <div class="btn-green"> 株式会社カンナート </div> <div class="btn-blue"> 株式会社カンナート </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.btn-red{ margin:0; padding:15px; background-color:#FF0000; color:#333; } .btn-green{ margin:0; padding:15px; background-color:#008000; color:#333; } .btn-blue{ margin:0; padding:15px; background-color:#0000FF; color:#333; } |
.btn-red、.btn-green、.btn-blueの３つのクラスがあります。
この時CSSを見てみると、それぞれのクラスで
・padding:15px;
・margin:0;
・color:#333;
上記が重複していることがわかります。これは必要最小限の記述でコーディングするに反するため修正が必要となります。
下記が必要最小限の記述でコーディング修正してみたものです。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="btn btn-red"> 株式会社カンナート </div> <div class="btn btn-green"> 株式会社カンナート </div> <div class="btn btn-blue"> 株式会社カンナート </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.btn{ margin:0; padding:15px; color:#333; } .btn-red{ background-color:#FF0000; } .btn-green{ background-color:#008000; } .btn-blue{ background-color:#0000FF; } |
上記のようにbtnという共通クラスを設定することで、重複している無駄なCSSの記述をなくすことができました！
このように共通クラスなどを設定するなどして、必要最小限の記述でコーディングすることを心がけていきましょう！
以上４点まとめてみました！また今後とも気づいたことなどアップしていきたいと思います！
0
0