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

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


ホームページ(ウェブサイト)を構成する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ポイント

ブロック要素とインライン要素 ホームページ制作 SEO

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

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

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

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

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

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

「Web集客できるホームページ制作・作成(ウェブサイト制作)
『お客さまのお客さま目線』でのWeb制作、Webマーケティング」
ホームページ制作 京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレは、Webマーケティングツールとして、Webマーケティング・SEMを意識したWeb集客・プロモーション力のあるSEO特性・ウェブPR力の高いSEO対策付きのホームページ制作(ウェブサイト制作)・作成、WordPress(ワードプレス)やEC-CUBE(イーシーキューブ)などのCMS(コンテンツマネジメントシステム)の導入やカスタマイズ、ウェブサイトの高速表示化、レスポンシブデザイン、モバイルフレンドリーを得意としています。
ホームページ制作サービスにあたり、WordPress(ワードプレス)を利用したホームページ制作(ウェブサイト制作)をはじめ、HTML5,CSS3,jQueryによるホームページ制作を行っております。Web集客のためのWebマーケティング効果の高いホームページ制作をはじめ、ホームページのリニューアル・更新・修正・管理、ホームページのSEO(SEO対策)、ホームページ運営やWebマーケティングにかかるWebコンサルティングなど、様々なサービスを提供しています。
Web集客・Webマーケティングに効果的なコンテンツマーケティング・コンテンツSEO・ウェブPRを加速させるWordPressなどCMSを活用したオウンドメディア構築、既にお持ちのホームページ(ウェブサイト)のWordPress化やWordPressのカスタマイズもお任せください!
ホームページ制作価格表(Web制作サービス)

WordPressホームページ制作(ウェブサイト制作)

WordPressをベースとしたホームページ制作やWordPressサイトのカスタマイズもおまかせください!既存ホームページをWordPressサイトへと変更する「WordPress化」のカスタマイズも可能です!
新規WordPressホームページ制作や既存ホームページのWordPress化では、コンテンツマーケティングのためのホームページ内オウンドメディア構築に対応しています。
既に運用されているWordPressサイトの軽微な修正や大規模なカスタマイズまであらゆる分野に対応可能です。WordPressサイトのSEOやWordPressのエラー修正・復旧にも対応しています。

HTML5でのホームページ制作(ウェブサイト制作)

HTML5での静的HTMLホームページ制作(ウェブサイト制作)やHTML5でのWordPress(ワードプレス)テーマの制作なら、京都のWeb制作会社(ホームページ制作会社)ファンフェアファンファーレにお任せください! HTML5で構築した企業ホームページ制作や店舗ホームページ制作をはじめ、PRサイトの制作、メディアサイト・情報サイトの制作、モバイルサイト・スマホサイト、ECサイト・ネットショップまであらゆるホームページ制作に対応しております。
静的HTMLでの新規ホームページ制作に関しては全てHTML5でページを作成させていただきます。HTMLでのリスティング広告用LP制作にも対応しております。
HTML4.01、HTML5問わずHTMLソースの修正にも対応しておりますので、既存ホームページの修正やカスタマイズもお任せください!

ホームページ制作実績

新規ホームページ制作・カスタマイズ実績のある業種・エリアや、ホームページ制作事例・サイトカスタマイズ事例などホームページ制作実績のご紹介。企業の公式ホームページをはじめ、各種ホームページ制作(ホームページ作成)に対応しています。
ホームページ制作実績

ホームページの更新・修正

ホームページのページ更新やページ追加、文章や価格の修正、リンクの修正をはじめ、ホームページ内部の様々な箇所の修正など、各種ホームページの更新・ホームページの修正の代行に対応しております。 ホームページの更新や修正にかかる単発のご依頼で対応させていただいておりますので、軽微な修正でもお気軽にご相談ください。スマホ対応化やSSL化、ホームページのエラー修正・エラー復旧にも対応しております。
ホームページの更新・修正料金 価格表

ホームページ制作 京都

ホームページ制作 京都」 京都府京都市内(上京区、中京区、下京区、東山区、右京区、左京区、北区、南区、西京区、山科区、伏見区)および京都市近郊エリアでは、ホームページ制作(Web制作)につき、ご訪問での打ち合わせ・ヒアリング・ご提案をさせていただいております。京都でホームページ制作・ホームページ作成・Web制作ならお任せください。Web制作会社・ホームページ制作会社 ファンフェアファンファーレでは、京都はもちろんホームページ制作・SEO(SEO対策)・WebマーケティングのWebコンサルティングにつき全国対応しております。WordPressやHTML5でのホームページ制作・作成ならお任せください!ホームページの修正・更新作業・エラー修正にも対応可能です。

「ブロック要素とインライン要素」のカテゴリ html tag Reference
タグ: , ,


ホームページ制作・カスタマイズ、Webマーケティング・SEOなどのお問い合わせ・ご依頼