読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSSだけでリストマークを表現する方法】

コーディングテクニック

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

やり方だけならネットでいくらでも紹介記事が見つかるので、
コピペで使っている方も多いかと思いますが、
 
 
「なぜこう書くとそうなるのか?」
 
 
という、原理原則を理解しておけばいちいちネットを見なくても自分で
 
 
「こう書いたらこうなるだろうな」
 
 
という予想を立てて試すことができます。
 
 
予想どおりに表示できたときの感動は、コピペでできた感動の何倍も大きいし、
本質的な理解が手に入ったという証拠。
 
 
100回ググるより価値があります。
 
 
では本題です。
 
 
例えばホームページのメニューとか、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度回転させ、
上下中央にセンタリングしたものです。
 
 
いろんなプロパティを併用するので、丸暗記しようとすると覚えられません。
覚えるのではなくて、仕組みを理解することに目を向けましょう。


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


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


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


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

ポイント1

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

ポイント2

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

ポイント3

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

ポイント4

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

ポイント5

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

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


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

【1】CODEMYマンツーマンレッスン

codemy-lesson.office-ing.net
⇒30分無料相談あり
⇒知りたいことだけ学べる個人レッスン

▼レッスンの記録をご覧いただけます。
https://www.facebook.com/codemy.lesson/
 

【2】プログラミング講座CODEMY

office-ing.hatenablog.com
⇒動画と個別添削で学べるオンラインレッスン

自分でホームページやプログラムの制作やカスタマイズをできるようなりたい方が
業種・経験・地域を問わず参加されています。

講師実績

業界大手リクルート社が運営する総合学習サイト「おしえるまなべる」
2015年、パソコンジャンルで1位評価
2016年9月「ホームページ作成のツボとコツがゼッタイにわかる本」出版

講師が執筆した本が発売されました!

『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら!