liリストの位置調整について
解決したいこと
liリストの位置の調整をしたいです。
詳細）
liが3つあります。
liはそれぞれ文字数が違うので、バランスよくなりません。
そこで、二つ目のliを中心にして一つ目と三つ目のliをバランスよくすればと考えました。
初心者なので、この方法で合っているのかと心配になり、質問しました。
この方法の他に良い方法があれば教えてほしいです。
できればコードも見せていただければと思います。
0
1Answer
複数のリスト項目（li 要素）の文字数が異なるために見た目のバランスが悪くなってしまう場合、CSS のレイアウト機能を活用すると簡単に見た目をそろえることができます。
- Flexbox を利用する場合、
- 親要素（ul など）に対して display: flex; を指定すると、それぞれの子要素（li）を横一列に並べることができます。
- justify-content: center; を使って水平方向に中央寄せする、justify-content: space-around; などで均等配置する、などが柔軟にできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったサンプル</title>
<style>
ul {
/* Flexboxを有効化 */
display: flex;
/* 親要素内で水平方向の余白を均等に分配 */
justify-content: space-around;
/* 縦方向センタリング（必要なら） */
align-items: center;
/* デフォルトの余白や装飾をリセットして好みのデザインに合わせる */
list-style: none;
padding: 0;
margin: 0;
background: #f2f2f2;
}
li {
/* 文字数が異なっても中央寄せしたり、自由にデザイン */
text-align: center;
padding: 10px 20px;
background: #ddd;
border: 1px solid #ccc;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li>短い</li>
<li>ちょっと長めのテキスト</li>
<li>すごくすごく長い文章を入れてテストしてみるリスト項目</li>
</ul>
</body>
</html>
試しのためにこちらへ
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_editor
色々な方法あるだと思います。
Flexbox や inline-block を利用すると、リストアイテムの位置やバランス調整が楽になります。
二つ目の li を中央に配置したい場合、justify-content: center; や space-around; などを使って均等配置にする方法がシンプルです。
もし表組みのように縦横をきっちり揃えたい場合は、テーブルレイアウト（display: table; table-cell;）を使う方法もあります。
初心者のうちは、まず Flexbox を使って慣れることをおすすめします。レイアウトがぐっと楽になりますので、ぜひ試してみてください。
2Like