HTML/CSSにおいて、『ul・ol・liタグによる箇条書きを中央配置し、テキストを左揃えする方法』を紹介します。
- HTML/CSSで箇条書きを中央配置し、テキストを左揃えしたいけどイメージ通りにできない
目次
NGな箇条書きの中央配置
以下に私が失敗したNGなパターンを記載します。
NGパターン①：ulタグに「text-align:center」を指定
中央寄せと言えば「text-align:center」。
ということでulタグに「text-align:center」を指定してみます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
イメージした中央配置になりませんでした。
- テキストのみが中央に配置されており、「・」が左に寄っています
- テキストそのものが中央揃えされており、左揃えできていません
NGパターン②：ulタグに「margin:auto」を指定
あれ？「margin:auto」だったかな？
ulタグに「margin:auto」を指定し直してみます。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
今度はそもそも中央配置になりませんでした。
- 左寄せで配置されており、中央配置されていません
こんな箇条書きに悩んでいませんか？
解決方法
では解決方法を紹介します。
OKパターン①：ulタグに「margin:auto」+横幅（width）を指定
ulタグに「margin:auto」を指定した上で、横幅（width）を指定します。
ここでは「width:fit-content」（子要素の幅に合わせる）を使用します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
OKパターン②：親要素に「text-align:center」+子要素に「text-align:left」を指定
親要素に「text-align:center」を指定し、子要素にも「text-align:left」を指定します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 箇条書きを中央配置し、テキストは左揃えになっています。
補足：箇条書きを中央配置し、テキストも中央揃えしたい
箇条書きを中央揃えした上で、テキストも中央揃えしたい場合の記載方法です。
liタグに「margin:auto」を指定した上で、横幅（width）を指定します。
See the Pen Untitled by Hop Ichikawa (@Hop-Ichikawa) on CodePen.
- 箇条書きを中央配置し、テキストも中央揃えになっています。
イメージ通りの箇条書きができました
本格的にHTML/CSSを学びたい方は
本格的にHTML/CSSを学びたい方は『TechAcademy(テックアカデミー)』がオススメです。
- 現役エンジニアによるマンツーマンサポート
- はじめての副業に必要なスキルが学べる
- 無料メンター相談が可能
「短期間で集中して学びたい」「本格的に仕事にしたい」と考えている方はまずは無料メンター相談から初めて見てはいかがでしょうか
↓気になる方は下記リンクを参照
まとめ
今回は、HTML/CSSにおいて、『箇条書きを中央配置し、テキストを左揃えする方法』を紹介させていただきました。
- ulタグに「margin:auto」+横幅（width）を指定
- 親要素に「text-align:center」、子要素に「text-align:left」を指定
皆さまの参考になれば幸いです。
コメント