Skip to content

CSS

Reference

CSS Reference | Codrops

ブラウザ対応表

Architect

BEM
Block Element Modifier
ECSS
Architect CSS and scale CSS with the ECSS CSS methodology
FLOCSS
FLOCSS(フロックス)は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

Sass

Stylus

Stylus — expressive, robust, feature-rich CSS preprocessor

PostCSS

See also...

CSS Framework

Bootstrap
TwitterBootstrap
Skeleton
A dead simple, responsive boilerplate.
Pure
A set of small, responsive CSS modules that you can use in every web project.
Foundation
The most advanced responsive front-end frameworks in the world.
Semantic UI
Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML.
Bourbon
A simple and lightweight mixin library for Sass.
  • Neat: A lightweight semantic grid framework for Sass and Bourbon.
  • Bitters: Scaffold styles, variables and structure for Bourbon projects.
  • Refills: Components and patterns built with Bourbon and Neat.
Primer
The CSS toolkit and guidelines that power GitHub.
Outline
The clean & simple responsive CSS framework.
HTML KickStart
Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production
Buttons
A highly customizable CSS button library.
Picnic CSS
A beautiful CSS library to kickstart your projects
Spectre.css
a lightweight, responsive and modern CSS framework
CoreUI
Free Bootstrap Admin Template
Milligram
A minimalist CSS framework.
FICTOAN
Intuitive, minimalist responsive HTML+CSS boilerplate
MUSUBii
HTML/CSS Framework for JP
Bulma
a modern CSS framework based on Flexbox

Articles

CSS Library

  • CSSGram
    A tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes.

Reset CSS

CSS Code

CSS整形

Compass

学習

CSS Animation

Font

font-family

font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

font-size

ChromeでWebフォントが適用されない現象に対する対策

確認したChromeのバージョン: 24.0.1312.57 m

以下にアクセスしてコードを直接CSSに書いて対処。

http://fonts.googleapis.com/css?family=Open+Sans:700italic

/* NG */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://*****.woff) format('woff');
}

/* OK */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://*****.woff) format('woff');
}

CSS Sprite

CSS Sprite Generator | Project Fondue

画像をまとめたZIPをアップロードするとCSSスプライトの画像とCSS構文を生成してくれるサービス

The easiest way to create your CSS sprites - SpritePad

画像をドラッグ&ドロップして配置して、CSSスプライト用のPNGとCSSファイルを書き出せるサイト。

実装

Flexbox

グリッドレイアウト

TIPS

viewport

float

要素の重なり

ellipsis

擬似クラスの:(hoge)-child系と:(hoge)-type系の違い

背景画像

  • [CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック | コリス
    body {
      /* 画像ファイルの指定 */
      background-image: url(images/background-photo.jpg);
    
      /* 画像を常に天地左右の中央に配置 */
      background-position: center center;
    
      /* 画像をタイル状に繰り返し表示しない */
      background-repeat: no-repeat;
    
      /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
      background-attachment: fixed;
    
      /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
      background-size: cover;
    
      /* 背景画像が読み込まれる前に表示される背景のカラー */
      background-color: #464646;
    }
    
    body {
      background: url(background-photo.jpg) center center / cover no-repeat fixed;
    }
    

改行させない

はみ出した文字を省略

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tableタグに cellspacing="0" を入れたくない

中央寄せ

パララックス

Retina

appearance

Articles

バッドノウハウ