クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

CSS

CSS liタグ の不要な行頭マークを削除する(サンプル付き)

投稿日:2017年12月26日 更新日:

liタグはよく利用しますがデザインによっては行頭のマーク「・」が邪魔になることがあります。
このマークはCSSで簡単に削除することができます。

HTML側

「ul」にクラス名を付けておきます。
「li」ではなく「ul」であることに注意です。

CSS側(list-style:none)

「list-style」という属性に「none」を設定します。
この1行だけでliタグの行頭「・」が削除されます。

注意点としては行頭の「・」は削除されましたが空白の領域が残っています。
これは「padding-left」を「0px」にすることで解決できます。

CSS側(行頭「・」と空白を削除する)

簡単ですね!
サンプルも作りました。

-CSS

執筆者:

関連記事

CSS 正規表現でクラスを複数指定する

CSSで作成するクラスはなるべく少ない方が良いですよね。 でも実際は仕方なく同じようなクラスを作らざるを得ない状況もあります。 その同じようなクラスにも1つずつ同じ属性を設定していくなんて事も多々あり …

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「10 …

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …

CSS テキストボックスのフォーカス時の青枠を無効にする

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …


comment

メールアドレスが公開されることはありません。