WEBサイト制作で調べたことのメモ
投稿日：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
本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。
執筆者：kobato
関連記事
今さらですが… CSSだけで表の背景色を交互に変える方法の覚え書き。 ※IE8以下のブラウザには対応していません。 でも、マイクロソフトはIE8のサポートを終了したので、これからはどんどん使えそうです …
WEB制作ではhtml & css & phpを触ることが多いですが、コメントアウトの書き方がぞれぞれ違うので忘れないようにメモ。 ちなみに、コメントアウトとは、ソースコード側に書いて …
CSS ★ inline-blockで横並びにした要素を上揃えにする
CSSで横並びさせたい時によく使うのが、 display:inline-block。 でも、縦のラインがきれいに揃わないで困ることがある。 そんな時に、 たった1行追加するだけでOKなセレクタがあった …
最小の高さだけ決めて、 あとはdivなどの要素の高さに応じて高さを可変にできる指定方法。 CSSで下記のように指定します。
|
1 2 3 |
min-height: 80px; height: auto !important; height: 80px; |
I …
このページのもくじ 画像の上に文字を重ねる囲んだ要素の高さがなくなる！ 画像の上に文字を重ねる 配置した画像の上に文字を重ねたいとき、CSSだけでできちゃいます！ 下になるアイテムに「position …
2020/02/16
WordPress★サイトをコピーしてテスト環境をつくる手順【プラグインなし】
2020/02/15
CPIシェアードサーバーでWordPressが文字化けしたときの対処法
2020/02/11
WordPress★Contact Form 7 で隠しフィールドを設定する
2020/02/06
WordPress★TwitterとInstagramをサイトに表示させる
