質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2376閲覧

リストの中央寄せについて(リスト内文字列はインライン要素か)

Tiroze

総合スコア35

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/10/22 15:06

以下ソースにてリスト全体を中央寄せしようとしたところ、
黒点は左のままでリスト内文字列(例:リスト1)のみ中央寄せがされました。

これは、以下のようにリスト内文字列がインライン要素であるため、
起きた事象で宜しいでしょうか。

【li】
→ブロック要素のため、以下に記載したcssの影響を受けない。

【リスト内文字列】
→インライン要素のため親ブロック要素divのtext-align:center;の
影響を受け中央寄せになった。

リスト全体の中央寄せについては、divのtext-align:center;を消し、
liにmargin:auto;を追記することで実現できる事は確認済みです。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta cherset="utf-8"> 5 <link rel="stylesheet" href="test2.css"> 6</head> 7<body> 8<div class="div_a"> 9 <ul class="list1"> 10 <li class="li_1">リスト1</li> 11 <li class="li_2">リスト2</li> 12 <li class="li_3">リスト3</li> 13 </ul> 14</div> 15</body> 16</html>

CSS

1.div_a{ 2 text-align:center; 3} 4 5.li_1{ 6 width:400px; 7 background-color:green; 8 9} 10 11.li_2{ 12 width:400px; 13 background-color:yellow; 14 15} 16 17.li_3{ 18 width:400px; 19 background-color:blue; 20 21}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

リスト要素(displayプロパティは list-item)に付くリストマーカー(::marker 疑似要素)は、デフォルトで自身の要素の外に付きます(list-style-position: outside;)。質問文中のコードでは、リスト要素は幅いっぱい、その外にリストマーカーが付くので、センター揃えは文字列にしか適用されません。

リスト要素に list-style-position: inside; を付けることで、リストマーカーがリスト内要素(ここでは文字列)の頭に付き、リストマーカーも含めセンター揃えにすることができます。

投稿2018/10/22 21:20

takna

総合スコア784

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tiroze

2018/10/23 09:14

回答ありがとうございます。 対処方法教えていただき助かりました。 追加で質問ですが、センター揃え(text-alin)が文字列に適用されるのはli要素(ブロック要素)だからでしょうか。それとも、タグなしの文字列がインライン要素と見なされるからでしょうか。 ›その外にリストマーカーが付くので、 ›センター揃えは文字列にしか適用されません。
takna

2018/10/23 10:16 編集

li要素をインラインにすると、要素が文字列自身の高さと幅になるのでセンター揃えは効かないですよね。ただ、li要素の中に何かしらのブロック要素を入れたら効きます。つまり、li要素(ブロック要素)だからで合ってます。 デフォルトで入れ物の外に付くリストマーカーを、`list-style-position: inside;` で入れ物の中に付けるように変えたという認識で良いんじゃないでしょうか。 分かりづらくてすみません。私も勉強が必要です。
Tiroze

2018/12/30 01:18

確認遅くなりまして申し訳ありません。 ありがとうございます、理解できました
guest

0

css

1.div_a{ 2 display: flex; 3 justify-content: center; 4}

だけでもセンター配置できると思います。

投稿2018/11/01 08:40

yamana

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tiroze

2018/12/30 01:19

ありがとうございます。 この方法は初耳でした、今後使ってみます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問