多くの人は、CSSはプログラミング言語(yǔ)ではないと考えています。私は同意します - 習(xí)得するのは難しいです。 CSSの習(xí)熟度には、設(shè)計(jì)能力、決意、創(chuàng)造性、経験、およびコーディングスキルが必要です（特にSASSなどのプレセッサを使用する場(chǎng)合）。

CSSは、ブラウザにレイアウトとスタイルを提案します。ブラウザはこれらの提案を自由に説明でき、ユーザーやデバイスでさえ屬??性を無(wú)視または上書きすることができます。すべてのデバイスとスクリーン解像度でうまく機(jī)能する高性能コードを作成することは課題であり、試してみるか、それを完了する人はほとんどいません。ただし、報(bào)酬はエキサイティングです。

開始する最も簡(jiǎn)単な方法から、次のプロジェクトの提案は、SitePoint Premiumが提供する本を使用してCSSマスターパスに著手するのに役立ちます。

キーポイント

CSSの習(xí)熟度には、設(shè)計(jì)能力、決定、創(chuàng)造性、経験、コーディングスキルが必要です。すべてのデバイスや畫面解像度でうまく機(jī)能する高性能コードを作成するのは困難ですが、報(bào)酬はエキサイティングです。

CSSスキルの向上に役立つ5つのプロジェクトには、Webサイトの印刷を容易にすること、最新のCSSテーマを既存のWebサイトに適用すること、フォームレイアウトの再設(shè)計(jì)、Webサイトの速度の向上、新しいプロジェクトまたはCSSコンポーネントの開始などが含まれます。
最新のブラウザ開発者ツールを使用すると、パフォーマンスを評(píng)価し、最適化の目標(biāo)を発見(jiàn)するのに役立ちます。クリティカルCSSやプログレッシブCSSの負(fù)荷などの手法により、スタイルシートが効率的にロードされるようになります。
最新のCSSプロジェクトのマスタリングには、CSSリセットの使用、レスポンシブデザインへのモバイルファーストアプローチ、SASS、CSSグリッド、フレックスボックスなどのCSSプレセッサー、CSSの整理と良いコメントの追加など、CSSの基本とベストプラクティスを理解する必要があります。

Webサイトを簡(jiǎn)単に印刷しやすくします

1. 取り組んでいるWebサイトを取得し、ページを印刷（またはプレビューの印刷）しようとします。結(jié)果に満足していますか？

   HTMLページは継続的なメディアであり、メディアの印刷で必ずしもうまく機(jī)能するとは限りません。不適切な章、スケーリング、テキストサイズ、列サイズ、欠落またはトリミングのコンテンツはすべて印刷體験へのアクセスが不十分になる可能性があり、この問(wèn)題を考慮する開発者はほとんどいません。

幸いなことに、CSSの印刷は數(shù)時(shí)間で開発できます。これは通常、スタイルをリセットする問(wèn)題（黒の白いテキスト）、不要な章（メニュー、ヒーローイメージ、フォーム、ソーシャルメディアウィジェットなど）の削除、レイアウトの線形化、紙とインクの使用の削減の問(wèn)題です。

ブラウザベースの開発者ツール（CSS Masterから）およびブラウザDevToolのシークレットを掘り、プリントレンダリングに切り替えた後にスタイルをチェックおよび変更する方法を?qū)W習(xí)します。

CSSを條件付きで適用する（CSS Masterから）は、印刷スタイルシートを含む@Mediaクエリルールを定義する方法について説明します。

CSSカスタムプロパティの戦略ガイド（Webデザインの新しいフロンティアから）を検討して、CSS変數(shù)が印刷プロパティに役立つかどうかを判斷します。また、アクセシビリティ（CSSアニメーション101から）を検討して、アニメーションをオフにするか、最高の狀態(tài)で印刷してください。

最後に、CSS（CSSツールとスキルから）を使用してプリンターに優(yōu)しいページを作成する方法は、インクと紙のコストを節(jié)約するためのヒントを備えた完全な印刷最適化チュートリアルを提供します。

2. 最新のCSSテーマを既存のWebサイトに適用します

