『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

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>

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

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!