[CSS] Snippets¶

Grid Layout¶

Qiita

CSS Grid Layout を極める！（場面別編） - Qiita

0. はじめにこの記事では、CSS Grid Layoutの基本は知っているという前提で、いろいろな場面を想定して更なる使い方を書いていきたいと思います。この記事は4部構成の中の場面別編です。 CSS Grid Lay...

align/justify, items/content などの挙動違いはまとめたい

justify/align items/self/content の違い¶

以下の動きを見ながら学ぶ。

MDN Web Docs

align-content

CSS の align-content プロパティは、フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。

flexbox¶

チートシート

Webクリエイターボックス

日本語対応！CSS Flexboxのチートシートを作ったので配布します

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており […]

サンドボックス

www.cssdesk.com

CSSDesk - mTw7Q

CSSDesk is a online HTML/CSS sandbox. Experiment with CSS, see the results live, and share your code with others

用語¶

本記事では領域をエリア、領域に配置する要素をアイテムと呼びます。

アイテムを並べる方向¶

flex-directionを指定します。

アイテムを並べる方向	flex-direction	イメージ
横	row (デフォルト)	■■■
縦	column	■ ■ ■

アイテムの並べ方を指定する¶

アイテムを並べるにはjustify-contentを指定します。

アイテムの並び方	justify-content	イメージ(flex-direction: rowの場合)
中央寄せ	center	`___■■■___`
終点に寄せ	flex-end	`______■■■`
等間隔(両端密着)	space-between	`■___■___■`
等間隔(両端空き)	space-around	`_■__■__■_`
等間隔(両端空き)	space-evenly	`__■__■__■__`

中央寄せにならないときは...

containerのwidthを確認する。
width: 100%;などを必要に応じて追加。

space-evenlyについて

IEは未対応なので要注意。

justify-content

エリアの揃え方を指定する¶

エリアの揃え方はalign-itemsを指定します。
アイテムの並べる方向とは必ず別になります。

アイテムの並び方	align-items	イメージ(flex-direction: rowの場合)
中央揃え	center	`_________` `■■■______` `_________`
終点揃え	flex-end	`_________` `_________` `■■■______`

Elegant scrollbar¶

/* */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, 0.5);
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
}