＜li＞タグにおけるdisplayプロパティ「block」「inline」の過保護説明！
サイトを作る際に「メニューバー」なるものを作ることが多々あるかと思います。
そんな時に使うタグが＜li＞タグですね！古典的な（？！）やり方として、｛display:block;｝で、floatを使うやり方がありますね！
そこまでデザインを精密にこだわることがなければ、inline-blockや、Flexboxを利用すればいいのですが、一応は理解しておくのは大事かなと思い、いろいろ調べてみたので、備忘録として書いておきます(^^)
Contents
まずはブロック要素とインライン要素について
ブロック要素とインライン要素、ややこしいところですが、簡単に分かりやすく説明してみます。
ブロック要素とは？
ブロック単位で扱われる要素。一つの塊のこと。ブロック要素のタグで囲むと、前後が改行された形になります。
●代表的なタグ：p、div、h1～h6など
例）
例えば、下記のように書いた場合、
|
1 2 |
<p>これはPタグです</p> <div>これはdivタグです</div> |
それぞれのタグが「一つのブロック」となり、改行されて、このように表示されます。
難しく考えず、ブロック要素のタグを使うと、改行されて、下に並んでいくんだなって考えるといいかと思います。
インライン要素とは？
（ブロック要素の中で）文章の一部を扱う要素。インライン要素で囲んでも、見た目的には何も変わりませんが、横に並ぶ形になります。
●代表的なタグ：a、span、imgなど
例）例えば、下記のように書いた場合
|
1 2 |
<p>これは<a>aタグ</a>です</p> <div>これは<span>spanタグ</span>です</div> |
実際にaタグやspanタグが入っていますが、見た目的には変わりませんね！
こちらも難しく考えず、インライン要素のタグを使っても、特に見た目的には変わらないけど、横に並ぶんだなって覚えておくといいかもです。
displayプロパティに＜li＞タグに使ってみよう！
上記のことを踏まえた上で、displayプロパティのinline、blockを、＜li＞タグに使うとどうなるか、見ていきたいと思います(^^)
inlineを使った場合
htmlはシンプルにこんな感じです♪
|
1 2 3 4 5 |
<ul> <li><a href="#">Home</a></li> <li><a href="#">about me</a></li> <li><a href="#">contact</a></li> </ul> |
そして、スタイルシートで、｛display: inline;｝を指定します。
※分かりやすいように、背景色や文字色をつけたりしていますが。。。
|
1 2 3 |
li{ display: inline;/*inline要素指定*/ } |
これらを反映させると、下記のようになります。
横並びの要素なので、横並びになりますが、デメリットとしては幅や高さを指定できないのでご注意を！
blockを使った場合
そもそもなところ、＜li＞タグってブロック要素なので、わざわざ{display: block;}で指定する意味ある？と思いますよね？私も悩みました。。
ただ、＜li＞タグは、ブロック要素ではありますが、
文字以外がクリック出来ない。。そこで{display: block;}の登場です！！
|
1 2 3 |
li a{ display: block;/*block要素指定*/ } |
黄マーカーの部分が、理解に苦しんだところなのですが、＜li＞にブロック指定をするのではなく、インライン要素である＜a＞タグに指定するというところです！
display:blockを使用する場合は、ここ、注意してくださいね！！
＜a＞タグに指定すると、文字以外の部分もクリック出来るようになります(^^)
そして、ブロック要素になった＜a＞タグを、横並びさせる場合は、floatの登場ですね！
floatは＜a＞タグではなく、＜li＞タグへの指定になります。ややこしいですね。。(-_-)
|
1 2 3 |
li{ float: left; } |
inlineとの違いは、blockは幅や高さを持たせることが出来ることです！
お世話になったブログ
私を悩ませていた疑問を解決してくださったこちらのブログに感謝ですm(_ _)m
http://taneppa.net/display-inline-block/
まとめ！
ものすごくややこしいところですが、「こういうものだ！」と覚えてしまうのが一番いいかもしれませんね(^_^;)
以上です！
