Loading

HTML要素まとめ


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 要素フィールドセット/レジェンド

コメント

タイトルとURLをコピーしました