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

目次

概要

  • CSS 2.1を中核とし、新たな機能の追加や改良をモジュールで実現
  • 新規の仕様を加えた規格で互換性がある(従来の記述と混在が可能)。
  • Javascriptに頼ってきた部分をCSSだけで実装することが可能

基本

セレクタ

Standards and Drafts

Selectors API

メディアクエリ

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

Standards and Drafts

Media Queries

Properties

参考

レイアウト

ボックスサイズ

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タグに変わる新しい2軸のグリッド。

Standards and Drafts

CSS Grid Layout Module

以下で構成される。

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

Properties

  • グリッドコンテナに以下を指定する。
    • 子要素が自動的にフレックスアイテムになる。
      display: grid; /* or inline-grid; */
    • グリッドコンテナの行グリッドトラックのサイズを指定
      grid-template-columns:
    • グリッドコンテナの列グリッドトラックのサイズを指定
      grid-template-rows:
    • , etc.
  • グリッドアイテムに以下を指定する。
    • グリッドアイテムのグリッド・エリア(列グリッド & 行グリッド)を指定
      grid-area: 
    • グリッドアイテムの列グリッドを指定
      grid-columns:
    • グリッドアイテムの行グリッドを指定
      grid-rows:
  • , etc.

参考

Flexbox

floatプロパティ、display: inlineに変わる新しい1軸のグリッド。

Standards and Drafts

CSS Flexible Box Layout Module

以下で構成される。

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

Properties

主要なものの紹介。

  • フレックスコンテナに以下を指定する。
  • 子要素が自動的にフレックスアイテムになる。
    孫要素はフレックスアイテムにはならない。
    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>;

参考

スタイル

背景と境界(形状)

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.

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-04-14 (金) 13:21:10 (1377d)