【CSSだけでリストマークを表現する方法】 - Webサイト専門プログラマの言いたい放題

f:id:wp-lesson:20161019003750j:plain

やり方だけならネットでいくらでも紹介記事が見つかるので、
コピペで使っている方も多いかと思いますが、
　
　
「なぜこう書くとそうなるのか？」
　
　
という、原理原則を理解しておけばいちいちネットを見なくても自分で
　
　
「こう書いたらこうなるだろうな」
　
　
という予想を立てて試すことができます。
　
　
予想どおりに表示できたときの感動は、コピペでできた感動の何倍も大きいし、
本質的な理解が手に入ったという証拠。
　
　
１００回ググるより価値があります。
　
　
では本題です。
　
　
例えばホームページのメニューとか、LPのボレットなど箇条書き（リスト）を記述するとき、
　

<li class="menu-item"><a href="#">HOME</a></li>

　
ここで、CSSを
　

.menu-item a { 
　　position: relative; 
　　display: block; 
}
.menu-item a:before { 
　　content: '▲';
　　position: absolute;
　　width: 16px;
　　height: 16px;
　　background: #003475;
　　border-radius: 50%;
　　-webkit-transform: translateY(-50%) rotate(90deg);
　　transform: translateY(-50%) rotate(90deg);
　　border: 1px solid #fff;
　　color: #fff;
　　top: 50%;
　　left: 1em;
}

　
のようにすると、添付のようなリストマークを表示することができます。
　
　
これは、テキストの「記号」の▲をtransformプロパティで右へ90度回転させ、
上下中央にセンタリングしたものです。
　
　
いろんなプロパティを併用するので、丸暗記しようとすると覚えられません。
覚えるのではなくて、仕組みを理解することに目を向けましょう。

そうすれば、「まずこれをああするためにはこうやって・・・」というように
自分で１つずつ考えながら答えを何度でも導き出すことができます。

また、その反復が理解の定着を加速してくれるので、なおお勧めです。

私はウェブのプログラミングを仕事にしていますが、
暗記しようと思って暗記したことは一度もありません。

丸暗記とかコピペは、結局のところ何も身に付かないということを知ってるからです。

ポイント１

親要素（ここでは aタグ）の左上隅を配置の基準点とするために、
親要素には　position: relative;　を指定し、
リストマークにする疑似要素には　position: absolute;　を指定します。
　

ポイント２

疑似要素（ここでは a:before）は、親要素の内側の階層に表示されるタグです。
　
content に何かを指定し、縦横のサイズを指定することではじめて実体を持たせる
ことができるので、ここではリストマークの元にする▲記号を指定しています。
　

ポイント３

上下中央寄せは、position: absolute で親要素（ここでは aタグ）の左上隅を
配置の基準点としておいて、top: 50% で上から半分の位置まで「下ろし」ます。
　
それだけでは要素自身（リストマーク）の高さの半分だけ、下に寄り過ぎるので、
translateY(-50%) で自分の半分の高さだけ上に引き戻します。
　
つまり、親要素に
position: relative;
　
子要素（ここでは疑似要素）に
position: absolute;
top: 50%;
transform: translateY(-50%)
　
を併用すると、子要素をサイズによらず上下中央寄せで表示することができます。
　

ポイント４

マークの▲は画像ではなく文字なので、color で色を付けることができます。
　
マークの背景の青色は、疑似要素の背景色として background で指定できます。
　
丸い形にするには、border-radius でタグのサイズの半分以上（50％以上）
を指定することで、通常は四角になるタグの上下左右四隅の角が丸くなり、
あたかも丸い図形のように見えます。
　
境界線を丸くすることによって、丸いタグを表示できるということです。
　
そして、境界線の縁の白い部分は、border で境界線の色を指定します。
　

ポイント５

実はテキストの記号には右向きの▲はありません。
　
あるにはありますが、環境依存文字なので、
ウェブで使うと人によって文字化けするのでNGです。
　
そこで、環境依存ではない▲か▼を90度回転させることによって右向きのマークを表現します。
　
rotate(角度deg)
　
を使います。
　
　

　
以上がリストマークをCSSで表現するテクニックの全容です。

↓↓↓「自分で作れる力」を身につけたいあなたへ↓↓↓