CSSを正しく学ぶ

CSS を正しく学びましょう

CSS (カスケード スタイル シート) は、Web 開発者が Web サイトのスタイルを設定するために使用します。

Web 開発を学び始めたとき、CSS について非常に混乱しました。最も困難だったのは、プロパティを覚えることとコードを保守することの両方でした。この記事では、初心者が学習中に犯した間違いを避けるのに役立ちます。

1.練習
プログラミングは完全に覚えることはできません。実践して理解することがすべてです。
CSSを勉強しながら練習していたのですが、なかなか覚えられないので少し大変でした。 「コピー＆ペースト」は自分のスキルを台無しにしてしまうと思ったので、避けるようにしていました。最後に、CSSコードのコピー＆ペーストを終了しました。ここで私は、コピー＆ペーストすれば状況が改善されると言っているわけではありません。しかし、コピーして貼り付けた CSS コードを実行すると何が起こっているのかを理解しようとすると、 CSS プロパティを暗記するよりもはるかに優れています。

(例) ボタンを丸く黒く白のテキストでスタイル設定し、ホバーしたときに背景とテキストの色を交換したい場合。次のように、まさにそれを行う CSS コードのブロックを貼り付けることができます。

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

それが何をするのかを理解していなければ、あまり役に立ちません。
それを理解している場合:

• 境界線: 2 ピクセルの実線。ボタンに 2 ピクセルの実線の境界線を追加しました。
• border-radius: 16px により 16 ピクセル丸くなりました。
• 背景色: #000000;背景を黒にしました、
• 色: #ffffff;テキストを白くしました、:hover、
• 背景色: #ffffff;
• と色: #000000;ホバーすると背景が白、テキストが黒になります。

次回からはコピー＆ペーストすることなくボタンをコーディングできるようになります。さらに、border、border-radius、background-color、color、:hover についての基本的な理解が深まり、さらに多くの機能でそれを使用できるようになります。単なるボタンではありません。このため、コピー＆ペーストするコードを理解する必要があります。

リソース:
コードをコピーして貼り付ける場所も重要です。初心者としてはコードについての十分な説明が必要となるため。

この仕事をうまく行っているサイトはたくさんありますが、私がお勧めするのは次のサイトです。

1.オタクのためのオタク:

GeeksforGeeks は、コース、オフラインの教室プログラム、チュートリアル、記事、コーディングの課題、練習問題などの膨大なライブラリを備えたコンピューター サイエンスとプログラミングのリソースを世界中の何百万人もの開発者やテクノロジー愛好家に提供する主要なオンライン プラットフォームです。

このプラットフォームは適切な説明付きのコードを提供しており、私の個人的なお気に入りです。

GeeksForGeeks にアクセスしてください

2. W3スクール:

W3Schools は Web 開発者のためのスクールで、Web 開発のあらゆる側面をカバーしています: HTML チュートリアル。 CSS チュートリアル。 JavaScript のチュートリアル。 PHP チュートリアル。

このウェブサイトも「Geeks For Geeks」とほぼ同じです。ただし、説明の技術が違うので、納得できるかどうかは別です。

W3Schools にアクセスしてください

コードの保守性:
Web 開発を学習しているときに 2 番目に面倒だったのは、CSS コードが大きくなりすぎることでした。複雑な Web サイト プロジェクトの CSS コードを保守するのが難しくなってきました。 TailwindCSS のようなフレームワークのおかげで、常に生の CSS を記述する必要はありません。

TailwindCSS:

Tailwind CSS は、オープンソースの CSS フレームワークです。 Bootstrap などの他のフレームワークとは異なり、ボタンやテーブルなどの要素に対して一連の事前定義されたクラスは提供されません。代わりに、混合して一致させることで各要素のスタイルを設定するために使用できる「ユーティリティ」CSS クラスのリストを作成します。

TailwindCSS は、前のボタンの例のような CSS コードを作成します。

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton:hover{
    background-color: #ffffff;
    color: #000000;
}

次のようなクラスに:

.myButton{
   border: 2px solid;
   border-radius: 16px;
   background-color: #000000;
   color: #ffffff;
}
.myButton :hover{
    background-color: #ffffff;
    color: #000000;
}

これは次のように HTML ボタン要素に追加できます。

border-2 rounded-md bg-black text-white hover:bg-white hover:text-black

ReactJS のような他のフレームワークよりも、初心者には TailwindCSS をお勧めします。学習や本番環境での使用がはるかに簡単です。これにより、CSS コードが非常に保守しやすくなります。 ReactJS と一緒に使用することもでき、コードの効率と保守性が向上します。 TailwindCSS には、非常に詳細で理解しやすいコードの説明が記載されたドキュメントもあります。

TailwindCSS にアクセス

結論:
CSS を学ぶのは難しいかもしれませんが、理解しながら頻繁に練習することは非常に役立ちます。

コードをコピー＆ペーストするだけでなく、その機能を理解することも CSS を学ぶ正しい方法です。

以上がCSSを正しく学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。