css

cssコード一覧

CSS（Cascading Style Sheets）は、HTMLドキュメントのスタイルやレイアウトを定義するためのスタイルシート言語です。以下に、基本的なCSSプロパティとその使用例を一覧にまとめました。

CSSの基本構造

selector {
    property: value;
}

セレクタの種類

  • 要素セレクタ: 要素名を指定
  • クラスセレクタ: クラス属性を指定（.classname）
  • IDセレクタ: ID属性を指定（#idname）
  • 属性セレクタ: 特定の属性を持つ要素を指定（[attribute=value]）
  • 疑似クラスセレクタ: 特定の状態にある要素を指定（

    、

    など）

基本的なCSSプロパティ

1. テキストとフォント

  • color: 文字の色を指定
  • font-size: 文字の大きさを指定
  • font-family: フォントの種類を指定
  • font-weight: 文字の太さを指定
  • text-align: テキストの整列を指定（left, right, center, justify）
  • text-decoration: テキストの装飾を指定（underline, overline, line-through, none）
  • line-height: 行間を指定
  • letter-spacing: 文字間のスペースを指定
  • text-transform: テキストの変換を指定（uppercase, lowercase, capitalize）

2. 背景と境界

  • background-color: 背景色を指定
  • background-image: 背景画像を指定
  • background-repeat: 背景画像の繰り返しを指定
  • background-position: 背景画像の位置を指定
  • border: 境界線を指定（太さ、スタイル、色）
  • border-radius: 角を丸くする
  • box-shadow: ボックスに影を追加

3. ボックスモデル

  • width: 幅を指定
  • height: 高さを指定
  • padding: 内側の余白を指定
  • margin: 外側の余白を指定
  • display: 要素の表示方法を指定（block, inline, flex, none）
  • position: 要素の位置を指定（static, relative, absolute, fixed, sticky）
  • top, right, bottom, left: 位置を指定

4. フレックスボックスとグリッド

  • display: flex: フレックスボックスコンテナを指定
  • flex-direction: アイテムの配置方向を指定（row, column）
  • justify-content: メイン軸に沿った配置を指定（flex-start, flex-end, center, space-between, space-around）
  • align-items: 交差軸に沿った配置を指定（flex-start, flex-end, center, baseline, stretch）
  • display: grid: グリッドコンテナを指定
  • grid-template-columns, grid-template-rows: グリッドトラックのサイズを指定
  • gap: グリッドアイテム間の間隔を指定

具体的なCSSコードの例

テキストとフォント

h1 {
    color: blue;
    font-size: 24px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-align: center;
    text-decoration: underline;
}

背景と境界

body {
    background-color: #f0f0f0;
    background-image: url('background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
}

.box {
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
}

ボックスモデル

.container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: white;
}

.header {
    height: 60px;
    margin-bottom: 20px;
    background-color: #333;
    color: white;
}

フレックスボックス

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.flex-item {
    flex: 1;
    padding: 10px;
}

グリッドレイアウト

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.grid-item {
    background-color: #ccc;
    padding: 20px;
    text-align: center;
}

レスポンシブデザイン

@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 10px;
    }

    .flex-container {
        flex-direction: column;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
}

その他のプロパティ

  • opacity: 要素の不透明度を指定（0から1の範囲）
  • z-index: 要素の重なり順序を指定
  • overflow: 要素内のコンテンツがはみ出す場合の表示方法を指定（visible, hidden, scroll, auto）
  • transition: 要素の変化にアニメーション効果を追加
  • transform: 要素の2D/3D変換を指定（rotate, scale, translate）

これらのCSSプロパティを使用して、HTMLドキュメントのスタイルとレイアウトをカスタマイズすることができます。CSSを学ぶ際には、基本的なプロパティの使い方を理解し、実際にコードを書いて試してみることが重要です。

スポンサーリンク

-css