【html入門レッスン3/基礎から学ぶ】ブロックレベル要素とインライン要素

htmlで定義されている要素で<body>~</body>の内容が画面に表示されることは分かったと思います。

この<body>~</body>のなかで使用されるタグの要素を分類すると2つの要素に分類できます。

今回はこの2つの要素を覚えていきましょう。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

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

ブロックレベル要素

ブロックレベル要素は一つのブロックのかたまりを指します。

ブラウザで見ると前後に改行が入るものがこのブロックレベル要素になります。

たとえば見出し、段落、表などがこれに当たります。

<address>、<article>、<aside>、<blockquote>、<details>、<dialog>、<dd>、<div>、<dl>、<dt>、<fieldset>、<figcaption>、<figure>、<footer>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<header>、<hgroup>、<hr>、<li>、<main>、<nav>、<ol>、<p>、<pre>、<section>、<table>、<ul>

インライン要素

インライン要素とはブロック要素の逆で文章などの一部として扱われ、ブラウザで見ると前後に改行が入らないものがこのインライン要素になります。

<a>、<abbr>、<acronym>、<audio>、<b>、<bdi>、<bdo>、<big>、<br>、<button>、<canvas>、<cite>、<code>、<data>、<datalist>、<del>、<dfn>、<em>、<embed>、<i>、<iframe>、<img>、<input>、<ins>、<kbd>、<label>、<map>、<mark>、<meter>、<noscript>、<object>、<output>、<picture>、<progress>、<q>、<ruby>、<s>、<samp>、<script>、<select>、<slot>、<small>、<span>、<strong>、<sub>、<sup>、<svg>、<template>、<textarea>、<time>、<u>、<tt>、<var>、<video>、<wbr>

ブロックレベル要素とインライン要素の違いを知る

ブロックレベル要素にできてインライン要素にはできないがあるため2つの要素の特徴を理解していないと思ったとおりのコーディングができないことがあります。

インライン要素に幅と高さを指定できない

ブロックレベル要素には幅と高さを指定することができますがインライン要素には幅と高さを指定しても反映されません。

要素の並び

ブロックレベル要素は他の要素と縦に並ぶの対してインライン要素は横に並ぶようになっています。

上下の余白のつき方が違う

インライン要素には、上下にmarginをつけてもかからないです。

を付けられません。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

html
スポンサーリンク
blogをフォローする
フロントエンジニア/コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました