スキップしてメイン コンテンツに移動

些細な日常

縦並びリストのマーカーや左端が揃った状態を中寄せする方法

サイト作成でHTMLの番号なしリストのulや番号付きリストのolを使ってCSSの中寄せ:text-alignのcenterを指定した場合に内側のリストタグのliしか移動せず、ulの中黒やolの数字のマーカーが付いて来なくて左端に残ったまま、ずれてしまうのを修正できる方法はないか。

CSSのlist-style-positionのinsideを使う

考えて番号なしリストのulや番号付きリストのolにcssのlist-style-positionのinsideを指定するとリストタグと一緒に中黒や数字のマーカーも位置合わせが可能になると分かった。

同時にCSSのtext-alignのcenterを指定しておくと中寄せになるし、または値をrightに変えれば右寄せでもマーカーがリストタグと揃って移動するから大丈夫なんだ。

CSSのlist-style-positionのinsideを使うとリストタグのマーカーをリストの内側に埋め込むスタイルになる。番号なしリストのulや番号付きリストのolのデフォルトのデザインの値はoutsideだからマーカーがリストの外側に置かれていて位置合わせを変えても付いて来ないわけだ。

マーカーを中寄せした縦並びリスト

  • 中寄せしても
  • マーカーが一緒の
  • 番号なしリスト

HTML

<ul class="center-list">
<li>中寄せしても</li>
<li>マーカーが一緒の</li>
<li>番号なしリスト</li>
</ul>

CSS

.center-list {text-align:center;list-style-position:inside;padding-left:0;}

実用上、位置合わせとマーカーの埋め込みだけではリストの先頭にulやolに特有の余白が残ってバランスが悪いので、CSSのpadding-leftの0も指定して消すと良いと思う。

CSSのlist-styleでも全く同じに指定できる

list-style要素は他のlist-style-type(マーカーの種類や消去)やlist-style-imageの値と併せて使えるのが便利なんだ。値は一つだけでも構わないし、list-style-position要素を完全に代用できる。

サンプルのソースコードにlist-style要素を使った場合は.center-list {text-align:center;list-style:inside;padding-left:0;}と記述する。元々の「list-style-position」が「list-style」に置き換えられただけで、デザインは全く同じに反映する。

リストの左端が揃った状態を中寄せする

CSSのfloatを使えばリストを左右に移動させるのは簡単だけれどもデバイスの画面幅によって位置取りが微妙に安定しない場合が多い。さらに後続のコンテンツのために位置取りをclearのbothなどで再び解除するのも手間がかかってしまう。

むしろCSSのgridを使うとどんな画面幅でも左右の真ん中にぴったり合わせられて後続のコンテンツには何も影響しないから便利なんだ。

左端が揃った中寄せの縦並びリスト

  1. 中寄せしても
  2. 左端が崩れない
  3. 番号付きリスト

HTML

<div class="list-grid">
<ol>
<li>中寄せしても</li>
<li>左端が崩れない</li>
<li>番号付きリスト</li>
</ol>
</div>

CSS

.list-grid {display:grid;justify-items:center;}
.list-grid ol {margin-top:0;margin-bottom:0;padding-left:0;}

領域タグのdivで番号付きリストのolのためにグリッドデザインを一つ取っている。レイアウトに含まれるアイテムの位置取りはjustify-itemsで指定する。右寄せの場合には値のcenterをrightに書き換える。

リストの位置取りを左右に細かく調節するならばCSSのfloatが数値で合わせられて向いてそうだけど、しかし中寄せや右寄せと大まかに捉えるかぎりはCSSのgridで指定するのが纏まりを得易い。

追記:その他にも左端を揃えた中寄せの方法があってリストにかぎらず、サイトの文章を親要素と子要素に分けて整列する方法として一般的に纏めた。
  • ブログの投稿者: 結城永人
  • タイトル: 縦並びリストのマーカーや左端が揃った状態を中寄せする方法
  • 最終更新: 

コメント

最近の投稿

日付: 

Googleドライブの空にしたゴミ箱を復元する方法

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...