HTML 構造
Hello World
共通要素
テキストと見出し
Heading 1
...Heading 6
Paragraph text
Bold Italicリンクと画像
リスト
- Item
- First
フォーム
入力タイプ
セレクトとテキストエリア
セマンティック HTML
| <header> | イントロコンテンツまたはナビゲーションコンテナ |
| <nav> | ナビゲーションリンク |
| <main> | ページのメインコンテンツ（1ページに1つ） |
| <section> | テーマ別コンテンツのグループ |
| <article> | 独立したコンテンツ |
| <aside> | サイドバーまたは補足コンテンツ |
| <footer> | セクションまたはページのフッター |
| <figure> | キャプション付きの画像や図 |
| <figcaption> |
CSS セレクター
基本セレクター
| element | p { } — すべての 要素 |
| .class | .card { } — クラスセレクター |
| #id | #main { } — ID セレクター |
| * | ユニバーサルセレクター（すべての要素） |
結合子
| A B | 子孫（A の内側の B） |
| A > B | 直接の子要素のみ |
| A + B | 隣接兄弟（A の直後の B） |
| A ~ B | 一般兄弟（A より後の B） |
疑似クラス
| :hover | 要素上にマウスがある |
| :focus | 要素がフォーカスを持つ |
| :first-child | 親の最初の子要素 |
| :nth-child(n) | n番目の子（2n = 偶数、odd = 奇数） |
ボックスモデル
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
ショートハンド
| margin: 10px | 全辺 |
| margin: 10px 20px | 上下 | 左右 |
| margin: 10px 20px 15px | 上 | 左右 | 下 |
| margin: 10px 20px 15px 5px | 上 | 右 | 下 | 左 |
フレックスボックス
コンテナ
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
アイテムプロパティ
| flex: 1 | 利用可能なスペースを埋めるように伸長 |
| flex-grow: 2 | 兄弟要素に対する伸長比率 |
| flex-shrink: 0 | 基準サイズ以下に縮小しない |
| flex-basis: 200px | 伸縮前の初期サイズ |
| align-self: flex-end | コンテナの配置をオーバーライド |
| order: -1 | 表示順序（デフォルト 0） |
グリッド
コンテナ
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
アイテム配置
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
ポジション
| static | デフォルトフロー（オフセットプロパティなし） |
| relative | 通常位置からのオフセット |
| absolute | 最も近い位置指定の祖先からのオフセット |
| fixed | ビューポートからのオフセット（スクロールしても固定） |
| sticky | スクロール閾値まで relative、それ以降は fixed |
例
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
メディアクエリ
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
一般的なブレークポイント
| 480px | 小型スマートフォン |
| 768px | タブレット |
| 1024px | 小型デスクトップ / 横向きタブレット |
| 1280px | デスクトップ |