★や◯などリストマークを簡単表示させる

2017年10月9日  CSS,ホームページ作成 


リストマークというと、下記のように画像を表示させたりする方法もありますが、

  • こんな感じに
  • 表示されますね

(上のマークは角度調節のため、画像です)
 

時間のない時とか、CSSのリストマーカーの種類にはないものを表示させるのにいいな〜と思ったので、忘れないように例によって覚え書き。
画像だと調節に時間かかりますもんね。
 
 
こちらは表示例。

「しかく」で変換すると出るやつ。同じ四角でもこちらの方が若干大きい…?
もちろん三角や星など、変換がきくものならOKかと…(媒体によって表示がされないものもあるので、そこは注意!)
リストマーク(こちらでも別ページにて表示されます)

簡単なリストマークの作り方

書き方は簡単。
CSS


ul {list-style: none;}	

.list ul li {
	margin: 10px;
	margin-left: 30px;}

.list li:before {
		content: "◼︎";
		color: red;
		margin-right: 5px;}

最初に「list-style: none;」で、リストスタイルを無効にする。
「li:before」で、リスト前。
「content」で好みのマークを入れればOK。
marginなどの位置はお好みで。
 
 

HTML


<div class="list">
	<ul>
		<li>ここは「Masa-P」というサイトです</li>
			
	</ul>
<div>

まとめ

諸事情でコーディングは大分ご無沙汰してました。
忘れないように、便利な技は覚え書きしておいた方がいいですねー。

  

*ランキングに参加中です。宜しくお願いします。

にほんブログ村 人気ブログランキング ブログ王ランキング   
pipipi
247