CSSは、ウェブページのデザインを柔軟に調整できる言語です。多岐にわたる機能と仕様を全て覚えるのは難しいかもしれません。このチートシートは、CSSの主要な要素を簡潔にまとめ、制作の参考になることを目指しています。基本構造からセレクタ、レイアウト、アニメーションまで、役立つ情報を整理しました。必要な時にさっと確認できる、そんな実用的なガイドを心がけています。
CSSの基本構造
CSSの基本構造は非常にシンプルで、セレクタ、プロパティ、値の3つの要素で構成されています。この構造を理解することで、様々なスタイルを効果的に適用できるようになります。
/* CSSの基本構造 */ セレクタ { プロパティ: 値; } /* 例 */ h1 { color: blue; font-size: 24px; }
セレクタの種類
セレクタは、スタイルを適用するHTML要素を指定するための重要な部分です。様々な種類のセレクタを使いこなすことで、より細かく、効率的にスタイルを適用できるようになります。
div { } /* 要素セレクタ */ #id { } /* IDセレクタ */ .class { } /* クラスセレクタ */ div p { } /* 子孫セレクタ */ div > p { } /* 子セレクタ */ div + p { } /* 隣接セレクタ */ div ~ p { } /* 間接セレクタ */ * { } /* 全称セレクタ */ [attr] { } /* 属性セレクタ */ :hover { } /* 疑似クラス */ ::before { } /* 疑似要素 */
単位の種類
CSSでは様々な単位を使用してサイズや長さを指定できます。適切な単位を選択することで、レスポンシブデザインやより精密なレイアウトの実現が可能になります。
- 絶対単位:
px,cm,mm,in,pt,pc - 相対単位:
%,em,rem,vw,vh,vmin,vmax
フォントとテキスト
テキストのスタイルは、ウェブデザインの重要な要素です。フォントの種類、サイズ、色、行間など、様々なプロパティを組み合わせることで、読みやすく魅力的なテキストデザインを実現できます。
.text { font-family: Arial, sans-serif; font-size: 16px; font-weight: normal | bold; color: #000000; text-align: left | center | right; line-height: 1.5; text-decoration: none | underline; text-transform: none | capitalize | uppercase | lowercase; }
背景
背景のスタイルは、ウェブページの視覚的な印象を大きく左右します。色や画像、繰り返しパターンなどを適切に設定することで、コンテンツを引き立てる効果的な背景を作成できます。
.bg { background-color: #ffffff; background-image: url('image.jpg'); background-repeat: no-repeat | repeat | repeat-x | repeat-y; background-position: center center; background-size: cover | contain | auto; background-attachment: scroll | fixed; }
ボックスモデル
ボックスモデルは、CSSレイアウトの基本概念です。要素のサイズ、パディング、ボーダー、マージンを適切に設定することで、要素間の間隔や全体的なレイアウトを制御できます。
.box { width: 100px; height: 100px; padding: 10px; border: 1px solid black; margin: 10px; box-sizing: content-box | border-box; }
ディスプレイとポジション
要素の表示方法と配置を制御するプロパティは、レイアウトの要となります。これらのプロパティを理解し、適切に使用することで、複雑なレイアウトも実現できます。
.element { display: block | inline | inline-block | flex; position: static | relative | absolute | fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
レイアウト
フレックスボックス
フレックスボックスは、1次元のレイアウトを簡単に作成できる強力なツールです。コンテナとアイテムのプロパティを適切に設定することで、柔軟で応答性の高いレイアウトを実現できます。
.container { display: flex; flex-direction: row | column | row-reverse | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; align-items: stretch | flex-start | flex-end | center | baseline; align-content: flex-start | flex-end | center | space-between | space-around | stretch; } .item { flex: 0 1 auto; /* flex-grow | flex-shrink | flex-basis */ align-self: auto | flex-start | flex-end | center | baseline | stretch; order: 0; }
- コンテナ(親要素)のプロパティ
display: flex;:Flexboxコンテナを作成flex-direction:アイテムの並ぶ方向を指定flex-wrap:アイテムの折り返しを指定justify-content:主軸方向のアイテムの配置を指定align-items:交差軸方向のアイテムの配置を指定align-content:複数行になった時の配置を指定
- アイテム(子要素)のプロパティ
flex-grow:アイテムの伸びる比率を指定flex-shrink:アイテムの縮む比率を指定flex-basis:アイテムの基本サイズを指定flex:上記3つのプロパティを一括指定align-self:個別のアイテムの配置を指定order:アイテムの順序を指定
グリッド
CSSグリッドは、2次元のレイアウトを作成するための強力なツールです。行と列を定義し、アイテムを配置することで、複雑なレイアウトを簡単に実現できます。
.container { display: grid; grid-template-columns: 100px 1fr 2fr; grid-template-rows: 50px auto; gap: 10px; justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-items: start | end | center | stretch | baseline; } .item { grid-column: 1 / 3; grid-row: 1 / 2; justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }
- コンテナ(親要素)のプロパティ
display: grid;:グリッドコンテナを作成grid-template-columns:列の幅を定義grid-template-rows:行の高さを定義gap:グリッドアイテム間の間隔を設定justify-content:水平方向のアイテムの配置align-items:垂直方向のアイテムの配置
- アイテム(子要素)のプロパティ
grid-column:アイテムの列方向の配置grid-row:アイテムの行方向の配置justify-self:アイテムの水平方向の配置align-self:アイテムの垂直方向の配置
トランジションとアニメーション
トランジションとアニメーションを使用することで、ウェブページに動きを加え、ユーザーエクスペリエンスを向上させることができます。適切に使用することで、インタラクティブで魅力的なデザインを実現できます。
.element { transition: property duration timing-function delay; } @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } } .animated { animation: slidein 3s ease-in-out infinite; }
メディアクエリ
メディアクエリを使用することで、デバイスの特性に応じてスタイルを変更し、レスポンシブデザインを実現できます。画面サイズやデバイスの向きなどに応じて、最適なレイアウトを提供することが可能になります。
@media screen and (max-width: 600px) { .responsive { width: 100%; } }
まとめ
このチートシートは、CSSの基本的な概念と頻繁に使用されるプロパティをカバーしています。実際の制作では、これらを組み合わせて使用し、必要に応じて詳細な仕様を参照することをお勧めします。CSSの仕様は常に進化しているため、最新の情報については公式ドキュメントを参照してください。このチートシートを活用することで、CSSの基本的なスキルを素早く思い出し、効率的な開発を行うことができるでしょう。
