CSSの基本をおさらいしよう

基本中の基本のボックス要素


ホームページにおけるページ内の各々のコンテツはボックスと呼ばれ、ボックスにはHTMLファイル内で名前を付ける事になります。この名前の付け方は主に二通りの名前の付け方があり、一つはidとして付ける内容ともう一つはclassとして付ける内容に分かれます。idは1ページに対して一つの名前しか付ける事が出来ないルールがあり、classは同じ名前を複数利用出来るルールがあります。
ボックス要素の余白は、マージンとパディングに分かれており、マージンはボックスの外に対する余白、パディングはボックス内における余白になります。ボックスとボックスを一緒に並べて表示した場合、余白がなければ一つの塊として表示されるため、一般的にはどちらかの記述を指定して見や易いコンテツとする必要性があります。


image

ブロック要素とインライン要素


HTMLファイルにおいてCSSで指定するためのタグにはブロック要素とインライン要素に分かれます。ブロック要素は、よく利用されるタグとして、hタグ、pタグ、divタグが挙げられ、このブロッグ要素は前後に対して自動的に改行が入ります。インライン要素は、よく利用されるタグとしてaタグ、imgタグ、fontタグが挙げられ、この要素は行の一部分として扱われるため改行はされません。
hタグなどを利用したタイトルの横に他の要素を並べて表示させたい場合は、ブロック要素であるhタグに対してインライン要素に変える必要性があり、cssファイル内でdisplay:inline;を記述する事で可能になります。インライン要素に対して、ボックス要素で表現できる内容を適応させるには、インライン要素をcssファイル内でボックス要素に変える事で可能になります。