要素について

まず、ホームページ制作において必要な要素について書きます。要素にはブロックレベル要素、インライン要素、インラインブロック要素の 3種類あります。ここでは要素について簡単に説明します。

ブロックレベル要素

ブロックレベル要素とは横幅（width）と縦幅（height）の値を指定する事ができる要素のことです。尚、横幅、高さの指定が無いときは親要素の横幅と要素内余白（padding）に合わせた横幅になります。特徴として、ブロックレベル要素は基本的に、大きさを問わず１個で一行として構成されます。もしブロックレベル要素を横に並べて表示したいときは、浮動表示（float）や配置の絶対位置（absolute）を使って表示する必要があります。あと、ブロックレベル要素は他のブロックレベル要素やインライン要素、テキストなどを内側に含む事ができます。その場合、入れ子状になっている要素を「親要素」、内側の要素を「子要素」、子要素の内側にある要素を「孫要素」といいます。

ブロックレベル要素一覧

div、h1~h6（見出し）、p（段落）、dl（定義リスト）、ul（リスト）、ol（順序リスト）、table（表）、form（入力フォーム）、pre（整形済みテキスト）、address（連絡先）、blockquote（引用文）、fieldset（フォームのグループ化）、hr（罫線）

インライン要素

インライン要素とはブロックレベル要素と違い横幅（width）、縦幅（height）の値を持つ事ができません。特徴として、インライン要素は一行中に何度も使うことが出来るので、ブロックレベル要素の文章の一部に対しての構造や文字の大きさや文字色などの見栄えを指定する事ができる。ただ文章の冒頭で幅、高さの値をもつことが出来ないと書きましたが、ホームページでよく見かけるcssを使ったメニューボタン（リンクボタン）はインライン要素のaというタグを使います。この場合、描写モード（display）をブロック（block）にして、横・縦幅を指定しています。

インライン要素一覧

a（リンク）、addr（略語～頭字語以外～）、b（太字）、bdo（文字方向）、big（文字を一回り大きく）、cite（出典・参照先）、code（ソースコード）、dfn（定義用語の明示）、em（強調）、i（斜体）、kbd（キーボード入力を示す）、label（フォームに対しての項目名関連付け）、q（引用文）、samp（スクリプトやプログラムによる出力結果をしめす。）、small（一回り小さく）、span（ひとかたまりの範囲）、strong（強調）、sub（下付き文字）、sup（上付き文字）、tt（等幅フォント）、var（変数・引数）

インラインブロック要素

インラインブロック要素とは、文法的にはインライン要素として扱われますが、横幅（width）、縦幅（height）の値を持ちま す。

インラインブロック要素

img（画像）、button（ボタン）、input（フォームの構成部品）、object（画像・動画・音声などを文書に埋め込 む）、select（セレクトボタン）

id・classセレクタ

idセレクタはid属性を持つ特定の要素にスタイルを設定するためのものです。スタイルを設定したい要素に対して、id名を付ける事によって幅・高さ・背景など設定する事ができます（id名例：<div id="wrap">~</div>）。使い方としては、ホームページの大枠の設定などに使います。ただ、 idセレクタは一つのhtmlファイル内において、同じid名を二度使うことは出来ません（一つの設定を何度も使う場合はclassセレクタを使いま す）。

classセレクタも基本的にidセレクタと使い方は同じです。ただ、先ほども書きましたが、classセレクタはhtmlファイル内で何度でも使用することが出来るので、よく使う設定（文字色や文字の大きさ）等あらかじめ設定しておけば便利ですし、複数の設定を組み合わせて使うことも出来ます。

要素別のタグ

要素別のタグについてまとめました。基本的なこと、良く使うものに対してだけですが参考になればと思います。