リストマーカーの不思議

テンプレートにデフォルトで記載されているSNSボタンは大抵ul要素です

必ず、というわけではありません。製作者によっては ol要素 や nav要素 や div要素 としてマークアップしている場合もあります。

ul要素の定義は「順不同 のリスト」
ol要素の定義は「順序に意味を持つ リスト」
nav要素の定義は「他のページやページ内の特定箇所への 遷移や移動 を行うリンクの集合体」
div要素の定義は「特に無し」

nav要素・div要素についてはマーカーは表示されません。ブラウザのデフォルトCSSで マーカーが表示されるのはul要素とol要素です。
下線の内容について現時点ではこの説明にしますが後述します。
SNSシェアアイコンに対してどの定義がしっくりくるかは製作者の考え方にもよりますが、私的にはul要素なのでそのようにマークアップしています。

今回は リストマーカー に関する内容ですから以降はulまたはol要素についての言及とし、その他要素は除外します。

ul要素とol要素のデフォルトCSS

デフォルトCSS というのは、各ブラウザがul, ol要素に対してどんな見た目を指定しているか、そのCSS初期設定のことです。
要素によってはブラウザ間に差異が生じるものもありますが、ul, olについてはどのブラウザも同じ見た目です。

ul要素

• これはul要素の項目1です
• これはul要素の項目2です
• これはul要素の項目3です

ol要素

1. これはol要素の項目1です
2. これはol要素の項目2です
3. これはol要素の項目3です

上記がそれぞれのデフォルトです。ol要素の方は「順序に意味がある」場合に用いますので数字(decimal)が表記されるようになっています。
リスト全体は上下に空間があり、そして少し右に寄っていますね。これは上下marginと左paddingによるもので、これがデフォルト、つまり意図的にCSS変更を加えなければブラウザが勝手にこういった表示を行います。
また、リストマーカーの見た目は変更できますが、今回の件とは関係ありませんので説明は省きます。

以降は説明の一部を便宜上 ul要素 に限定して説明を進めますがulとolは定義こそ違うものの見た目や挙動は同じです。

li要素は横には並ばない

ul要素は子要素として li要素 を内包します。ul要素が「親」であり、li要素が「子」ですね。
マーカーが付くのは子であるli要素の左横です。

htmlの要素は「横に並ぶもの」と「横に並ばないもの」とがあります。古い言い方をすると「ブロックレベル要素」「インライン要素」という説明になりますが、その時代はもう終わってますので(html4まで, 現在はhtml5時代)、今の言い方をしますと
「display値がblockのもの」 と 「display値がinlineあるいはinline-blockのもの」 などがあります。他にもありますが代表的なものがこの3つです。
html5では横に並ぶ云々〜はhtmlの仕事ではなくCSSの仕事ですから、要素の特徴としては語らず、CSSのdisplayプロパティの値として語ることになります。

概ねはこのいずれか(block, inline, inline-block)に分類されますが、ul要素とli要素はどうでしょうか。

ul要素のdisplay値は block
li要素のdisplay値は list-item

li要素のdisplay値はblockでもinlineでもinline-blockでもなく list-item という特殊なものです。ここが一番のミソ。
この list-item の見た目の特徴は block とほぼ同じですから 横には並びません。
横に並べるには親要素か子要素いずれかのdisplay値をinlineまたはinline-blockなど、横並びにできる種に変更する必要があります。
あるいはtable-cellというdisplay値も横に並びますが今回は無視 ←

イメージし辛いかもしれませんので補足しますと、ul要素が2つ有った場合、ul要素①とul要素②は左右に並べることはできません。
ul要素の中にli要素が5つ有った場合、ul要素内でli要素は横に並ぶことはなく縦に並びます。それがデフォルトです。

li要素を横並びにするためのdisplay値変更

li要素は縦にしか並びませんが、SNSシェアアイコンはフツーは横並びですよね。
本来横に並ばないものを並べようと思えばdisplay値の変更が必須です。
その display値変更を親と子、どちらに適用するか がキモというかなんというか。

SNSアイコンの横にリストマーカーは要らないですよね。見た目に邪魔。ですからテンプレートのスタイルシートで
list-style: none
を指定することになります。「リストマーカーは要らないから表示させないで」という意味です。
displayプロパティではないですよ。list-styleプロパティです。念の為。

ここでよくあるご質問をひとつ。
「SNSアイコンの横に黒い点が表示されてしまいます。」の件。
何故か打ち消してあるはずのリストマーカーが表示されてしまうことがあるんですね。

表示させない設定になっているはずのマーカーが出ちゃった、という場面に遭遇した時、結論を言ってしまえば90%の確率で 記事内で利用したhtmlの構文エラー です。もっと細かく言うと タグの閉じ忘れ です。
これをブラウザがどのように判断しているかというと、SNSシェアアイコンよりも「前(先)」に記されているhtml要素が閉じていない、つまり終わっていないため、ul要素が正しいul要素として認識されていません。つまり正常なul要素ではなくなってしまうんですね。
「ブラウザが正しいulと受け取ってないってなんでお前にわかるねん m9(´・ω・｀)」という点については以降の説明を読んで内容が理解できればこの件も理解できます。

