2月になってから、だいぶ日にちが経ちますが…

気候も少しずつ上がってきてるようになってきましたね。

体調にはしっかりと管理をしてくださいね。

一日より早く春が来ないかなーって待ち続けていますが…

寒さの季節が早く過ぎ去ってほしいものです。

話を取り戻して…

「ブロック要素」を「インライン要素」に変換

Webページをコーディングしていく中で「ブロックレベル要素」・「インライン要素」の意味を理解しないままタグを適当に組み立てている人が目立ちます。

「ブロックレベル要素」・「インライン要素」の違いを簡潔に解説していきますね。

～～～～ここまで冒頭の説明～～～～

昨日のブログで「「インライン要素」を「ブロック要素」に変換」についてお話をしておきました。

今回は、真逆の「ブロック要素」を「インライン要素」に変換について解説していきますね。

ブロック要素のタグは、『<h1>見出しタグ</h1>』や『<ul>リスト</ul>』や『<div>強調文字</div>』など、一つのボックスのタグのことです。

しかし、ブロック要素からインライン要素に変換したいときはCSSのコードの中に「display:inline;」を記入するだけでインライン要素に変わります。

Webページの中では、ブロック要素をインライン要素に変換してコーディングをすることはたまにあります。

下の図のようにこういうレイアウトの時にもよく使われることがあります。

HTML4時代では、よく使われることが多く見られましたが、今はHTML5時代なので、レスポンシブ対応としたブロック要素をインライン要素に変換することは全く使いません。

可変サイズを適用しながらレイアウトを組むとこが多いです。

h1{
	background:#000080;
	color:#fff;
	display:inline;
	margin:0 auto;
	padding:0;
}

ブロック要素からインライン要素に変換して使いたいときは、『display:inline;』これだけを書くだけでインライン要素に変換されます。

ご理解いただけましたか？

Webの知識は業界から去るまでずーと勉強を続けないといけませんよ！

もし心のどこか、『GIVE』を感じるようでしたら、そろそろ一から勉強をし直すか、足を洗って業種変更して転職するかにしてくださいね。

同じ、Web技術者としてはホンマに恥ずかしいからやめてねぇ…

ではまた！