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

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

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

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

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

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

話を取り戻して…

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

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

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

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

インライン要素のタグは、『<span>~</span>』や『<a href=”https://www.yahoo.co.jp” title=”Yahoo! Japan”>Yahoo! Japan</a>』や『<strong>強調文字</strong>』など、特定の決まった文字を囲むときに用います。

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

ほとんど、インライン要素をブロック要素に変換して記述したことは全く使いませんが…

例えば、ランディングページに予約フォームやお問い合わせフォームに飛ばしたいときはよく使われます。

<a href=”https://www.yahoo.co.jp” title=”Yahoo! Japan”>Yahoo! Japan</a>

a{
	background:#000080;
	color:#fff;
	display:block;
	height:60px;
	line-height:60px;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:500px;
}

こういう風に書くことが多いです。

ランディングページやメルマガ配信とかはよく使われます。

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

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

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

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

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

ではまた!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Leonard-Blogをもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む