ブロック要素、インライン要素、インラインブロック要素
ブロック要素
| タグ | 用途 |
| h1-6 | 見出し |
| p | 段落・文章 |
| ul | 順序なしリスト |
| ol | 順序ありリスト |
| dl | 定義リスト |
| form | フォーム |
| hr | 区切り線 |
| table | 表 |
| div | 構造 |
インライン要素
| タグ | 用途 |
| a | アンカー |
| span | 文字修飾 |
| em | 強調（弱い） |
| string | 強調（強い） |
インラインブロック要素
| タグ | 用途 |
| img | 画像読み込み |
| input | 単一行テキスト入力 |
| textarea | 複数行入力テキスト |
| select | プルダウンメニュー |
メモ的にHTML非推奨タグを記述
| 非推奨タグ | 代替えCSS | 効果 |
|---|---|---|
| center | text-align:center; | 水平センタリング |
| font | font-size、color | フォントサイズ、色指定 |
| s、strike | text-decoration: line-throught; | 打ち消し線 |
| u | text-decoration: underline; | 下線 |
非推奨属性の代替手段
| 非推奨属性 | 代替えCSS | 効果 |
|---|---|---|
| color属性 | color | フォント色指定 |
| bgcolor属性 | background-color | 背景色指定 |
| align属性 | float | ブロックの要素を整列 |
| clear属性 | clear | align(float)の解除 |
| nowrap属性 | white-space: nowrap; | 要素内での改行禁止 |
連続した情報を表現する
順序なしリスト ul ナビゲーションなど順序ありリスト ol パンくずリストなど
定義リスト dl
TD(title/description)構造を表現する
ページ内容に対して関わりが大きいTD構造はh1-h6を使う小さなブロックの場合、dl、dt。ddを使う
表形式はtableを使う
文章ブロック（段落）p
文章のひとかたまり=段落構造のグルーピング
divを正しく使うには- 連続性のあるリスト構造ではない
- 見出し構造ではない
- 段落構造ではない
- 表構造ではない
HTMLコーディングフロー
- 情報構造の骨組み
- ツリー構造の検討
- 適切なタグの利用について検討
- 構造の調整
- CSSレイアウトを考慮し、隙間なく四角形のブロックで埋めるように構造を調整
- デザインの肉付け
- CSSでのレイアウト
- 装飾
- 画像の配置
- 読み込み
0 件のコメント:
コメントを投稿