CSSをマスターする：基礎から中級まで-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSをマスターする：基礎から中級まで

Linda Hamilton

Dec 13, 2024 am 03:03 AM

Mastering CSS: From Basics to Intermediate Level

CSS をマスターする: 基本から中級レベルまで

CSS (Cascading Style Sheets) は、視覚的に魅力的な Web サイトを作成するための基礎となるテクノロジーです。これにより、開発者は HTML 要素のスタイルを設定し、レイアウトを制御し、ユーザーエクスペリエンスを向上させることができます。この記事では、CSS の基本と中級の概念について説明し、自信を持って Web ページのスタイルを設定できるようにします。

1. CSS の概要

CSS とは何ですか?

CSS は HTML 要素のスタイルを設定するために使用され、要素の外観 (色、フォント、間隔など) を定義します。コンテンツ (HTML) とプレゼンテーション (CSS) を分離します。

例:

のスタイル設定要素:

 <h1>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:

ログイン後にコピー

   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>

ログイン後にコピー

外部 CSS: 複数のページ間で一貫性を保つために .css ファイルを介してリンクされています。例：

   <link rel="stylesheet" href="styles.css">

ログイン後にコピー

2.CSS セレクター

セレクターは、スタイルの対象となる HTML 要素に使用されます。
- ユニバーサルセレクター (*): すべての要素のスタイルを設定します。
- タイプセレクター (要素):
  などの特定のタグをターゲットにします。
- クラスセレクター (.classname): 特定のクラスを持つ要素をターゲットにします。例：
```
   <style>
     .highlight { color: yellow; }
   </style>
   <p class="highlight">Highlighted text</p>
```
ログイン後にコピー
ログイン後にコピー
- ID セレクター (#id): 一意の ID を対象とします。例：
```
   <style>
     #unique { color: green; }
   </style>
   <p>
```
ログイン後にコピー

3. CSS Properties and Values

Text and Font Styling
- color: Sets text color.
- font-size: Defines text size.
- font-family: Specifies the font. Example:
```
   <style>
     p { color: navy; font-size: 16px; font-family: Arial; }
   </style>
```
ログイン後にコピー
ログイン後にコピー
背景のスタイル
- 背景色: 背景色を設定します。
- 背景画像: 背景画像を追加します。例：
```
   <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>
```
ログイン後にコピー
ログイン後にコピー

4. CSS ボックスモデル

ボックスモデルは、要素がどのように構造化されているかを説明します。

コンテンツ: 要素内の実際のコンテンツ。
パディング: コンテンツと境界線の間のスペース。
Border: パディングとコンテンツを囲みます。

マージン: 要素と隣接する要素間のスペース。

例:

 <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>

ログイン後にコピー

5. CSS の配置とレイアウト

ポジショニング
- static: デフォルトのフロー。
- 相対: 通常の位置を基準にして配置されます。
- 絶対: 最も近い位置にある祖先を基準にして配置されます。
- 修正: スクロール中にその場に留まります。例：
```
   <style>
     div { position: absolute; top: 50px; left: 100px; }
   </style>
```
ログイン後にコピー
フレックスボックス

Flexbox を使用すると、柔軟で応答性の高いレイアウトの作成が簡単になります。

例:
```
 <style>
   .container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
   }
 </style>
```
ログイン後にコピー

グリッド

CSS グリッドは、強力なレイアウトシステムを提供します。

例:

 <h1>

</li>
<li>
<p><strong>Three Types of CSS</strong>  </p>

<ul>
<li>
<strong>Inline CSS</strong>: Applied directly to an element using the style attribute.
Example:
</li>
</ul>

<pre class="brush:php;toolbar:false">   <p>



<ul>
<li>
<strong>Internal CSS</strong>: Written within a <style> tag in the <head> section of the HTML file.
Example:

ログイン後にコピー

   <style>
     body {
       background-color: #f0f0f0;
     }
   </style>

ログイン後にコピー

6. CSS 疑似クラスと疑似要素

擬似クラス: 状態に基づいて要素のスタイルを設定します。

例: ホバー効果
```
   <link rel="stylesheet" href="styles.css">
```
ログイン後にコピー
ログイン後にコピー
擬似要素: 要素の特定の部分をスタイルします。

例: 要素の前にコンテンツを追加:
```
   <style>
     .highlight { color: yellow; }
   </style>
   <p class="highlight">Highlighted text</p>
```
ログイン後にコピー
ログイン後にコピー

7. メディアクエリを使用したレスポンシブデザイン

メディアクエリは、画面サイズに基づいてスタイルを調整します。

例:

   <style>
     #unique { color: green; }
   </style>
   <p>












  
  
  3. CSS Properties and Values

ログイン後にコピー

Text and Font Styling
- color: Sets text color.
- font-size: Defines text size.
- font-family: Specifies the font. Example:
```
   <style>
     p { color: navy; font-size: 16px; font-family: Arial; }
   </style>
```
ログイン後にコピー
ログイン後にコピー
8. 中級 CSS テクニック
- トランジションとアニメーション
  
  例:
```
   <style>
     body { background-color: lightblue; background-image: url('background.jpg'); }
   </style>
```
  ログイン後にコピー
  ログイン後にコピー
- CSS 変数
  
  例:
```
 <style>
   div {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
 </style>
```
  ログイン後にコピー
  ログイン後にコピー
9. 結論

CSS は、プレーンな HTML を美しく機能的な Web ページに変換します。基本を理解し、中級の概念に進むことで、レスポンシブで視覚的に魅力的なデザインを作成するスキルを習得できます。これらのテクニックをマスターするには、個人のポートフォリオなどのシンプルなプロジェクトのスタイリングを練習してください。