【第4回】必要なコンテンツを考える（WordPressでホームページを作成する方法）
kanri
空創デザインオフィス
【たった２行追加でOK！】リストの2行目以降を1文字空けるCSS
kanri
本記事はこんな方にオススメです
- ご自身でホームページ（Webサイト）を作成している方
- コーディング（HTML、CSS）勉強中の方
- Webデザイナーを目指している方
リスト（li）の２行目以降を１文字空けて、縦を綺麗に揃えたいのですが、どうしたら良いでしょうか？
クライアント様よりこのようなご質問をいただいたので、今回はこちらを実装していきたいと思います！
簡単に実装できます！
リストの2行目以降を1文字空けるCSSの書き方
２行目は１文字空けたい（字下げしたい）箇所に、下記CSSを追加します。
1text-indent: -1em;
2padding-left: 1em;コーディング具体例
▼HTML
1<ul>
2<li>テキストテキストテキストテキスト<br>
3テキストテキストテキストテキスト</li>
4<li>テキストテキストテキストテキスト<br>
5テキストテキストテキストテキスト</li>
6<li>テキストテキストテキストテキスト<br>
7テキストテキストテキストテキスト</li>
8</ul>▼CSS
1ul {
2list-style: none;
3}
4ul li {
5text-indent: -1em;
6padding-left: 1em;
7}
8ul li:before {
9content:"・";
10}
こんな感じです！
～ ざっくり解説 ～
- list-style:none で元々付いているスタイルをとる
- :before でliの前に「・」を付ける
- text-indent: -1em; で１行目を左に移動
- padding-left: 1em; で２行目以降を右に移動
最後に：Webデザイナーを目指している方、ホームページを作りたい方などお気軽にお問い合わせください！
リストの2行目以降を1文字空けるCSSの書き方はこちらです。
1text-indent: -1em;
2padding-left: 1em;空創デザインオフィスでは、Webデザイナーを目指している方や、ホームページ（Webサイト）を作りたい方へのサポートなども行っております。下記よりお気軽にお問い合わせください！
ABOUT ME
2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！
