目指せwebエンジニア就職!!!

25歳 2020年4月から未経験webエンジニア転職目指して勉強中♪本気の初心者なので少しでも学んだことが身に着くようにここをアウトプットの場にします!

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

 

こんにちは!

 

書籍でSQLを進めながら、

Udemyの

https://www.udemy.com/share/102zAIB0QYcltTQX0=/

 

こちらのコースで少しずつHTMLとCSSについて

少しづつ進めていこう思います!

(コースの前に少しでも基礎をと思ってProgatedeでHTML&CSSコース2周しました)

 

 

コースのHTML基礎の序盤で解説があった

インライン要素とブロックレベル要素についてまとめます。

 

 

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

HTMLで定義される要素のうち<body></body>のなかで使用される

要素の多くはこの二つに分類される。

この分類によってどの要素の内側にどの要素を配置できるか

規則が定められている。

 

 

「ブロックレベル要素」

見出し・段落・表など、文書を構成する基本。

一つのブロック(かたまり)として認識される。

ブラウザでの表示も一つのかたまりとして扱われることが多く、

一般的なブラウザでは前後に改行が入る。

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

 

 

「インライン要素」

主にブロックレベル要素の内容として用いられる要素。

文章の一部として扱われます。

例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする。

一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>

 

 

 

配置ルール

ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができる。

インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできない。

 

 

参考ブログ

https://saruwakakun.com/html-css/basic/display