初心者が避けるべき7つのCSSの間違い

2023/01/25

カスケードスタイルシート (CSS) の操作は、初心者にとって難しい場合があります。CSS を使用すると、アプリケーションの外観を構築、更新、および維持できます。しかし、この言語では、HTML ページを操作して目的のレイアウトを得るスキルが必要です。

CSS を使用する際に避けるべきいくつかの間違いを次に示します。時間を節約し、開発プロセスを容易にします。

1. フォントサイズに px を使用する

「px」単位はピクセルを表します。これを使用して、要素の幅と高さからフォントサイズまで、Web ページ上のさまざまな長さを表現できます。

ただし、px はすべての画面でデザインを固定サイズにロックします。px の画像は、1 つの画面の全幅を占有できますが、別の画面のわずかな部分しか占有できません。より比例した要素が必要な場合は、rem やパーセンテージ (%) などの相対測定値を使用します。

使用する最適な相対測定値は rem です。この単位は、読者がブラウザ設定で設定できるルート要素のフォントサイズを指します。次の例では、要素に対する px と rem の影響を確認できます。

<!DOCTYPE html> <HTML> <head></head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </body> </html>

次の CSS で px 単位を使用して、このドキュメントのフォントサイズをスタイル設定できます。

h1 { font-size: 50px; }

h2 { font-size: 30px; }

p { font-size: 15px; }

結果のページは、大画面で表示すると許容できるように見えます。

しかし、電話のように小さい画面では見栄えがよくありません。

次に、同じコンテンツに rem を適用します。以下に示すように、html 要素でベースの font-size を指定し、rems を使用して他の要素のサイズを指定します。

html { font-size: 16px; }

h1 { font-size: 3rem; }


h2 {
    font-size: 2rem;
}

p { font-size: 1rem; }

大画面と小画面の違いに注目してください。rem を使用すると、画面サイズに関係なく、コンテンツのスケーリングが向上します。要素が設定された画面サイズを超えることはありません。そのため、ピクセルではなく相対的な長さを使用することをお勧めします。

デスクトップ画面で:

小さな画面では、rem 単位のテキストはまだ読めます。

2. すべてのスタイルを 1 つのファイルにまとめる

大きなプロジェクトに 1 つの CSS ファイルを使用すると、混乱が生じる可能性があります。更新時に混乱する長いコード行を含むファイルが作成されます。さまざまなコンポーネントの CSS スタイルシートにさまざまなファイルを使用してみてください。

たとえば、ナビゲーション、ヘッダー、およびフッター用に異なるファイルを持つことができます。もう 1 つは体のセクション用です。CSS ファイルを分離することで、アプリを構造化し、コードの使いやすさを向上させることができます。

3. インライン CSS の不適切な使用

通常の CSS では、Bootstrap や TailwindCSS などの CSS フレームワークと同じように、HTML ページにスタイルを記述できます。インライン CSS を使用すると、HTML 要素に独自のスタイルを適用できます。HTML 要素の style 属性を使用します。

次のコードは、インライン CSS の例です。

<h2 style="color:green;">This is a Green Heading</h2>

<p style="color:red;">This is a red paragraph.</p>

テキストは次のように表示されます。

ただし、インライン CSS のみの HTML は面倒です。CSS には他に場所がないため、すべての CSS は HTML と同じファイルに存在します。混みそうです。このようなファイルを編集するのは、特に自分のコードでない場合は困難です。

また、インライン CSS では、要素ごとにコードを記述する必要があります。これにより、繰り返しが増え、コードの再利用が減ります。Web ページのスタイルを設定するには、常に外部スタイルシートとインライン CSS を組み合わせて使用してください。

4.使いすぎ！重要

CSS では、!importantルールによってプロパティ/値の重要性が増します。その要素のそのプロパティの他のスタイルルールをオーバーライドします。

あなたはほんの少ししか持っていないはずです！コードの重要なルール。必要な場合にのみ使用してください。コードを書いてそれをオーバーライドしても意味がありません。コードが乱雑に見え、一部のデバイスで実行すると問題が発生します。

<!DOCTYPE html> <html> <head></head> <body> <p> I am orange </p> <p class="my-class"> I am green </p> <p id="my-id"> I am blue. </p> </body> </html>

CSS:

#my-id { background-color: blue; }

.my-class { background-color: green; }


p {
    background-color: orange! important;
}

結果は次のようになります。

5.命名規則に従わない

CSS には、標準コードの記述方法について開発者をガイドする命名規則があります。これは、将来 CSS ファイルをデバッグすることになった場合に不可欠です。

これらの基準の 1 つに、ハイフンを使用してグループ化された単語を区切ることが含まれます。もう 1 つは、セレクターの機能に応じてセレクターに名前を付けることです。したがって、それを見ている人は推測する必要はありません。また、コードの読み取り、保守、および共有が容易になります。例えば：

これの代わりに：

.image1 { margin-left: 3%; }

次のように書きます。

.boy-image { margin-left: 3%; }

スタイルシートを見ると、コードがどの画像用であるかが正確にわかります。Google の HTML/CSS スタイルガイドには、すべての開発者が知っておくべき多くの規則がリストされています。

6. コードをコメントアウトしない

コメントを書くことは、プログラミングで最も過小評価されているスキルです。多くの人は、コードを説明するコメントを書くのを忘れています。しかし、それは時間を節約します。コメントは、コードを読んで維持するために不可欠です。

CSS は大まかに構造化されており、誰でも独自の規則を作成できるため、コメントは不可欠です。スタイルシートを説明するために適切に構造化されたコメントを使用することをお勧めします。コードのセクションとその機能を説明するコメントを書くことができます。

/* video elements need space to breathe */ .video { margin-top: 2em; }

/* styling the hero section */ .salutation { margin-top: 1em; }

7. 事前に設計を怠る

多くの人がそうしていますが、無計画にコーディングを始めるのは重大な間違いです。CSS は、フロントエンドの構造がどのように見えるかを決定します。デザインは、プログラミングのスキルについて多くを語っています。

サイトのデザインは、ビジョンとそこに到達するために必要なリソースを明確にします。あなたのプロジェクトのイメージを持ってください。次に、紙にデザインするか、Canva などのデザインツールキットを使用して、必要なものを視覚化します。

プロジェクトの全体像を把握したら、すべてのリソースを集めてコーディングを開始します。時間と冗長性を節約できます。

これらの推奨事項を考慮する必要がある理由

Web 上でアプリケーションを開発している場合は、CSS を使用します。CSS をうまく扱うには、練習と標準的な規則に従う必要があります。規約は、コードを読みやすくするだけでなく、保守も容易にします。

標準化されたコードを作成すると、時間と労力を節約できます。フロントエンドのフォーマットに費やしていた時間を、より複雑な機能に費やすことができます。また、コードを再利用して他のユーザーと共有することもできます。設定された規則に従って、より優れたコードを記述し、より優れた開発者になりましょう。