CSS は難しくありません (これらの基本が欠けているだけです)-CSSチュートリアル-php.cn

CSS は難しくありません (これらの基本が欠けているだけです)

Linda Hamilton

リリース： 2024-12-01 09:45:14

オリジナル

196 人が閲覧しました

最初に Web 開発を始めたとき、最大の課題は JavaScript だと思っていました (JS がまだ少数ではないと言っているわけではありません) が、その後、CSS に関するひどい非難や恐ろしい話がたくさんやって来ました。

これらすべてにもかかわらず、私はフロントエンド開発を深く掘り下げました。CSS は私に大きな影響を与えましたか。何もうまくいきませんでしたし、div をセンタリングすることさえできませんでした。それは悪夢だった。

しかし、ここで私は、CSS が問題ではなく、基本を理解していないことが問題であることに気づきました。一度コツを掴めば、スタイリングはなんだか簡単で驚くほど楽しくなります。

この記事では、CSS をマスターするための準備となる 2 つの基本的な概念について説明します。

CSS セレクター
ボックスモデル
配置とレイアウト

CSS セレクター: CSS セレクターは、スタイルを必要とする特定の HTML 要素をターゲットにできるツールです。

一般的に使用されるセレクターのいくつかを見てみましょう:

A.ユニバーサルセレクター: これは、ページ上のすべての要素をターゲットにするために使用されます。これはアスタリスク記号 (*) で表され、通常はグローバルリセットまたは基本スタイルの適用に使用されます。

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

ログイン後にコピー

B.クラスセレクター: これは、特定のクラス属性値を持つ HTML 要素を選択するために使用されます。特定のクラスの要素を選択するには、ピリオド(.)の後にクラス属性の値を記述します。

<div>





<pre class="brush:php;toolbar:false">.box{
  background-color: teal;
  padding: 30px;
  border-radius: 10px;
  border: 2px solid;
  text-align: center;
}

ログイン後にコピー

C.タイプセレクター: これは、特定のタイプのすべての要素をターゲットにするために使用されます。要素セレクターとも呼ばれます。

p{
text-align: center;
font-size: 1.2rem
}

ログイン後にコピー

使用例: すべての

タグに均一のスタイルを適用します。

D.属性セレクター: このセレクターは、属性と値に基づいて HTML 要素をターゲットにします。

input[type = "text"] {
background-color: cyan;
color: gray;
}

ログイン後にコピー

E.疑似クラス: これらは、状態に基づいてスタイル設定する要素を選択します。

a:hover{
color: blue;
transition: ease-in 0.5s;
}

ログイン後にコピー

他にも便利な CSS セレクターがありますが、今のところはこれらで十分です。

ボックスモデル

ボックスモデルは本質的に HTML 要素を囲むボックスであり、基本的に HTML 内のすべての要素は 1 つの大きな (または小さな) 長方形のボックスにすぎません。ボックスモデルが行うことは、各ボックスが占めるスペースの量と、ボックスが他の要素とどのように相互作用するかを制御するのに役立ちます。

各ボックスには 4 つの主要な部分があります:

1.コンテンツ: これはボックスの中にあるものです - テキスト、画像、その他の要素。
2.パディング: これは、コンテンツとボックスの端の間のスペースです。
3.境界線: これはボックスの端です。
4.マージン: これは、このボックスを他のボックスから区切る境界線の外側のスペースです。

これはボックスモデルを説明する図です

CSS is Not Hard(You

注: 破線はボックスの境界線です。

ボックスモデルは、要素の配置から間隔の管理まで、CSS で行うあらゆる作業に不可欠です。たとえば、さまざまなレイヤーがどのように連携するかを示すために、HTML と CSS だけを使用してボックスモデルのイラストを描きました。

イラストに命を吹き込むのに役立ったコードは次のとおりです:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

ログイン後にコピー

まとめ(そろそろ時間です)
CSS は最初は難しそうに思えるかもしれませんが、基本を理解すれば、世界 (少なくとも自分の世界) を征服する準備は完了です。
この記事の重要なポイントは次のとおりです: CSS は難しいものではありません。基礎に重点を置く必要があるだけです。
学び続け、そして最も重要なのは練習を続ければ、すぐにプロのように Web ページをスタイリングできるようになるでしょう。

次は何ですか?
CSS セレクターとボックスモデルの基本を学習したので、CSS の習得に一歩近づいたことになります。しかし、探究すべきことはまだあります。
次の記事では、CSS の配置と、フレックスボックスやグリッドなどのレイアウトテクニックについて詳しく説明します。

コーディングを楽しんでください!!!!

以上がCSS は難しくありません (これらの基本が欠けているだけです)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。