さて、話を戻しまして、li要素をどう横並びにするか。

li要素のdisplay値をinline-blockに変更

li要素のdisplayプロパティ初期設定は list-item で横には並びません。なので横に並べられ、かつ上下marginなども指定できる inline-block に変更します(inline値は上下marginは効きません)

最も多く取られている手法がこのinline-block指定ではないかと思います。
そしてここでもう1つ寄せられるご質問「リストを横並びにしたらマーカーが勝手に消えてしまいます」の件について。

マーカーが表示されるのは厳密には「ul要素だから」ではない

言っとること違うやん m9(´・ω・｀)
と言われそうですが「マーカーが表示されるのはul, ol要素です」という便宜上の説明をしました。
ところが厳密にはそうではなくて
display値がlist-itemだからマーカーが付く んですね。
そして display値が自動的にlist-itemになるのはulあるいはolの子要素であるli要素のみ です。ですから結果的に両者の説明は繋がっています。

li要素を横に並べてかつマーカーが必要、というケースを想定すると… 競馬の着順なんかがそうですかね (´・ω・｀)

1. リスグラシュー
2. クロコスミア
3. モズカッチャン

こんな感じかしら。手打ちでキーボードの数字を打って… というやり方でも見た目にはほとんど変わりありませんが、着順なんかはol要素でマークアップするのが最適でSEOフレンドリーですからできればol要素を使いたいところですよね。

ところがli要素をinline-blockに変更して並べた場合の様子は上記ではなく以下のようなものです。

1. リスグラシュー
2. クロコスミア
3. モズカッチャン

マーカーである数字が消失しています。親のol要素に list-style: none の指定無し、list-style-type: decimal の明示があっても消えます。それは何故なのか。

li要素のdisplay初期値は list-item です。それ故にマーカーが付きます。
しかし横並びにするために list-item を inline-block に変更したのであればマーカーは表示されなくなります。
Q「何故マーカーが勝手に消えるのか」
A「li要素のdisplay値をlist-itemからinline-blockに変更したからです」
これが回答です。

li要素を横に並べ、かつマーカーを維持するには

つまりol要素サンプルのエリザベス女王杯着順の１つ目の方、馬名の左横に数字が表記されている方はどうやったら良いのかについてです。

li要素のdisplay値を変更してしまった時点でマーカーは出なくなるわけですから、li要素の変更はできないですよね。
ですからあとはもう 親要素 の方に視点を移します。

親要素のul, olのdisplay値をflexに指定する

子のli要素に直接指定するのではなく、親要素の方へ指定します。ul, ol共にdisplay初期値は block ですが、これを flex に変更します。

親にflexが指定されている場合、子要素のdisplay値がなんであろうとも勝手に横に並ぶようになります。
flexはその点で display: table によく似ています。tableの物足りないところを埋めてあるのがflex、みたいな。
というわけで着順サンプルのhtmlソースは以下の通り(インラインCSSを用いています)

<ol style="display: flex; flex-wrap: wrap;">
  <li style="margin-right: 2em;">リスグラシュー
  <li style="margin-right: 2em;">クロコスミア
  <li>モズカッチャン
</ol>

親要素にflexを指定、さらに flex-wrap: wrap も必要です。これが無いと記事幅を超過しても折り返しません。その点もtable-cellとよく似ていますね。flexは折返しのできるtableみたいなものです。 あとはli要素に右marginの指定をしないとマーカーの特性上前後テキストと重なってしまいます。

まとめ

某かの問題が生じた時に「これこれをこうしてください」「わかりました」が手っ取り早いのですが、意味を理解していれば自己解決できます。
意味を理解しないとほぼ同じ問題だとしても対応ができないんです。今回の要点は

• li要素にマーカーが付くのはli要素のdisplay値がlist-itemだから

これが最も大事。これがわかっていれば「ブラウザがちゃんとしたul要素として認識していない」の意味もわかるはずです。
「li要素が横に並んでいてdisplay値がinline-blockなのにリストマーカーが出ている」
という状態なのですから、論理的に噛み合っていません。つまり先行要素が閉じていないのではないか、という推測が立てられる、と。そゆこと (´・ω・｀)

最後にli要素をinline-blockで並べる時にはいくつかの注意点がありますので以下の記事もご参照ください。

ナビゲーションにリンクを追加した後の見た目がおかしくなる方へ

こちらweb一般ではなく私のテンプレート限定の内容です。 リンクを追加しただけなのに… 隣のリンクとの距離がおかしい または ナビゲーションの縦幅が大きくなっちゃった などなど。 その原因・対処・事情についてご説明します。...

vanillaice000.blog.fc2.com