シングルカラースキームは退屈です！誰(shuí)もがオペレーティングシステムとアプリケーションにダークモードのオプションを期待しているので、ウェブサイトに追加してみませんか？

最近まで、テーマスイッチは、多くの場(chǎng)合、スタイルの追加セットとJavaScript駆動(dòng)型のスイッチコントロールが必要でした。ただし、最新のブラウザは、CSSカスタムプロパティ（変數(shù)）とprefers-color-scheme@mediaルールを使用して、生活を楽にします。

（Webデザインの新しいフロンティアから）テーマのための戦略は、新しいテーマを設(shè)計(jì)する際にさまざまなアイデアとメモを提供します。

CSSを條件付きで適用する（CSS Masterから）

を含む@media queryルールを定義する方法について説明します。 prefers-color-scheme

最後に、最新のCSS：CSSダークテーマ（最新のCSSから）を追加すると、暗いテーマの有効化に関する完全なチュートリアルが提供されます。

3. フォームレイアウトを再設(shè)計(jì)します

クエリやサインアップフォームなど、ウェブサイトのフォームを確認(rèn)してください。最近コーディングされていない限り、小さな畫面で破損する可能性のあるコンテナDIVおよびフローティングベースのレイアウトを使用して実裝される可能性があります。古いフォームは、不必要なJavaScriptを使用するか、アクセス性が低い場(chǎng)合があります。

登録フォーム（フォームデザインパターンから）は、HTML5を使用してフォームを設(shè)計(jì)、スタイル、エンコードする最良の方法を説明しています。

CSSグリッドを使用すると、メディアクエリを使用せずに不必要なタグを削除し、防弾およびレスポンシブレイアウトを作成できます。次のCSSグリッドチュートリアルは、すぐに開始するのに役立ちます：

プロダクション対応のCSSグリッドレイアウト（Webデザインの新しいフロンティアから）
CSSグリッド（マスターCSSから）でレイアウトを作成し、
「CSSグリッドレイアウト」（「ジャンプスタートレスポンシブウェブデザイン」から）

最後に、CSSグリッド（CSSグリッドレイアウトから）を使用してフォームを素晴らしいものにします。これは、古いブラウザーにグリッドベースのフォームレイアウトとフローティングフォールバックを提供する完全なチュートリアルを提供します。

4. ウェブサイトの速度を改善

2020年の初めに、平均的なWebページには2 MBのダウンロードが必要でした。これには、通常のモバイルデバイスに完全に表示されるのに20秒かかりました。 CSSは65kbを占め、7つのファイルに配布されます。これは重要ではないようですが、StyleSheetプロパティに影響があります。

既存のWebサイトをチェックするために數(shù)時(shí)間を費(fèi)やして、より効率的なCSSで畫像、フォント、JavaScript効果を交換または最適化できるかどうかを判斷します。 CSSコードは成長(zhǎng)する可能性がありますが、全體の重量が低下し、パフォーマンスが大幅に向上します。

テストツール（ジャンプスタートWebパフォーマンスから）とUI応答性のデバッグ（CSS Master）は、最新のブラウザー開発者ツールを使用してパフォーマンスを評(píng)価し、最適化の目標(biāo)を発見(jiàn)する方法を説明します。

ウェブ上の資産のロード（Webデザインの新しいフロンティアから）は、重要なCSSやプログレッシブCSSロードなどのテクノロジーを使用して、スタイルシートが効率的にロードされるようにする方法について説明します。 CSSパフォーマンスを最適化するための20のヒント（最新のCSSから）は、いくつかの実用的なヒントを提供します。

最後に、ジャンプスタートWebパフォーマンスには、Webサイトがすべての人のために速く維持されるように、數(shù)十の高速でより深く、人生を変える開発の提案が含まれています。

5. 新しいプロジェクトまたはCSSコンポーネントを開始します

上記のプロジェクトの推奨事項(xiàng)は、既存のWebサイトを改善するために使用できますが、新しいプロジェクトをゼロから開始する際に制限や制約はありません?？紤]すべきオプション：

1. オンライン履歴書を作成します。余分なポイント：応答性が高いことを確認(rèn)し、よく印刷し、すべてのリソースを電子メールで送信できる?yún)g一のHTMLファイルにエンコードします。 （ヒント：JavaScriptを追加して、電子メールシステムによってブロックされていないことを確認(rèn)しないでください。）
2. インタラクティブなポートフォリオを作成します。すべてのWebサイトのグラフィカルリスト、アイテムをクリックすると追加情報(bào)が表示されます。グリッドレイアウトは理想的ですが、本當(dāng)に挑戦したい場(chǎng)合は、石積みレイアウトを試してください。 （CSSグリッドはまだこれを達(dá)成することはできませんが、CSS列または垂直にソートされたグリッドレイアウトを使用してこれを行う方法を検討してください。）
グラフィックデザインのコーディング。 Dribbbleまたは同様のデザインコミュニティから魅力的なアイデアを選択して、HTML5とCSS3を使用してエンコードすることができます。余分なポイント：フレームワークやjavaScriptなしで作成してください！
CSSのみの畫像を作成します。擬似要素とCSS形狀を使用して有用なアイコンのセットを作成するか、勾配と影のある畫像を作成します。
SVGおよびCSSアニメーションを試してください。魅力的なロゴ、チャート、進(jìn)行狀況バー、アクティビティスピナーなどを作成してみてください。

開発者およびブラウザツール：

dom、dom、css、アニメーション（「ブラウザーdevtool secrets」から）
「gulp.jsを使用してCSSタスクを自動(dòng)化する方法」（「CSS：Tools＆Skills」から）
《ジャンプスタートsass
• 「CSSデバッグと最適化：コード品質(zhì)ツール」（「CSS：Tools＆Skills」から）
• 「CSSデバッグと最適化：開発者ツール」（「CSS：Tools＆Skills」から）
• 《人生を変える食事（ジャンプ開始Webパフォーマンスから）
• 《ビジュアルスタジオコード：Web開発者向けのエンドツーエンドの編集およびデバッグツール
• cssグリッドコンセプト：
• 《 CSSグリッドレイアウトを使用するためにサイトを再設(shè)計(jì)する（「CSSグリッドレイアウト」から）
• 「簡(jiǎn)単でレスポンシブな最新のCSSグリッドレイアウト」（「CSSグリッドレイアウト」から）
• フロートからフレックスボックス、グリッドまでのCSSレイアウトを徐々に強(qiáng)化しました（CSSグリッドレイアウトから）
• 《 CSSグリッドを使用したカードベースのTumblrレイアウトを再設(shè)計(jì)する（「CSSグリッドレイアウト」から）
レスポンシブCSSテクノロジー：
《 14必須レスポンシブCSSテクニック》
• 《レスポンシブデザイン》
• 《ジャンプスタートレスポンシブWebデザイン
• CSSトランジションとアニメーション：

《 CSSアニメーション101

「トランジションとアニメーション」（「CSSマスター」から）
《 CSS変換を使用する現(xiàn)実世界で》（現(xiàn)代のCSSから）
• SVGでCSSを使用してください：

「SVGのアニメーション」（「実用的なsvg」から）

svg（ "css master"から）
• を使用してCSSを使用します
今すぐ読んで、コーディングを開始してください！
最新のCSSプロジェクトのマスターに関するFAQ（FAQ）

現(xiàn)代のCSSプロジェクトをマスターするためのベストプラクティスは何ですか？ 最新のCSSプロジェクトをマスターするには、CSSの基本とベストプラクティスを十分に理解する必要があります。これらには、CSSリセットを使用して、異なるブラウザー間の一貫性を確保し、レスポンシブデザインのモバイルファーストアプローチを使用し、SASS以下のCSSプレ前セッサーを使用してCSSを維持しやすくすることが含まれます。さらに、CSSグリッドとフレックスボックスを理解することで、コードが少ない複雑なレイアウトを作成することができます。最後に、CSSを整理しておくと良いコメントを追加することで、他の人（または將來(lái)のあなた）がコードを理解しやすくなります。

CSSコーディングスキルを向上させる方法は？

継続的な実踐と學(xué)習(xí)を通じて、CSSコーディングスキルを向上させます。まず、CSSの基本を理解し、次により高度なトピックに徐々に移動(dòng)します。オンラインチュートリアル、コーディングの課題、およびオープンソースプロジェクトは、実踐的なエクスペリエンスを提供できます。さらに、業(yè)界の専門家をフォローし、CSSコミュニティに參加することで、最新のトレンドとテクノロジーを知ることができます。

CSSを使用する際に遭遇する一般的な課題は何ですか？これらの課題を克服する方法は？

CSSを使用する場(chǎng)合のいくつかの一般的な課題には、ブラウザの矛盾の処理、ボックスモデルの理解、複雑なレイアウトの管理が含まれます。これは、CSSでリセットまたは正規(guī)化すること、

プロパティの理解、CSSグリッドまたはFlexBoxを使用してレイアウトすることで克服できます。さらに、CSSプリプロセッサを使用すると、大規(guī)模なCSSファイルを管理し、コードを容易にすることができます。

CSSを使用してレスポンシブデザインを作成する方法は？

メディアクエリを使用して、CSSを使用してレスポンシブデザインを作成できます。これにより、さまざまな畫面サイズに異なるスタイルを適用できます。さらに、CSSグリッドとフレックスボックスを使用して、畫面サイズに合う柔軟なレイアウトを作成できます。モバイルファーストアプローチ（最小の畫面サイズから始まり、より大きな畫面にスタイルを徐々に追加する）は、効果的なレスポンシブデザインの作成にも役立ちます。
どのような高度なCSSテクニックを?qū)Wぶべきですか？
學(xué)習(xí)すべきいくつかの高度なCSS手法には、CSSアニメーションとトランジション、CSS変數(shù)、??CSSカスタムプロパティが含まれます。さらに、擬似要素と擬似クラスの使用方法を理解することで、より複雑なスタイルを作成するのに役立ちます。また、SASS以下のようなCSS前処理者を?qū)Wぶことも有益です。
パフォーマンスを向上させるためにCSSを最適化するにはどうすればよいですか？
CSSは、速記のプロパティを使用して、高価なCSS特性の使用を減らすことにより、使用されるCSSの數(shù)を最小限に抑えて、より良いパフォーマンスのために最適化できます。さらに、CSSコンプレッサーを使用すると、CSSのファイルサイズを縮小することで、読み込み時(shí)間が高速化されます。
高度なCSSを?qū)W習(xí)するためのリソースは何ですか？
オンラインチュートリアル、コーディングの課題、ドキュメントなど、高度なCSSを?qū)W習(xí)するためのオンラインリソースがたくさんあります。 CSS-Tricks、MDN Web Docs、Smashing MagazineなどのWebサイトは、さまざまなCSSトピックに関する詳細(xì)な記事とガイドを提供します。さらに、業(yè)界の専門家に焦點(diǎn)を當(dāng)て、CSSコミュニティに參加することで、貴重な洞察と學(xué)習(xí)の機(jī)會(huì)を提供できます。
CSSの問(wèn)題をデバッグする方法は？
ブラウザ開発者ツールを使用して、CSSの問(wèn)題をデバッグすることができます。これにより、要素を確認(rèn)したり、アプリケーションのスタイルを表示したり、さまざまなスタイルをリアルタイムで実験できます。さらに、CSSカスケード、特異性、および継承を理解することで、特定のスタイルが予想どおりに適用されない理由を理解するのに役立ちます。
CSSを整理し、メンテナンスを容易に保つにはどうすればよいですか？
CSSは、一貫した命名規(guī)則に従って、コードを説明するコメントを使用して、CSSを論理パーツまたは個(gè)別のファイルに整理することにより、整理され、整理しやすく保守できます。さらに、CSSプリプロセッサを使用すると、大規(guī)模なCSSファイルを管理し、コードを容易にすることができます。
Web開発におけるCSSの役割は何ですか？
CSSは、ウェブサイトの外観と感觸を制御することにより、Web開発において重要な役割を果たします。 HTML要素にスタイルを適用し、レスポンシブデザインを作成し、アニメーションやトランジションを作成することもできます。 CSSがなければ、Webページは簡(jiǎn)単でスタイリレスであり、Web開発者にとって重要なツールになります。

以上が最新のCSSを習(xí)得するのに役立つ5つのプロジェクトの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。