

CSS

Reference¶

CSS Reference | Codrops ¶

CSSの基礎知識から実践的なテクニックまで、しっかりと身につけたい人はチェックした方がいいサイト -CSS Reference | コリス

ブラウザ対応表¶

Architect¶

BEM: Block Element Modifier
ECSS: Architect CSS and scale CSS with the ECSS CSS methodology

ECSSの概要と考え方のまとめ - Qiita

FLOCSS: FLOCSS（フロックス）は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話 | WebNAUT

Sass¶

→ Sass

Stylus¶

Stylus — expressive, robust, feature-rich CSS preprocessor

PostCSS¶

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

Extensions | 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¶

Shitaji.CSS - Qrac GitHub

CSS Code¶

CSS整形¶

Compass¶

CodekitでCompass+Sassコーディングをはじめる :: ［ FLAT ］ Develop | ONO TAKEHIKO from aguije inc.

学習¶

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ファイルを書き出せるサイト。

実装¶

Retinaディスプレイを考慮したCSSスプライトの実装方法 | コリス

Flexbox¶

グリッドレイアウト¶

これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ | HTML5Experts.jp

TIPS¶

viewport¶

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;
}

改行させない¶

white-space－スタイルシートリファレンス
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示します。ボックスの大きさが指定されている場合にも、自動的に改行されません。
```
white-space: nowrap;
```
【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー（…）にする方法いろいろ – NET BIZ DIV. TECH BLOG

はみ出した文字を省略¶

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

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

table に指定しておきたい CSS メモ // understandard

中央寄せ¶

Midway.js
Automatically center responsive elements.
CSS 画像やテキスト要素を縦横中央配置する6つの方法 – How to Center Elements Horizontally and Vertically. | Stronghold
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。
- position: absolute; の指定で要素が上下左右中央配置になる理由 | WWW WATCH
How to Center in CSS
まだ中央寄せで消耗してるの？ - @yoshiko_pg
negative margin / transform / offsets + auto / table-cell / flex 比較

パララックス¶

[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル | コリス
- - Pure CSS parallax scrolling websites | Keith Clark

Retina¶

css - Box-shadow not shown on Safari Mobile on iOS 7 (in landscape) - Stack Overflow
CSS - Retina Display向け.5pxのborderまとめ - Qiita
Yes We Can Do Fraction Of A Pixel — Priit Pirita
CSS transform を使って半分サイズにすることで Retina 1px を実現

appearance¶

Articles¶

バッドノウハウ¶

Safari では button 要素の display: flex; が効かない – おかかウェブ

CSS

Reference¶

CSS Reference | Codrops¶

ブラウザ対応表¶

Architect¶

Sass¶

Stylus¶

PostCSS¶

See also...¶

CSS Framework¶

Articles¶

CSS Library¶

Reset CSS¶

CSS Code¶

CSS整形¶

Compass¶

学習¶

CSS Animation¶

Font¶

font-family¶

font-size¶

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

CSS Sprite¶

CSS Sprite Generator | Project Fondue¶

The easiest way to create your CSS sprites - SpritePad¶

実装¶

Flexbox¶

グリッドレイアウト¶

TIPS¶

viewport¶

float¶

要素の重なり¶

ellipsis¶

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

背景画像¶

改行させない¶

はみ出した文字を省略¶

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

中央寄せ¶

パララックス¶

Retina¶

appearance¶

Articles¶

バッドノウハウ¶

CSS Reference | Codrops ¶

CSS Sprite Generator | Project Fondue ¶

The easiest way to create your CSS sprites - SpritePad ¶