head 要素(文書情報)
| title 要素 | ページタイトル |
| meta 要素 | 文字コード指定/charset |
| meta 要素 | ページの説明文/description |
| meta 要素 | ビューポート/viewport |
body 要素(文書本文)
- 構造化タグ
- コンテンツのグループ化タグ
- テキストの意味
- コンテンツの埋め込み
- テーブル
- フォーム
HTML:構造化タグ
| article 要素 | アーティクル |
| section 要素 | セクション |
| nav 要素 | ナビ |
| aside 要素 | アサイド |
| h1~h6 要素 | 見出し |
| header 要素 | ヘッダー |
| footer 要素 | フッター |
HTML:コンテンツのグループ化タグ
| p 要素 | 段落(パラグラフ) |
| hr 要素 | 区切り |
| ol/li 要素 | 順序のあるリスト |
| ul/li 要素 | 順序のないリスト |
| dl/dt/dd 要素 | 定義・説明リスト |
| main 要素 | メインコンテンツ |
| div 要素 | ひとつのかたまりの範囲 |
HTML:テキストの意味
| a 要素 | ハイパーリンク |
| em 要素 | 強調 |
| strong 要素 | 強い重要性 |
| small 要素 | 免責・警告・著作権など |
| i 要素 | 他と区別されるテキスト(思考・専門用語 等) |
| b 要素 | 他と区別されるテキスト(キーワード・製品名 等) |
| span 要素 | 特定の範囲をグループ化 |
| br 要素 | 改行 |
フォームタグについて
| form 要素 | フォーム |
| label 要素 | ラベル |
| input 要素 | インプット |
| textarea 要素 | テキストエリア |
| select/option 要素 | セレクト/オプション |
| button 要素 | ボタン |
| fieldset/legend 要素 | フィールドセット/レジェンド |
CSSの基本構造について
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
リセットCSSついて
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っている。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがある。このような現象を防ぐために使用するのがリセットCSS。リセットCSSは、ブラウザが持っているスタイルシートをリセット(クリア)するためのスタイルシートだが、リセットする範囲はコーディングスタイルに依存するため、これが正解というリセットCSSは存在しない。各自のコーディングスタイルに合わせて適時変更する。
CSS:セレクタの記載方法
- 全称セレクタ
- 型セレクタ
- id セレクタ(#)
- class セレクタ(.)
- 子孫結合子セレクタ
- 子結合子セレクタ(>)
- 隣接兄弟結合子セレクタ(+)
- 一般兄弟結合子セレクタ(~)
CSS:幅・高さの単位
| px | ピクセル値 |
| % | 要素の割合(百分率) |
| em | 要素の割合 |
| rem | ルート要素の割合 |
| vw | 画面の表示幅の割合 |
| vh | 画面の高さの割合 |
| calc 関数 | 値の計算 |
CSS:色の指定方法
- カラーネーム
- #rgb(ハッシュ(#)で始まる 16 進数 3 桁)
- #rrggbb(ハッシュ(#)で始まる 16 進数 6 桁)
- #rrggbbaa(ハッシュ(#)で始まる 16 進数 8 桁)
- rgb(r,g,b)(rgb 関数)
- rgba(r,g,b,a)(rgba 関数)
- hsl(h,s,l)(hsl関数)
- hsla(h,s,l,a)(hsla関数)
- 線形グラデーション(linear-gradient 関数)
- 放射グラデーション(radial-gradient 関数)
CSS:バックグランド系プロパティ
| background-color プロパティ | 背景色 |
| background-attachment プロパティ | 背景画像の位置 |
| background-image プロパティ | 背景画像のファイル |
| background-repeat プロパティ | 背景画像の繰り返し |
| background プロパティ | 背景の一括指定 |
| background-size プロパティ | 背景画像のサイズ |
| background-position プロパティ | 背景画像の表示開始位置 |
CSS:テキスト系プロパティ
| color プロパティ | 文字の色 |
| opacityプロパティ | 透明度 |
| text-align プロパティ | 文字の配置 |
| text-decoration-color プロパティ | 文字の色 |
| text-decoration-style プロパティ | 文字飾りの線種 |
| text-decoration-thickness プロパティ | 文字飾りの線の太さ |
| text-decoration プロパティ | 文字の飾りの一括指定 |
| text-shadow プロパティ | 文字の影 |
CSS:フォント系プロパティ
| font-family プロパティ | フォントの種類 |
| font-size プロパティ | フォントのサイズ |
| font-weight プロパティ | フォントの太さ |
| font-style プロパティ | フォントのスタイル |
| line-height プロパティ | 行の高さ |
| font プロパティ | フォント一括指定 |
| white-space プロパティ | 空白・改行の表示方法 |
| word-wrap プロパティ | 単語の途中での改行方法 |
| word-break プロパティ | テキストや単語の改行方法 |
| tab-size プロパティ | タブ文字の表示幅指定 |
CSS:リスト系プロパティ
| list-style-type プロパティ | リストマーカーの種類 |
| list-style-image プロパティ | リストマーカーの画像 |
| list-style-position プロパティ | リストマーカーの位置 |
| list-style プロパティ | リストマーカーの一括指定 |
CSS:レイアウト系プロパティ
| width プロパティ | 内容の幅 |
| max-width プロパティ | 幅の最大値 |
| min-width プロパティ | 幅の最小値 |
| height プロパティ | 内容の高さ |
| max-height プロパティ | 高さの最大値 |
| min-heightプロパティ | 高さの最小値 |
| float プロパティ | 回り込み |
| clear プロパティ | 回り込みを解除 |
| display プロパティ | 要素の表示方法 |
| overflow プロパティ | ボックスからあふれた内容の処理方法 |
CSS:パディング系プロパティ
| padding-top/-bottom/-left/-right プロパティ | パディング上下左右 |
| padding プロパティ | パディング一括指定 |
CSS:マージン系プロパティ
| margin-top/-bottom/-left/-right プロパティ | マージン上下左右 |
| margin プロパティ | マージン一括措定 |
CSS:レイアウト系プロパティ
| position/top/left/bottom/right プロパティ | 要素の配置方法 |
| z-index プロパティ | 重なりの順序方法 |
CSS:ボーダー系プロパティ
| border-style プロパティ | ボーダースタイル |
| border-color プロパティ | ボーダー色 |
| border-width プロパティ | ボーダー幅 |
| border プロパティ | ボーダー一括指定 |
| border-top/-bottom/-left/-right プロパティ | ボーダー上下左右一括指定 |
CSS:その他のプロパティ
| border-radius プロパティ | ボーダーの丸み |
| box-shadow プロパティ | ボックスの影 |
| box-sizing プロパティ | ボックスサイズ計算 |
| content プロパティ | 挿入コンテンツ |
| object-fit プロパティ | 画像トリミング |
| object-position プロパティ | 画像の配置位置指定 |
CSS:擬似要素系セレクタ
| first-letter 擬似要素 | 要素の 1 文字目を指定 |
| first-line 擬似要素 | 要素の 1 行目を指定 |
| before/after 擬似要素 | 要素の直前・直後にコンテンツの挿入 |
| table要素 | テーブルの範囲 |
| caption要素 | 表のキャプション |
| tr要素 | 1行の範囲 |
| th要素 | タグ見出し |
| td要素 | データ項目 |
| form 要素 | フォーム |
| label 要素 | ラベル |
| input 要素 | インプット |
| textarea 要素 | テキストエリア |
| select/option 要素 | セレクト/オプション |
| button 要素 | ボタン |
| fieldset/legend 要素 | フィールドセット/レジェンド |
コメント