Skip to content

DNET_CSS3

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

CSS3

概要

  • CSS 2.1を中核とし、新たな機能の追加や改良をモジュールで実現

  • 新規の仕様を加えた規格で互換性がある（従来の記述と混在が可能）。

  • JavaScriptに頼ってきた部分をCSSだけで実装することが可能

  • 勧告されているモジュール
    https://www.w3.org/TR/#tr_CSS

基本

セレクタ

Standards and Drafts（セレクタ）

Selectors API

メディアクエリ

メディアタイプとメディアグループに加え、式を指定できるようになった。

  • メディアタイプとメディアグループ（CSS2でサポート）
    （CSSの「メディアタイプ」の該当節を参照）
  • 式：横幅・高さ・色など（一つ以上）の値から構成される。

Standards and Drafts（メディアクエリ）

Media Queries

参考（メディアクエリ）

レイアウト

ボックスサイズ

  • 複雑なボックスサイズ(width, height) の算出方法
    （CSSのレイアウトの「ボックスモデル」の該当節を参照）を変更できる。
  • width や height と同時に border や padding を指定しているとき、
    意図しない表示になったりレイアウトが崩れたりすることを防ぐ。

Standards and Drafts（ボックスサイズ）

CSS Basic User Interface Module

Properties（ボックスサイズ）

box-sizing

マルチカラム機能

  • テキスト・画像を2段組や3段組にできる。

Standards and Drafts（マルチカラム機能）

CSS Multi-column Layout Module

Properties（マルチカラム機能）

  • column-count
  • column-gap
  • , etc.

グリッド

tableタグ（CSSのレイアウトの該当節を参照）に変わる新しい2軸のグリッド。

Standards and Drafts（グリッド）

CSS Grid Layout Module

以下で構成される。

  • グリッドコンテナ
  • グリッドアイテム
  • グリッドライン
  • グリッドトラック
  • グリッドセル
  • グリッドエリア

Properties（グリッド）

  • グリッドコンテナに以下を指定する。

    • 子要素が自動的にグリッドアイテムになる。

      display: grid; /* or inline-grid; */

    • グリッドコンテナの列グリッドトラックのサイズを指定

      grid-template-columns:

    • グリッドコンテナの行グリッドトラックのサイズを指定

      grid-template-rows:

    • , etc.

  • グリッドアイテムに以下を指定する。

    • グリッドアイテムのグリッド・エリア（列グリッド & 行グリッド）を指定

      grid-area:

    • グリッドアイテムの列グリッドを指定

      grid-column:

    • グリッドアイテムの行グリッドを指定

      grid-row:

    • , etc.

参考（グリッド）

Flexbox

floatプロパティ、display: inline（CSSのレイアウトの「横並べ」の該当節を参照）に変わる新しい1軸のグリッド。

Standards and Drafts（Flexbox）

CSS Flexible Box Layout Module

以下で構成される。

  • フレックスコンテナ（flex container）
  • フレックスアイテム（flex item）

Properties（Flexbox）

主要なものの紹介。

  • フレックスコンテナに以下を指定する。

    • 子要素が自動的にフレックスアイテムになる。
      孫要素はフレックスアイテムにはならない。

      display: flex; /* or inline-flex; */

    • フレックスアイテムのスタック方向を指定

      flex-direction: row | row-reverse | column | column-reverse;

    • フレックスアイテムの折り返しの指定

      flex-wrap: nowrap | wrap | wrap-reverse;

    • フレックスアイテムのスタック方向の位置の整列方法の指定

      justify-content: flex-start | flex-end | center | space-between | space-around;

    • スタック方向でない位置の整列方法の指定

      • 単一行 or 列内のフレックスアイテムの位置の整列方法の指定

        align-items: flex-start | flex-end | center | baseline | stretch;

      • 複数行 or 列になった場合の全体の位置の整列方法の指定

        align-content: flex-start | flex-end | center | space-between | space-around | stretch;

    • , etc.

  • フレックスアイテムに以下を指定する。

    • 個々のフレックスアイテムの整列方法を指定

      align-self: auto | flex-start | flex-end | center | baseline | stretch;

    • 個々のフレックスアイテムのスタック順序を指定

      order: <integer>;

    • 個々のフレックスアイテムのスタック方向の長さ（サイズ）を指定

      flex-basis: <length> | auto;

    • 個々のフレックスアイテムのスタック方向の長さ（伸比）を指定

      flex-grow: <number>;

    • 個々のフレックスアイテムのスタック方向の長さ（縮比）を指定

      flex-shrink: <number>;

参考（Flexbox）

スタイル

背景と境界（形状）

Standards and Drafts（背景と境界）

CSS Backgrounds and Borders Module

Properties（背景と境界）

  • 背景

    • background-*

  • 境界（形状）

    • border-*

    • 丸みを付ける〜真円にする。

      • border-radius
      • border-*-radius

    • 画像ボーダーを指定する

      • border-image
      • border-*-image

    • box-shadow: 影を付ける。

画像に関する処理

Standards and Drafts（画像に関する処理）

CSS Image Values and Replaced Content Module

Properties（画像に関する処理）

  • グラデーション

    • 線形グラデーション: linear-gradient()
    • 円形グラデーション: radial-gradient()

  • , etc.

変化

Standards and Drafts（変化）

  • CSS Transforms Module
  • CSS Transitions
  • CSS Animations

Properties（変化）

  • 変形

    • 2D変形
      transform, transform:xxxx(), transform-xxxxを使用する。
    • 3D変形
      perspective, perspective-xxxxを使用する。

  • 時間変化
    transition、transition-xxxxを使用する。

  • アニメーション

    • animation、animation-xxxxを使用する。
    • その他
      • jQueryのanimateなど、ライブラリでも可能。
      • Velocity.jsなどのアニメーション専用プラグインもある。

その他

  • アコーディオンメニュー
  • モーダルウィンドウ

参考

↓ CSS3で、色々なことができるのを確認できる。

  • もはやネタ！CSSだけで作っちゃった無茶な作品

    • CSSではちゅねミク3D
    • CSSだけでRPGっぽい仕組み（3Dバージョン）
    • CSS PANIC
    • Pure CSS お絵かきロジック

  • , etc.

移行メモ

  • 「Javascript」→「JavaScript」に表記を統一した。
  • グリッドの Properties は、元 Wiki で 「子要素が自動的にフレックスアイテムになる」（Flexbox の説明の流用） となっていたため「グリッドアイテム」に修正した。 また、グリッドアイテム側のプロパティ名 grid-columns: / grid-rows: は CSS Grid の仕様上 grid-column: / grid-row: が正しいため修正した。
  • 本文の無い見出し（メディアクエリの「Properties」、 その他の「アコーディオンメニュー」「モーダルウィンドウ」）は、 前者は除去し、後者は箇条書きにまとめた。
  • 同名の見出し（「Standards and Drafts」「Properties」「参考」）が 多数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。

Tags: 移行, CSS3, メディアクエリ, Flexbox, Grid Layout, box-sizing, マルチカラム, アニメーション

このWikiは「Open棟梁Project」,「OSSコンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally