CSSでよく使うコードのまとめ、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・ユーティリティなど -Corpus

Webサイトやブログを作成する時にCSSでよく使うコード、ブレイクポイントの定義・Flexboxのグリッド・ボタン・フォーム・画像周り・ライン・ユーティリティ・アニメーションなどがまとめられたCorpusを紹介します。

スニペットに登録したり、ブックマークしておくと便利ですね。

サイトのキャプチャ

Corpus

Corpusでは、作者自らが新しいプロジェクトを始める時によく使用するコードのセットをまとめており、汎用的に利用できるようSCSSでダウンロードできます。

参考として、更に掘り下げた記事もピックアップしました。

サイトのキャプチャ

Grid

Flexboxを使った汎用性に優れたグリッド。
参考: CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

サイトのキャプチャ

Sizing

%, vhを使ったサイズ指定。
参考: ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法

サイトのキャプチャ

Positioning

コンテナの中に自由に配置できるclass指定。

サイトのキャプチャ

Forms

よく使用されるアイテムが揃ったシンプルなフォーム。
参考: フォームの各ブラウザ間の相違を整え、好みのデザインで美しく表示させるスタイルシート

サイトのキャプチャ

Buttons

各種ボタン(デフォルト・大・小・極小・第二・アウトライン)

サイトのキャプチャ

Borders

1px, 2px, 3pxのボーダー。

サイトのキャプチャ

images

背景とインライン画像のサイズ・ポジション・アタッチメントの実用的なclassのまとめ。

サイトのキャプチャ

Breakpoints

通常利用するブレイクポイントの設定。
参考: しっかりと理解しておきたい!レスポンシブWebデザインを使いこなすための9つの基本原則

サイトのキャプチャ

Utilities

表示・非表示、インライン、オーバーフロー、スクロールバーなど、ユーティリティ関連。

サイトのキャプチャ

Animation

キーフレームで動作するアニメーションのコレクション。

top of page

©2017 coliss