[CSS]CSSビギナーに気をつけてほしい5つのポイント

スタイルシートは、複数の人間が携わる場合は当然のことながら、自分一人の場合でも長期にわたり携わることがあるので、分かりやすくクリーンなものにしておきたいものです。

スタイルシートを適切に使用し、そして管理しやすくする5つのポイントをSoh Tanakaから紹介します。

サイトのキャプチャ

CSS Beginners Do's and Dont's Part 2

下記は各ポイントを意訳したものです。

1. classとidは適切に使用する

ビギナーは新しいclassをどんどん作成してしまう傾向があります。冗長なものや不必要なclassやidはCSS本来の目的からはずれるものです。
CSSの美しさはデザインをマークアップから切り離すことにあり、それを許すということです。またclassやidを最小限にすることで負荷を減らすことにも繋がります。

Bad

p要素それぞれに全て個別のclassを使用しています。

Good

まとめられるclassやidはまとめて使用します。

2. スタイルシートはクリーンにしておく

私たちの多くが時折、マークアップにインラインのスタイルを残してしまうことがあります。これはよくないことで、最終的には一貫性のないものを作ることになってしまいます。
ビギナーとして、まず全てのスタイルをマークアップから取り出すことをはじめてください。その際、スタイルシートを分かりやすく組織化して記述することは非常に重要です。

Bad

h1要素にインラインのスタイルを指定しています。

Good

CSSを分離して別ファイルにスタイルを指定します。

HTML

CSS

3. トリックは取り入れて、ハックは避ける

クロスブラウザでの問題を解決するために、ハックは使用しないで、トリックを使用するようにします。
大いに精通すべきトリックを学ぶためのリソースを紹介します。

4. CSSの最適化

CSSを最適化することができる種々の方法があります。
スタイルシートの肥大化を避けるために何をすることができるかについて、5つのステップにわけて減量していきます。
5 Step Style Sheet Weight Loss Program

5. 絶対配置を適切に使用する

私は時々、すべてのエレメントに絶対配置を使用しているサイトを見かけます。絶対配置は確かに強力で、有用なテクニックです。
しかしながら、絶対配置は決して乱用されるべきではありません。

floatやブロック要素を使用してレイアウトを作る正しいテクニックを学んでください。
絶対配置は乱用しないでください!

sponsors

top of page

©2018 coliss