Programing beginner by koala

<li>タグにおけるdisplayプロパティ「block」「inline」の過保護説明!

サイトを作る際に「メニューバー」なるものを作ることが多々あるかと思います。

そんな時に使うタグが<li>タグですね!古典的な(?!)やり方として、{display:block;}で、floatを使うやり方がありますね!

そこまでデザインを精密にこだわることがなければ、inline-blockや、Flexboxを利用すればいいのですが、一応は理解しておくのは大事かなと思い、いろいろ調べてみたので、備忘録として書いておきます(^^)

Contents

まずはブロック要素とインライン要素について

ブロック要素とインライン要素、ややこしいところですが、簡単に分かりやすく説明してみます。

ブロック要素とは?

ブロック単位で扱われる要素。一つの塊のこと。ブロック要素のタグで囲むと、前後が改行された形になります。

●代表的なタグ:p、div、h1~h6など

例)
例えば、下記のように書いた場合、

それぞれのタグが「一つのブロック」となり、改行されて、このように表示されます。

難しく考えず、ブロック要素のタグを使うと、改行されて、下に並んでいくんだなって考えるといいかと思います。

インライン要素とは?

(ブロック要素の中で)文章の一部を扱う要素。インライン要素で囲んでも、見た目的には何も変わりませんが、横に並ぶ形になります。

●代表的なタグ:a、span、imgなど

例)例えば、下記のように書いた場合

実際にaタグやspanタグが入っていますが、見た目的には変わりませんね!

こちらも難しく考えず、インライン要素のタグを使っても、特に見た目的には変わらないけど、横に並ぶんだなって覚えておくといいかもです。

displayプロパティに<li>タグに使ってみよう!

上記のことを踏まえた上で、displayプロパティのinline、blockを、<li>タグに使うとどうなるか、見ていきたいと思います(^^)

inlineを使った場合

htmlはシンプルにこんな感じです♪

そして、スタイルシートで、{display: inline;}を指定します。
※分かりやすいように、背景色や文字色をつけたりしていますが。。。

これらを反映させると、下記のようになります。

横並びの要素なので、横並びになりますが、デメリットとしては幅や高さを指定できないのでご注意を!

blockを使った場合

そもそもなところ、<li>タグってブロック要素なので、わざわざ{display: block;}で指定する意味ある?と思いますよね?私も悩みました。。

ただ、<li>タグは、ブロック要素ではありますが、

文字以外がクリック出来ない。。そこで{display: block;}の登場です!!

黄マーカーの部分が、理解に苦しんだところなのですが、<li>にブロック指定をするのではなく、インライン要素である<a>タグに指定するというところです!

display:blockを使用する場合は、ここ、注意してくださいね!!

<a>タグに指定すると、文字以外の部分もクリック出来るようになります(^^)

そして、ブロック要素になった<a>タグを、横並びさせる場合は、floatの登場ですね!

floatは<a>タグではなく、<li>タグへの指定になります。ややこしいですね。。(-_-)

inlineとの違いは、blockは幅や高さを持たせることが出来ることです!

お世話になったブログ

私を悩ませていた疑問を解決してくださったこちらのブログに感謝ですm(_ _)m

http://taneppa.net/display-inline-block/

まとめ!

ものすごくややこしいところですが、「こういうものだ!」と覚えてしまうのが一番いいかもしれませんね(^_^;)

以上です!

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら