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

ホームページ（ウェブサイト）を構成するHTML文書の中には、ブロック要素とインライン要素という、ホームページを構成する要素の分類があります。これは要素の属性として、スペースをどのように取るかという属性の違いとなります。

このブロック要素とインライン要素にはそれぞれ配置のルールがあり、ウェブページを生成する際には、意図せず文書の論理構造がおかしくなったり、ブラウザの要素の解釈によってレイアウトが崩れる原因になります。

ホームページ制作においては、これらブロック要素とインライン要素の意味合いを捉え、レイアウト崩れなどが起こらないように設計していきます。

ブロック要素、ブロックレベル要素

ブロック要素（ブロックレベル要素）とは、htmlのbody要素に直接配置することが可能な、スペースをとる基本要素で、一般的にはブラウザ表示の際に要素の前後が改行されます。

ブロック要素は、以下のとおり、見出しや段落、リストなどです。通常の文書の際にも一つのカタマリとして解釈される部分が該当しています。

それぞれブロック要素としてだけでなく、文書中の論理構造を示すタグになりますが、汎用的なブロック要素は<div>になります。

• <address>　問い合わせ先の情報
• <blockquote>　引用する文章（ブロック要素）、引用転載であることを示す
• <center>　センタリング　html5で廃止
• <div>　まとまり、ひとかたまりの範囲として定義する（ブロック要素）
• <dl>　定義型リストの定義
• <fieldset>　フォーム部品のグループ、フォーム入力項目をグループ化
• <form>　フォームの定義、入力フォームをつくる
• <h1>～<h6>　見出し（レベル1～6）
• <hr>　水平線（横罫線）
• <noframes>　フレームが表示できない環境用の表示内容の指定　html5で廃止
• <noscript>　スクリプトが動作しない環境用の表示内容の指定
• <ol>　番号順リスト、順序のあるリストを表示
• <p>　段落（パラグラフ）
• <pre>　整形済みのテキスト
• <table>　表組の定義、テーブル（表）を作成
• <ul>　順不同のリストの定義、順序のないリストを表示

インライン要素

ブロック要素が一つのまとまりとして解釈されることに対して、インライン要素は、ブロック要素の「内容・中身」として解釈されます。

インライン要素「まとまりの中の一要素」と捉えることができるでしょう。通常、 ブラウザ表示では要素の前後に改行は入りません。

インライン要素は、以下のとおりです。「ブロック要素の中に組み込ませる」といった印象が強いタグばかりです。汎用的なインライン要素は<span>になります。

• <a>　アンカーの定義。ハイパーリンクの指定
• <abbr>　略語（頭字語以外）
• <acronym>  頭文字言葉、略語（頭字語）　html5で廃止
• <b>　ボールド表示、テキスト太字
• <basefont>　テキストの基準サイズ基準色基準フォントを指定　html5で廃止
• <bdo>　表記方法の上書き、文字表記の方向を指定
• <big>　テキストのサイズをひとまわり大きくする　html5で廃止
• <br>　改行する、強制改行
• <cite>　引用・参照元、出典参照先
• <code>　プログラムのソースコード
• <dfn>　定義する用語を明示
• <em>　強調、強調表示
• <font>　フォントの種類、色、大きさ　html5で廃止
• <i>　イタリック表示、テキストを斜体（イタリック）にする
• <img>　埋込みイメージ、画像を表示
• <input>　入力フィールドの定義、フォームの構成部品を作成
• <kbd>　入力されるテキスト、キーボード入力される文字であることを示す
• <label>　フォーム部品のラベル、フォーム部品と項目名を関連付ける
• <q>　引用する文章（インライン要素）、引用抜粋
• <s>　取り消し線、打ち消し線を引く
• <samp>　プログラムやスクリプトの出力結果
• <select>　回答選択メニュー、セレクトボックスを作成
• <small>　小さく表示、テキストのサイズを小さくする
• <span>　ひとかたまりの範囲として定義する（インライン要素）
• <strike>　打ち消し線を引く　html5で廃止
• <sub>　下付き文字
• <sup>　上付き文字
• <textarea>　複数行の入力フィールド（テキスト入力欄）を作成
• <tt>　等幅フォントで表示　html5で廃止
• <u>　テキストに下線　html5で廃止
• <var>　変数や引数であることを示す

ブロック要素とインライン要素の関係性

ブロック要素の中には、他のブロック要素、インライン要素を組み込むことは可能です。

例えば、<div>の内側に異なるidやclassのついた<div>があるのは一般的です。

かつ、<div>の内側にブロック要素である<p>,そして<p>の内側にインライン要素である<a>が配置されていることは、ウェブ制作ではごく当たり前に行われています。

しかしながら、ルール上インライン要素の内側にブロック要素を組み込むことはできません。そしてブロック要素は前後に改行が入るため、改行なしのインライン要素にブロック要素の改行が入ってしまいレイアウトが崩れることがあります。インライン要素の内側に組み込めるのは他のインライン要素のみになります。

ホームページ（ウェブサイト）制作・作成に役立つHTML5のタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ制作・SEOの1ポイント

ホームページ制作の際にレイアウト崩れなどが起こる場合は、ブロック要素とインライン要素の使い方が上手くいっていないケースがあります。

それぞれの特性を理解してホームページを制作することで、ブラウザ幅によるレイアウト崩れなどを防ぐことができます。なお、大きく分けた場合はブロック要素とインライン要素ですが、インラインブロック等の他の要素も存在します。

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