タグの意味とデザインタグ

タグ	意味	要素
h1	大見出し	ブロック要素
p	段落	ブロック要素
ulとli	箇条書き	ブロック要素
table	表(一覧)	ブロック要素
div	意味を持たない	ブロック要素
span	意味を持たない	インライン要素

さて、少しだけピックアップしましたが、例えばタイトルなどはh1タグを使います。
段落を区切る場合はpタグ、箇条書きならulタグを使います。

tableタグはデザインで避けられがちでdivで無理やり表にしている人もいますがある程度のデータ量があるならばそれはtableタグで纏めるべきです。

単一の情報を並べるだけなら箇条書きだし、２つ以上の情報の掛け合いによって意味をなすデータであるならば表であるべきです。

htmlは意味のあるタグはその意味の通りに使おう。
というのが前提の元に考えられています。

なので基本的に特定のタグを使う場合は「～タグ」は「こう使うべき」と明確に決まっています。

我々がデザインする上で実はデザインタグというものは存在していません。
現在デザインするのにdivが意味を持たないブロック要素であるからこれを使っています。

また、現在はCSS（Cascading Style Sheets/ カスケーディングスタイルシート ）で文章と装飾は分けるのを基本にしています。
同様にjs(javascript)で動的操作や動的機能を分けるのを基本とする。

こうする事で、本来の『情報』と『デザイン』と『機能』を分離して考える事が出来ます。
ウェブを巡回しているクローラーなどは正しい意味の通りにタグが使われている事で正しく文章の内容、文章の重要度や順序を正しく判定する事ができます。

このように整理されてきた結果html上で直接デザインに影響するcenterタグなどいくつかのタグは徐々に非推奨や廃止の方向に向かっています。

これらは結果的にメンテナンス性を上げ、人間にとっても見やすい表示になると考えられています。

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

ブロック要素というのは、コンテンツの内容が一つの塊という事です。
基本的に幅100％で左右に自動改行される要素です。
(まぁ左右改行というよりどちらかと言えばこの範囲が100％で両端まで潰すために上下に押し出すイメージです。)
ブロックですので、高さや幅を指定する事が出来ます。

逆にインライン要素というのはコンテンツの一部に配置される要素であり、文中の一部を強調表示したりする様に情報の途中に一部変化を加えるものです。
ですのでインライン要素では改行要素は付きませんし高さや幅を指定出来ません。

divとspanの違い

まず根源的な話をすればこの二つの違いは
「div＝display: block」
「span＝display: inline」
のたったこれだけです。

どちらも意味を持たないタグであるため、divにdisplay: inlineした場合はspanと同じ様に扱えます。
ただ、このように設定されているという事は、divはコンテンツの一つのデータのブロック単位である事をさしており、逆にspanはコンテンツの一部の変化に使うべきものです。

divにdisplay: inlineを指定するなら最初からspanを使うべきであり、逆にspanにdisplay: blockを指定するなら最初からdivを使うべきです。

つまりどちらも意味を持たないタグとはなっていますが
・divはコンテンツのブロック単位で使うタグ
・spanはコンテンツの一部で使うタグ
と言う最低限の意味を持っている事になります。

div内のdivを中央揃え

内側のdivに「style="width:100px;margin:0 auto;"」を追加するだけで良いです。
幅は任意に変えて下さい。これは他のブロック要素も同様です。

仕組みとして二つの要素があります

• 「幅を指定」
• 「左右の余白を自動調整」

divは幅100%がデフォルト設定です。
ですので幅を指定して左右に余白を作ります

インライン要素の場合、たとえばテキストなどは外側の親要素に「text-align:center; 」を指定しますがdiv内のdivを中央に寄せる場合は違います。

<div><span>内容</span></div>
である場合は
<div style="text-align:center"><span>内容</span></div>

<div><div>内容</div></div>
の場合は外側のdivに指定は不要です。

<div>余白自動調整<div style="width:100px; margin:0 auto;">内容</div>余白自動調整</div>

内部のdiv自身が左右の余白を自動調整することで結果的に中央にコンテンツが配置されます。

ボックス構造

マージン (margin)

枠線 (border)

余白 (padding)

コンテンツ

余白(padding)

枠線(border)

マージン(margin)

コンテンツとそれを囲む枠線は認識しやすいと思います。
・余白は枠線とコンテンツの間部分：無色透明
・マージンはこのボックスと外側の間部分：無色透明

指定	指定範囲/指定方法
margin padding	・値が1つ：上下左右 ・値が2つ：上下 / 左右 ・値が3つ：上 / 左右 / 下 ・値が4つ：上 / 右 / 下 / 左 margin:10px 20px;
border-style	solid (実線)dashed (破線)dotted (点線)double (二重線)
border-color	■色の指定方法 ・「red」等：文字指定 ・「#FF0000」等：#RGB指定 ・「rgb(255,100,10)」等：数値指定

例えば「margin:10px 10px;」と指定した場合
つまり「margin:[上下10px余白] [左右10px余白]」と指定されます。