Zenn
Open5

CSSについて調べたこと

mskmsk

CSS（Cascading Style Sheets）を体系的に理解するためには、次のステップを実行することが重要です。

CSSの基本を学ぶ

まず、CSSの基本を学ぶ必要があります。セレクタ、プロパティ、値などについて理解し、基本的なCSSコードを書く方法を学びます。

CSSのセレクタを学ぶ

CSSのセレクタは、どの要素にスタイルを適用するかを指定するために使用されます。タイプセレクタ、クラスセレクタ、IDセレクタ、属性セレクタなど、異なる種類のセレクタを理解し、使用する方法を学ぶ必要があります。

CSSのプロパティを学ぶ

CSSのプロパティは、スタイルを指定するために使用されます。フォント、背景、余白、ボーダーなど、異なる種類のプロパティを理解し、使用する方法を学ぶ必要があります。

CSSのレイアウトを学ぶ

CSSを使用して、ページのレイアウトを制御することができます。float、position、display、z-indexなど、異なる種類のプロパティを理解し、使用する方法を学ぶ必要があります。

CSSの応用を学ぶ

最後に、より高度なCSSの機能を学ぶ必要があります。アニメーション、トランジション、メディアクエリ、フレックスボックス、グリッドなど、CSSの応用的な機能を理解し、使用する方法を学ぶことが重要です。
これらのステップを実行することで、CSSを体系的に理解することができます。また、実際にコーディングを行い、実践的な経験を積むことも大切です。

mskmsk

CSSとは何か？
CSSの基本構文とルール
セレクターの種類
スタイルプロパティ
CSSの優先度
カスケーディングスタイルシート(CSS)の特徴
レイアウトを作成するためのプロパティ
ボックスモデル
ディスプレイプロパティ
ポジショニングプロパティ
floatプロパティ
CSSグリッドとフレックスボックス
レスポンシブWebデザインとメディアクエリ
CSSアニメーションとトランジション
CSS前置子

mskmsk

CSSのレイアウト

ボックスモデル

  • content
  • padding
  • border
  • margin

box-sizingプロパティ

paddingとborder合わせてもの
* {
  box-sizing: boarder-box;
}
コンテンツのみ
* {
  box-sizing: content-box;
}

displayプロパティ

  • block
    要素が前後に改行を伴い、幅いっぱいに広がる
  • inline
    要素が行内に設置され、必要な幅だけ占める。
  • inline-block
    インライン要素でありながら、ブロック要素の特性を持つ。
  • none
    表示しない
  • flex
    FlexBoxレイアウト
  • grid
    CSS Gridレイアウトを使用

ブロック要素

  • div
  • p
  • h1
  • ul

インライン要素

  • span
  • a
  • strong
  • em

Flexbox

  • display
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content
mskmsk

例

<!DOCTYPE html>
<html lang="en" style="height: 100%; margin: 0; padding: 0;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style="background-color: blue; margin: 0; padding: 0;">
    <div style="display: flex; flex-direction: column; height: 100vh;">
        <div style="background-color: red; width: 100%; height: 50px;"></div>
        <div style="display: flex; flex-direction: row; height: 100%;">
            <div style="background-color: green; width: 200pt; height: 100%;"></div>
            <div style="background-color: yellow; width: 100%; height: 100%;"></div>
        </div>

    </div>
</body>
</html>
ログインするとコメントできます