• HTML&CSS超基礎講座

HTML07 ブロックレベル要素とインライン要素(8分25秒)

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

HTMLのブロックレベル要素とインライン要素について解説しています。

HTML文書のbodyタグ内で使用する要素の多くは、大きくブロックレベル要素とインライン要素に分かれます。

概要

  • ブロックレベル要素
  • インライン要素
  • divタグとspanタグ
  • ブロックレベル要素とインライン要素の注意点

HTMLソース全体

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの練習です!</title>
</head>
<body>
<h1>ビストロ・ドゥ・リヨン</h1>
<hr>
<div>
<h2>本格フレンチの味を気軽に楽しめる ビストロ・ドゥ・リヨン</h2>
<p>フレンチを<span>もっと楽しく!</span>もっと<span>気軽</span>がコンセプト。</p>
<p>フランス料理の<em>伝統的な定番料理</em>を、<strong>緑が見える</strong>店内でゆっくりとお楽しみください。</p>
<p>お店のご案内は<a href="sample.html">こちら</a>のページです。</p>
<ul>
<li>トップページ</li>
<li>グランドメニュー</li>
<li>ランチメニュー</li>
</ul>
</div>
<ol>
<li>トップページ</li>
<li>グランドメニュー</li>
<li>ランチメニュー</li>
</ol>
</body>
</html>

補足・ポイント

ブロックレベル要素

ブロックレベル要素は、「一つのまとまり」と考えてください。

通常、ウィンドウ幅いっぱいの長方形の箱を作るとイメージしていただければよいでしょう。

ブロックレベル要素が続く場合は、改行されて表示されます。

代表的なブロックレベル要素

要素名 内容
h1~h6 見出し
table 表組み
ul li 箇条書きリスト
ol li 番号付き箇条書きリスト
hr 水平線
p 段落
blockquote 引用文
div 任意にブロックレベルの
範囲を設定するためのタグ。

・・・などが挙げられます。

インライン要素

インライン要素は、ブロックレベル要素の中で使います。

動画解説では、インライン要素である、強調のためのemタグ、strongタグ、リンクを設定するためのaタグを記述しています。

これらのインライン要素はブロックレベル要素内の特定の部分(テキストや画像)に機能を持たせる役割の要素なのでその前後は改行されず横に並んでいきます

<p>フレンチを<span>もっと楽しく!</span>もっと<span>気軽</span>がコンセプト。</p>
<p>フランス料理の<em>伝統的な定番料理</em>を、<strong>緑が見える</strong>店内でゆっくりとお楽しみください。</p>
<p>お店のご案内は<a href="sample.html">こちら</a>のページです。</p>

代表的なインライン要素

要素名 内容
a リンク
em 強調
strong より強調
span インライン用要素を作るための要素。
指定した範囲をインライン要素に設定する。

・・・などが挙げられます。

divタグ

HTML要素をまとめてグループ化、範囲を設定するためのタグにdivがあります。

divタグで囲っただけでは、ブラウザ上では何の変化もありません。

透明な箱に入ってるような状態です。

このdivタグ自体は特に意味を持っていませんが、スタイルシートを適用して背景色や背景画像、配置やレイアウトを組むのに必要なタグになりますので覚えておきましょう。

spanタグ

divタグと同様な使い方をするタグにspanタグがあります。

例えば、文章の一部の文字サイズを変更したり、文字色を設定したいときなどに利用します。

これもspanタグで囲っただけでは、ブラウザ上では何の変化もありません。

スタイルシートを適用して見た目を変更していきます。

spanタグ自体は特に意味を持っていません。

<p>フレンチを<span>もっと楽しく!</span>もっと<span>気軽</span>がコンセプト。</p>

divタグはブロック要素であり、spanタグはインライン要素です。

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

ブロックレベル要素の中にインライン要素を入れることはできますが、インライン要素にブロックレベル要素を入れることはできません。

例えば、動画解説のようにdivタグの中にh2やpタグを入れたり、リスト(ul li)を入れるなど、ブロックレベル要素にブロックレベル要素を含むのはOKです

※h1~h6、p、addressタグの中には別のブロックレベル要素を含むことはできません。

<div>
<h2>本格フレンチの味を気軽に楽しめる ビストロ・ドゥ・リヨン</h2>
<p>フレンチを<span>もっと楽しく!</span>もっと<span>気軽</span>がコンセプト。</p>
<p>フランス料理の<em>伝統的な定番料理</em>を、<strong>緑が見える</strong>店内でゆっくりとお楽しみください。</p>
<p>お店のご案内は<a href="sample.html">こちら</a>のページです。</p>
<ul>
<li>トップページ</li>
<li>グランドメニュー</li>
<li>ランチメニュー</li>
</ul>
</div>

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

TwitterでWebcreatorsTipsをフォローしよう!

この記事をシェアする



まずは無料のWebデザインメルマガ講座から体験してみよう!

登録作業はわずか10秒!
パソコン・スマートフォン・タブレットでWebデザインのスキルがアップするメルマガを無料で受信できます!

【メールマガジン登録フォーム】
お名前(姓)*
お名前(名)*
メールアドレス*
  • Webデザイン講座
  • レスポンシブWebデザイン作り方講座
  • Webデザインまとめサイト

PAGE TOP