CSS

リストマーカや番号の左側の隙間について

投稿日:2017年8月31日 更新日:

<ol>や<ul>といった箇条書きを指定した場合、リストマーカや番号の左側に大きな隙間ができてしまう。
ここは、CSSで何も指定していなくても、ブラウザが気を利かせてある程度の余白を設定して表示している。
たとえばGoogle Chromeでデスクトップサイトを見る場合、
CSSに何も書かなくても「 padding-left: 40px 」で表示される仕様になっている。

かといって「 ul {padding-left:0} 」とすると、箇条書きのリストマーカーや数字が枠の左外側にはみ出てしまう。

サイトのレイアウトにあわせて、「 padding-left 」を適宜設定しておくとよい。

 

詳しくは、
https://saruwakakun.com/html-css/reference/list-space

https://ameblo.jp/rinamaru-design/entry-10970185059.html

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-CSS

執筆者:

関連記事

CSS★テキストにグラデーションをつける

文字にグラデーションカラーをつけるといえば、イラストレーターなどで画像を用意してからサイト内に配置というのがお約束だったんだけど、CSSだけで実現できるようになりました。 先日の勉強会で習ったばかりの …

二重の打ち消し線にする方法

あるサイトの更新で、日付を打ち消し線で消して、次の行に新しく正しい日付を掲載するよう修正してほしいとの要望がありました。 打ち消し線は、cssでスタイルをもたせてやればスグにできます。   …

CSS★最低の高さを決めて後は可変にする方法

最小の高さだけ決めて、 あとはdivなどの要素の高さに応じて高さを可変にできる指定方法。 CSSで下記のように指定します。   min-height: 80px; height: auto !impo …

coding programming css 1853305

CSSが更新されない!CSSのキャッシュを自動で読み直すWEBサイト更新テクニック

WEBサイトの更新時、クライアントさまから クライアント:「更新されていませんよ」 私:「お手数ですがキャッシュの削除をお願いできますか?」 クライアント:「キャッシュって何?…」 という不毛なやりと …

CSS★疑似要素にFontawesomeのアイコンフォントを表示させるには…

右端にアイコンフォントを入れたボタンを作ろうとしたときに躓いたところ。なので、忘れないようにメモ。 下のようなボタンを作ろうとしていた。  ↓ ↓ ↓ ボタンのデザイン /* 疑似要素内での Font …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。