CSS は私の宿敵でした…そうでなくなるまで

私が初めて Web 開発の世界に足を踏み入れたとき、JavaScript を征服するという悪名高い挑戦に向けて覚悟を決めました。 CSS がすぐに私の究極の忍耐力の試練になるとは、私はほとんど知りませんでした。

最初は、CSS が私に対して個人的な復讐をしているように感じました。 divをセンタリングしますか?忘れて。レイアウトを調整していますか？完全なカオス。スタイリングは目を閉じてルービックキューブを解いているようなものでした。

しかし、ここにひねりがあります。CSS 自体が問題ではなかったのです。問題は私でした。私は中心となる概念、つまり CSS をクリックするための構成要素を理解していませんでした。基本を理解し始めると、すべてがうまくいき始め、スタイリングが扱いやすいだけでなく、本当に楽しいものになりました。

この投稿では、私が CSS を恐れる状態から CSS を受け入れるまでに役立った 3 つの CSS の基本概念 について説明します。

1. セレクター: 要素をターゲットにする鍵

セレクターを使用すると、CSS に「HTML のこの特定の部分をスタイルしてください」と指示できます。よく使用するもののいくつかを次に示します:

• ユニバーサル セレクター (*): ページ上のすべての要素をターゲットにします。リセットに最適です。
• クラス セレクター (.classname): 特定のクラスを使用して要素をスタイルします。
• タイプ セレクター (要素):

  など、特定のタイプのすべての要素をターゲットにします。または

  。
• 属性セレクター ([attr=value]): 特定の属性を持つ要素に焦点を当てます。
• 擬似クラス (element:state): :hover や :focus など、状態に基づいて要素をスタイルします。

これらをマスターすれば、CSS ゲームですでに優位に立つことができます。

2. ボックスモデル: あらゆる要素の目に見えないフレームワーク

すべての HTML 要素はボックスです。 ボックス モデル を理解すると、間隔、マージン、境界線がわかりやすくなります:

• コンテンツ: ボックスの最も内側の部分 (テキストまたは画像)。
• パディング: コンテンツとボックスの端の間のスペース。
• Border: ボックスのエッジ自体。
• マージン: 他の要素から区切るためのボックスの外側のスペース。

このコンセプトが私にとってピンとくると、配置と間隔は無限に簡単になりました。

3. 配置とレイアウト: 要素を配置する技術

配置によってレイアウトが決まることもあります。これについては今後の投稿で詳しく説明しますが、ティーザーは次のとおりです:

• 1 次元レイアウトには フレックスボックス を使用します。
• 複雑な 2 次元デザインには グリッド を試してください。 これらのツールのおかげで、CSS は敵ではなく、味方であることに気づきました。

最終的な考え

CSS は最初は圧倒されるように感じるかもしれませんが、怖がらないでください。基本に集中して練習を続ければ、すぐに自信を持ってスタイリングできるようになります。完璧であることが重要ではなく、進歩が重要であることを忘れないでください。

次回の投稿にご期待ください。Flexbox と Grid について詳しく説明します。それまで、コーディングを楽しんでください。