hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

ブロックレベル要素とインラインレベル要素

要素を作るボックスは大きく、

ブロックレベル要素とインラインレベル要素の

2つに分類される。

 

◉ ブロックレベル要素

ブロックレベル要素は、

見出し・段落・表など、文書を構成する基本となる要素で、

一つのブロック(かたまり)として認識される。

ブラウザでの表示も一つのかたまりとして扱われることが多く、

一般的なブラウザでは前後に改行が入る。

 

●特徴

 ⚫︎ 要素の前後に改行が入り、ブロック要素同士が縦に並ぶ。

 ⚫︎ 横幅や高さを指定できる。

 ⚫︎ 余白(marigin, padding)が指定できる。

 

●ブロックレベル要素 例

 ⚫︎ <address> 連絡先・問い合わせ先。
 ⚫︎ <blockquote> 引用文。通常、字下げを伴ってレンダリングされる。
 ⚫︎ <div>  ひとかたまりの範囲として定義。タグ自体に意味はない。  
 ⚫︎ <dl>  説明リスト。一般的に、用語集の作成やメタデータに使用される。
 ⚫︎ <fieldset> ラベル (<label>) などのようにいくつかのコントロールグループ化するために使用。
 ⚫︎ <form> 入力・送信フォームを作る際に使用。
 ⚫︎ <h1> 〜 <h6> 見出し。
 ⚫︎ <hr> 段落レベルのテーマの区切り。
 ⚫︎ <noscript> クライアントサイドスクリプトJavaScript)が無効な環境に対して表示する内容を表す。
 ⚫︎ <ol> 項目の順序付きリスト。
 ⚫︎ <p> 1つの段落。改行された後に、1行空白が入るのも特徴。(div との違い)
 ⚫︎ <table> 表。
 ⚫︎ <ul> (項目の順序無し)リスト。
 

◉インライン要素

インライン要素は、

主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。

例えば、<p>要素の中の<strong>要素のように、

段落のなかの一部を強調するような使われ方をする要素。

一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。

 

●特徴

 ⚫︎ 要素の前後に改行が入らず、インライン要素同士が横に並ぶ。

 ⚫︎ 横幅や高さを指定できない。(※1)

 ⚫︎ 上下余白(marigin, padding)が効かない。(※2)

 

※1 img,input,textareaなど一部のタグは幅高や余白の設定も可能。

※2    厳密には、上下marginが効かない(左右は可)。

     padding は上下左右設定できるが、

     ブロックレベル要素のようには正しく余白が取れない。

 

●インライン要素 例

 ⚫︎ <a>     href などの属性を用いてハイパーリンク先を指定。
 ⚫︎ <abbr> 略語や頭文字。
 ⚫︎ <b> 文書内のキーワードなど、他と区別したいテキスト。
 ⚫︎ <base> 相対パスの基準URIを指定。
 ⚫︎ <bdo> 文字表記の方向。
 ⚫︎ <br> 改行。
 ⚫︎ <cite> 作品のタイトル。
 ⚫︎ <code> プログラムなどのコード。
 ⚫︎ <dfn> 他の箇所でもその用語が使用されていることを示す。
 ⚫︎ <em> 強調。
 ⚫︎ <i> ほかと区別したいテキストをイタリック体で表す。
 ⚫︎ <img> 画像。
 ⚫︎ <input> フォームを構成する様々な入力部品を作成。
 ⚫︎ <kbd> ユーザーが入力する内容。
 ⚫︎ <label> フォーム部品と項目名を関連づける。
 ⚫︎ <q> 引用句、引用文。
 ⚫︎ <s> 既に正確ではなくなった・関係がなくなった内容。
 ⚫︎ <samp> 出力結果のサンプル。
 ⚫︎ <select> セレクトボックスを作成。
 ⚫︎ <small> 免責、警告、著作権などの注釈や細目。
 ⚫︎ <span> 1つの範囲として定義。 
 ⚫︎ <strong> 強い重要性を表す。
 ⚫︎ <sub> 下付き文字。
 ⚫︎ <sup> 上付き文字。
 ⚫︎ <textarea> 複数行のテキスト入力欄を作成。
 ⚫︎ <var> 変数。
 
◉ 配置ルール
ブロックレベル要素の中には、
他のブロックレベル要素やインライン要素を配置することができる。
一方、インライン要素の中には、
文字データや他のインライン要素を配置することができるが、
インライン要素の中にブロックレベル要素を配置することはできない。