[コーディングの基礎] ブラウザ幅とコンテンツ幅&インライン要素とブロック要素

ブラウザ幅とコンテンツ幅

まず、「ブラウザ幅」と「コンテンツ幅」について説明します。
これに関してはもはや言葉のまま。

ブラウザ幅はブラウザで見る横幅の100%の大きさ。
コンテンツ幅は実際にコンテンツが表示されている領域の大きさ。
今回は理解を深める上でこの二つのキーワードがとても重要になってきます。

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

htmlタグにはインライン要素とブロック要素というものがあります。
各セクションのタグの役割を一通り理解したら、次はインライン要素とブロック要素のことを知りましょう。

ブロック要素は「縦に積まれていくもの」

ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック(かたまり)として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入ります。 ブロックレベル要素には、以下のものがあります。 <address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>

引用元:ブロックレベル要素とインライン要素-HTMLの基本

ブロック要素は、横幅100%でブロックが生成されるhtmlタグのことです。

例えば、<div></div>タグを記述し、その下にさらにもう一つ<div></div>タグをコーディングして追加すると、先ほど<div></div>タグによって生成されたブロックの横に回り込むことなく、下にもう一つ横幅100%のブロックが生成されます。

つまり、記述したものから上から順に縦に積まれていくのがブロック要素になります。
ちなみに前回紹介した<header></header>から<footer></footer>は全て、
ブロック要素に該当します。

インライン要素は「横に並んでいくもの」

インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<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>

引用元:ブロックレベル要素とインライン要素-HTMLの基本

記述したものから順番に横に並んでいくのがインライン要素です。

例えば、
<div></div>タグの内側に<a>タグを記述し、さらにその下にもう一つ<a></a>タグをコーディングして追加すると、<a></a>タグの横に、次の<a></a>タグが回り込んで横に並びます。

インライン要素とブロック要素は何が違う??

これを噛み砕いて説明すると以下のようになります。

	ブロック要素	インライン要素
高さ (height)	保持される	保持されない
横幅 (width)	指定しない限り100%	指定してもしなくてもauto
背景画像	サイズ通り描画される	サイズ通り描画されない

以下の図を見てみましょう。

❶ではhtmlのマークアップを行い、その結果❷がモニターに表示されます。
どこに何が適用されてどのようになっているかをわかりやすくするため、❸には現在このテキストに、どのタグがどこに適用されているのか?を表しています。

インライン要素とブロック要素は相互に変更が可能

実は、インライン要素とブロック要素は相互に変更することができます。

代表的なhtmlタグの中に画像を描画するために必要な<img>タグがありますが、
先程記述したように<img>タグはインライン要素、すなわち横に並んでいくものです。

インライン要素のまま使用すれば画像の横に文字が並ぶことになり、
以下のページのような意図しないレイアウトになる可能性があります。

またインライン要素は周りに意図しない余白を生じさせることがあります。
そのため外側の余白である「margin」や内側の余白である「padding」が正常に効きません。

これらの問題を防ぐ方法として、横に並んでいく性質のインライン要素であるhtmlタグを、
縦に積んでいく性質のブロック要素に変更するという手法が取られることがあります。

参考ページ:【html/CSS】imgやaタグなどインライン要素をブロック要素に変える方法

下のコードを見てみてください。

css

/* こうなっているものを・・・*/
a {
  display: inline;/* inline = インライン要素のこと(※記述されているわけではない) */
}

/* こうすればいい!!*/
a {
  display: block;/* block = ブロック要素のこと */
}

この方法では、インライン要素に「display: block;」を指定していますが、
この指定を行うとインライン要素をブロック要素に変更することができます。

逆にブロック要素に対して「display: inline;」を指定すれば、
ブロック要素をインライン要素に変更することができます。

実際にコーディングしないと違いが理解しにくいブロック要素とインライン要素

とまぁここまで説明しましたが、違いを理解するのは難しいですよね。
実際説明する側も積み重ねた経験によって感覚で理解しているものであるため、
正直なところ、いざ誰かに説明するとなると、「経験を増やして感覚で理解して」としか教えてあげられないものではあります。

少しずつコーディングを行っていきますので、その中で慣れてなんとなく「こういうものかな」と感じてもらえたらいいなと思います。