Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

CSSでリストの余白を作る方法

f:id:tk0137:20210623190445j:plain

SDによる余白のイメージ

目次

はじめに

 

記事を書いている際に、上のように目次という章を作成して、サイト内リンクを設定する場合があると思います。

 

これは前回の記事でも少し説明したように、HTMLコードのみで作成する事はできます。

 

私はこれまで、目次を作成する際には、この基本的なHTMLコードに背景色やデザインを設定する簡単なCSSを記述していました。

 

以下にそのコードと表示結果を示します。

 

 HTMLコード(改善前)

<div style="border-radius: 10px; background-color: #f5f5f5;">
<ul>
<li>なんだか</li>
<li>左側のスペースが</li>
<li>狭いので</li>
<li>窮屈な</li>
<li>見た目に</li>
<li>なっています。</li>
</ul>
</div>

 表示結果

  • なんだか
  • 左側のスペースが
  • 狭いので
  • 窮屈な
  • 見た目に
  • なっています。

 

上のような表示でも見た目としては十分良いものです。

 

しかし、文字が全体的に左に寄りすぎているようにも感じられます。

 

当初は私も気にしていなかったのですが、何度もみているうちに、もう少しスペースがあったほうが全体に見やすいと思うようになりました。

 

そこで、余白を取れるようにできないか調べていたところ、どうやらCSSコードを新たに加えることによって、余白を作る事ができそうだとわかったので、早速実践してみることにしました。

 

 参考にしたサイト

 

【HTML&CSS】箇条書きの余白とインデントの調整方法

 

上の記事↑↑↑を参考にさせていただきました。

 

Webデザインの記事を中心に図を用いて分かりやすく説明がなされています。

 

CSSコードの追加

 

追加するCSSとは"padding"というプロパティを使用します。

 

このプロパティでは内容の周りの余白を設定できます。

 

百聞は一見に如かずということで、以下に"padding"プロパティ要素を書き足して改善したHTMLコードと表示結果を示します。

 

 HTMLコード(改善後)

<div style="border-radius: 10px; background-color: #f5f5f5;">
<ul style="padding: 10px 30px 10px 30px;"> /*余白の幅を変更*/
<li>左側に</li>
<li>少し余白が</li>
<li>できたので</li>
<li>文字が</li>
<li>見やすくなったと</li>
<li>感じます。</li>
</ul>
</div>

 表示結果

  • 左側に
  • 少し余白が
  • できたので
  • 文字が
  • 見やすくなったと
  • 感じます。

 

ただHTMLを使用してリストを作成するよりも文字の周りに空白を大きめに取ることができました。

 

"padding: 10px 30px 10px 30px;"というプロパティを一番外側の<ul>に設定することでリスト全体の周りに余白が適用されます。

 

プロパティに4つの値が記述されていますが、左から順番に上、左、下、右の余白の幅を表しています。

 

また以下のように記述して、上下左右個別に値を定めることもできます。

 

 HTMLコード(別表記) 

<div style="border-radius: 10px; background-color: #f5f5f5;">
<ul style="padding-left: 30px; padding-top: 10px; padding-bottom: 10px;">
<li>左側に</li>
<li>少し余白が</li>
<li>できたので</li>
<li>文字が</li>
<li>見やすくなったと</li>
<li>感じます。</li>
</ul>
</div>

 表示結果

  • 左側に
  • 少し余白が
  • できたので
  • 文字が
  • 見やすくなったと
  • 感じます。

 

"padding-top:~px;"、"padding-left:~px;"、"padding-bottom:~px;"、"padding-right:~px;"という具合に上下左右1つずつ余白を指定する事ができます。

 

上の例では上と下と左に余白を指定しています。

 

右も指定してももちろんいいのですが、文字の長さが右端まで到達していなかったので、特に指定する必要はありませんでした。

 

さらに、はてなブログの仕様だと思うのですが、上下左右4つの余白を上のような書き方で全て指定すると、自動的に"padding ~px ~px ~px ~px;"の形式に変換されてしまいます。

 

最後に

 

今回はリストの余白を取る方法を紹介してみました。

 

是非ご参考までに。

 

最近暑くなってきましたね。

 

コロナウイルスの予防接種も徐々に幅広い世代の方々に実施されるように、このような生活もいよいよ終盤に差し掛かっているかとも思われますが、依然として予断を許さない状況です。

 

感染を広めないためにも、何よりも自身を守るため、手洗いやマスク着用などの予防を怠らないようにしていきたいですね。

 

以上、最後までありがとうございました。