重複や乱雑さのないクリーンなCSSの書き方
ウェブ プロジェクトに何週間も取り組むと、CSS ファイルには繰り返しの定義、長くて理解しにくいクラス名、目的を追跡しにくい行がいっぱいになります。この混乱は突然現れるのではなく、小さな調整や一時的な追加が蓄積されて永続的なものになります。
しかし、CSS の記述は必ずしも無計画または面倒である必要はありません。コードを整理し、重複を減らし、拡張性を向上させるのに役立つシンプルなテクニックと実証済みの方法論があります。いくつかのルールとプラクティスに従うことで、CSS ファイルを明確で理解しやすく、読み込みが速いものに変えることができます。
このガイドでは、最初の行から最後の変更まで、クリーンな CSS を書くのに役立つ実用的な手順を紹介します。
1990 年代後半の始まり以来、CSS の範囲は大きく拡大しました。これは現在、強力かつ高度なテクノロジーであり、デスクトップ ブラウザーやモバイル ブラウザーで広くサポートされていますが、まだ学ぶべきことはたくさんあります。 CSS を初めて使用する場合でも、CSS を初めて学習しようとしている場合でも、このチェックリストには実用的なヒント、一般的なガイドライン、高品質のリソースが用意されており、役立ちます。
1. まず HTML を理解していることを確認してください。
CSS を学び始める前に最初に知っておくべきことは HTML です。明らかなように思えるかもしれませんが、コンテンツのフォーマットに進む前に、強化しておくべき重要な概念がいくつかあります。
学習の過程では、セマンティクス (HTML) とスタイル (CSS) を分離することに重点が置かれます。適切で明確なマークアップを使用し、慣れ親しんだスタイル的な HTML タグは削除するようにしてください。
Mozilla の HTML ドキュメントは優れています。 (そして、Web プラットフォームを網羅した彼の資料すべて)、HTML に自信がない場合はそこから始めてください。
2. CSSの基本から始めましょう
Mozillaのウェブサイトに留まり、CSS の入門を始めましょう。
この時点で、学ぶべき基本的なことは 2 つあります。基本的な CSS の記述方法と、それを HTML ファイルにリンクする方法です。 Mozilla のドキュメントは、次の例を使用した CSS の簡単な紹介から始まります。
CSS の書き方が得意でなくても、このスニペットが何をするのかはおそらく理解できるでしょう。つまり、h1 要素を赤にして、特定のフォント サイズを設定するのです。
Mozilla の記事「CSS 入門」では、パズルの 2 番目の部分について説明し、上記のような CSS を HTML ファイルに適用する方法を説明しています。内部スタイルシートはおそらく最も早く簡単に始めることができる方法ですが、外部スタイルシートには多くの利点があるため、両方を試してみることをお勧めします。
3. ゲームをする
役立つ素晴らしいゲームはたくさんありますが CSSを学ぶただし、通常はネットワーク計画などのより高度な技術をカバーします。 CSS Diner は初心者に適しており、ドキュメントの特定の部分をフォーマットするためにマークする CSS セレクターを理解するのに役立ちます。上記の例は単純な「h1」セレクターを示していますが、より複雑になることもあります。
a#selected > .icon,
.box h2 + p {
font-weight: bold;
}
このテストは CSS スピードラン セレクターのスキルを試すもう一つの良いテストですが、名前の通り、より疲れる体験になる可能性があります。
4. Chrome/Safari/Firefoxの開発者ツールを使用する
基本をマスターしたら、独自のスタイルシートを書き始める準備がほぼ整います。ただし、テキスト エディターを開いてファイルを変更する必要がなくなり、ブラウザーで直接 CSS を試し始めることができます。
たとえば、Google デベロッパー ツールの要素インスペクタを使用すると、表示するページのあらゆる要素に適用されている CSS を表示できます。
さらに、スタイル パネルを使用して CSS ファイルを変更したり、新しいスタイルを作成したりして、結果を即座に確認することもできます。
これらのツールはブラウザごとに若干異なりますが、スキルの向上に活用できるはずです。 Chrome には、許容されるプロパティ名と値を提案する優れたオートコンプリート サポートがあります。実験することで、さまざまな機能を知り、Mozilla Developer Network (MDN) ドキュメントへの直接リンクを通じて詳細を学ぶことができます。
5. オンラインエディタを試す
このテキスト エディターを使用する前に、ローカル ファイルを扱わずに CSS スキルを試す別の方法があります。次のような多くの Web アプリケーションがあります。 コードペン أو JSFiddle。 これらのツールは、ゲーム部分を除けば、これまでに見たことのあるゲームに似ています。 HTML と CSS を編集するために使用できるテキスト ボックスが提供され、最終結果がプレビューで表示されます。
助言
これらのツールには通常、プログラミング スキルを開発するための JavaScript セクションが含まれていますが、これは完全にオプションです。 「JS」または「JavaScript」セクションは無視して、HTML と CSS に焦点を当ててください。
これらのエディターには、構文の強調表示やコードのフォーマットなどの便利な機能が含まれています。 JSFiddle には優れたエラーレポート機能があり、たとえば無効な CSS 値を知らせてくれます。また、後で使用するために作業内容を保存したり、独自のプロジェクトで使用したい場合はいつでも HTML または CSS をコピーしてローカル ファイルに貼り付けたりすることができます。
6. 最良の参考資料を使用します。
ご覧のとおり、これらのリソースの多くはソフトウェア開発者ネットワーク (MDN) を指しています。このウェブ プラットフォーム上の情報源は優れており、包括的です。 CSS の問題の詳細を調べる必要がある場合は、まずこれを利用してください。
警告
サイトに遭遇するかもしれません W3Schools CSS トピックやその他の Web 関連のトピックを検索する場合。このサイトの名前は、Web 技術の標準を定める団体である W3C に所属していることを示唆しています。しかし、そうではありません。第三者からの文書のコレクションです。品質は向上しましたが、まだ完璧には程遠く、MDN の方がはるかに信頼できる情報源です。
MDN には、チュートリアルからインタラクティブなクイズまで、豊富な CSS 資料があります。このサイトでは、セレクター、ボックス モデル、色、デバッグなど、CSS のあらゆる側面をカバーしています。各 CSS プロパティには対応するリファレンス ページがあり、そのプロパティについて知っておく必要のあるほぼすべての情報が記載されています。
各プロパティのリファレンス ページには、さまざまな値の説明、それらの使用方法の例、およびブラウザーの互換性表が含まれています。後者は、十分にサポートされている機能と、特定のブラウザでのみ動作する可能性のある実験的な機能を区別するために必要です。
良い代替手段を探しているなら、W3C の CSS リソースが信頼できます。ただし、初心者にとって使いやすくはないことに注意してください。MDN の優れた情報をすべて読み尽くした後にのみ参照してください。
7. 最新情報を入手する
CSS は成熟し安定した技術ですが、まだ変化し続けています。さまざまな組織のメンバーが、変更、修正、新機能の提案を続けています。
デザイナーとしての課題は、何かを行う方法を知ることだけにとどまらず、実際に何を達成できるかということに重点が置かれることがよくあります。テキストの色は変更できますが、アウトラインは変更できますか?または、色の代わりにグラデーションを使用できますか?
最新の動向を把握し、これらの質問に答えるには、ポッドキャスト、ブログ、専用のソーシャル メディア アカウントなど、CSS ニュースの優れたソースを探す必要があります。
準備 CSSトリック 高度な CSS ニュースの最高のソースの 1 つです。これには、CSS のあらゆる側面を網羅した記事と、特に Flexbox やグリッドなどの機能に関する優れた参考資料が含まれています。
CSS ポッドキャストは 5 年間放送されている季節限定番組です。プレゼンターは非常にインタラクティブなので、テーマを退屈にしたり複雑にしたりすることなく、CSS の詳細を掘り下げることができます。
公開 リア・フェロ博士この分野の専門家である彼女は、CSS と Web プラットフォームについて X に定期的に投稿しています。それは動作します ジーン・シモンズ Apple は Safari にこれを導入しており、CSS の問題について Bluesky に投稿しています。アカウント CSSワーキンググループ とてもフォーマルです。このアカウントは、w3.org の仕様更新やその他の関連記事を宣伝するために時折投稿するだけですが、フォローすることは最新の開発状況を把握する優れた方法です。
8. CSSを検証する
数十個のスタイルシートを作成したので、それらにエラーがないことを確認するのが賢明です。 CSS エラーは簡単に隠れてしまい、デバッグが困難になる可能性があるため、できる限りのサポートを受けるようにしてください。
常にされています W3C 検証者 これは CSS エラー チェックのゴールド スタンダードです。検証用にパターンの URL、ファイル、またはテキスト コピーを提供できます。
スタイルシートにエラーがない場合は、Web ページでスタイルシートの正確性を確認するために使用できる、フレンドリーな祝福のメッセージとバッジが表示されます。これらのメッセージを表示する必要はなくなりましたが、ポートフォリオや個人の Web サイトで自分のスキルを披露したい場合は表示することができます。
一方、フォーマットに問題がある場合、検証ツールは問題を説明する詳細なエラー メッセージが表示されます。ほとんどのエラーと同様に、慣れていない場合は理解するのが難しい場合があります。そのため、修正を試みる前に、影響を受けるコードを確認して問題を特定してください。
9. ブラウザの互換性を確認する
ブラウザ間の互換性は、スタイルシートの有効性のもう 1 つの重要な側面です。この問題は以前ほど一般的ではありませんが、実験的な機能を含む新しい CSS アップデートは必ずしも広くサポートされているわけではありません。幸いなことに、彼はあなたに教えてくれるでしょう。 使ってもいいですか どのブラウザでも機能する CSS プロパティを正確に使用します。
ここの情報は密度が高いですが、分かりやすく提示されています。 Edge の前身である Internet Explorer やコンピューターとの互換性など、サポートするブラウザーを選択する必要があります。幸いなことに、ほとんどの CSS はオプションであり、サポートされていないブラウザーで表示されたときにページが適切に劣化するように設計できます。
10. CSSタイポグラフィをマスターする
タイポグラフィはあらゆるデザインの基本的な要素ですが、CSS フォントが登場するまでは Web では重視されていませんでした。 CSS は常に柔軟性を備えており、利用可能なフォントに応じて、使用するフォントの優先順序を選択できるフォント ファミリをサポートしています。しかし、実際の Web フォントを使用すると、エクスペリエンスをより細かく制御でき、フォントがインストールされていないユーザーでもフォントを見ることができます。
と見なされる Google Fonts 最高の無料フォントプロバイダーの 2000 つであり、選択肢は幅広く、執筆時点で約 XNUMX 種類のフォント ファミリーが用意されています。
さまざまな太さ、複数の言語のサポート、アイコン フォントに至るまで、さまざまなオプションと構成が利用可能です。好みに合わせてフォントをカスタマイズしたら、埋め込みコードをコピーして HTML ファイルに追加します。必要に応じて、フォント ファイルをダウンロードしてローカルにホストすることもできます。
構造化 CSS は、コード ファイルの見栄えが良くなるだけでなく、パフォーマンス、開発速度、チームのコラボレーションも向上させます。明確な書き方から始めて、わかりやすいラベルを使用し、繰り返しを避けることは、コードが負担にならずに機能するようにするためのステップです。
「CSS を複雑にすることなく目的にかなうものにする」という原則に従えば従うほど、後でデザインを変更したり拡張したりするのが簡単かつ速くなります。これらの簡単な手順から始めると、CSS が楽しく、同時に整理されたものになることがわかります。