タグの意味とデザインタグ
| タグ | 意味 | 要素 |
|---|---|---|
| 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ここにtext-align:center指定><span>内容</span></div>
<div><div>内容</div></div>
の場合は外側のdivに指定は不要です。
<div>余白自動調整<divここに幅指定とmargin:0 auto>内容</div>余白自動調整</div>
内部のdiv自身が左右の余白を自動調整することで結果的に中央にコンテンツが配置されます。
ボックス構造
ボックス構造は以下の様になっています
コンテンツとそれを囲む枠線は認識しやすいと思います。
・余白は枠線とコンテンツの間部分：無色透明
・マージンはこのボックスと外側の間部分：無色透明
| 指定 | 指定範囲/指定方法 |
|---|---|
| margin | ・値が1つの場合……「上下左右」 ・値が2つの場合……「上下」「左右」 ・値が3つの場合……「上」「左右」「下」 ・値が4つの場合……「上」「右」「下」「左」 margin:10px; margin:10px 10px; margin:10px 10px 10px; margin:10px 10px 10px 10px; |
| margin-top | 上のマージン（余白）を指定 |
| margin-bottom | 下のマージン（余白）を指定 |
| margin-left | 左のマージン（余白）を指定 |
| margin-right | 右のマージン（余白）を指定 |
| padding | ・値が1つの場合……「上下左右」 ・値が2つの場合……「上下」「左右」 ・値が3つの場合……「上」「左右」「下」 ・値が4つの場合……「上」「右」「下」「左」 padding:10px; padding:10px 10px; padding:10px 10px 10px; padding:10px 10px 10px 10px; |
| padding-top | 上のパディング（余白）を指定 |
| padding-bottom | 下のパディング（余白）を指定 |
| padding-left | 左のパディング（余白）を指定 |
| padding-right | 右のパディング（余白）を指定 |
| border-width | 線の太さ ・値が1つの場合……「上下左右」 ・値が2つの場合……「上下」「左右」 ・値が3つの場合……「上」「左右」「下」 ・値が4つの場合……「上」「右」「下」「左」 border-width:10px; border-width:10px 10px; border-width:10px 10px 10px; border-width:10px 10px 10px 10px; |
| border-top-width | 上線の太さを指定 |
| border-bottom-width | 下線の太さを指定 |
| border-left-width | 左線の太さを指定 |
| border-right-width | 右線の太さを指定 |
| border-style | 線の太さ ・値が1つの場合……「上下左右」 ・値が2つの場合……「上下」「左右」 ・値が3つの場合……「上」「左右」「下」 ・値が4つの場合……「上」「右」「下」「左」 border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; border-style: dotted solid; border-style: hidden double dashed; border-style: none solid dotted dashed; |
| border-top-style | 上枠線にスタイルを指定 |
| border-bottom-style | 下枠線にスタイルを指定 |
| border-left-style | 左枠線にスタイルを指定 |
| border-right-style | 右枠線にスタイルを指定 |
| border-color | 線の色 ・値が1つの場合……「上下左右」 ・値が2つの場合……「上下」「左右」 ・値が3つの場合……「上」「左右」「下」 ・値が4つの場合……「上」「右」「下」「左」 border-color: red; border-color: red #f015ca; border-color: red rgb(200,50,60,.8) green; border-color: red yellow green blue; ■色の指定方法 ・「red、yellow、green、blue」等 文字で指定する ・「#F00」「#FF0000」等 #で指定する場合RGBの順序で#000000～＃FFFFFFまで #FA0と指定した場合2桁は同じ指定となり#FFAA00となる ・「rgb(255,100,10)」等 上記と同じでRGB順序でrgb(0,0,0)～rgb(255,255,255) |
| border-top-color | 上枠線に色を指定 |
| border-bottom-color | 下枠線に色を指定 |
| border-left-color | 左枠線に色を指定 |
| border-right-color | 右枠線に色を指定 |
例えば「margin:10px 10px;」と指定した場合
つまり「margin:[上下10px余白] [左右10px余白]」と指定されます。
