【ブロック要素とインライン要素】について簡単な説明とそれぞれを表にしました。
参考にしてくださいね。
ブロック要素一覧表
ブロック要素は前後に改行が入るタグです。これらのタグは前後に改行が入ります。
■ブロック要素
| タグ | 説明 |
|---|---|
| <h1>～<h6> | 見出し |
| <p> | 段落 |
| <ul> | 番号つきのリスト |
| <ol> | 番号なしのリスト |
| <li> | ulタグ、olタグ内のリスト |
| <br> | 改行 |
| <blockquote> | 引用文 |
| <div> | 意味はないけど改行される箱 |
| <table> | テーブル（表） |
★ブロック要素のサンプルコード★
背景色をつけてあげることで改行が入っていることがわかりやすくなってます。
全ての要素が改行されて表示されているのがわかりますね。
インライン要素一覧表
インライン要素は前後に改行が入らないタグです。これらのタグは前後に改行が入りません。
■インライン要素
| タグ | 説明 |
|---|---|
| <a> | リンク（アンカー） |
| <b> | 太字 |
| <big> | 大きめのフォント |
| <button> | ボタン |
| <i> | 斜体（イタリック） |
| <iframe> | インラインフレームの配置用 |
| <img> | 画像 |
| <input> | フォームの入力用部品 |
| <label> | フォーム部品のラベル |
| <s> | 取り消し線 |
| <select> | 選択画面入力用部品（プルダウンメニュー） |
| <small> | 小さめの文字 |
| <span> | 特に意味を持たない要素 |
| <strong> | 強調（太字で表示） |
| <textarea> | テキスト入力フィールド |
| <u> | 下線 |
★インライン要素のサンプルコード★
全ての要素が1行内に表示されているのがわかりますね。
どれがブロック要素でどれがインライン要素なのかおわかりいただけたかと思います。
コメントを残す