狼読

 
2020/05/04

[css]リストの前に三角系をつけてみよう

今回はリストの前に三角形がつける方法についてご紹介したいと思います。多くのサイトでリストで並んでいる箇条書きのものに三角形がついてたりするものをよく見るかと思います。ではこの三角形は画像なのでしょうか?そうではありません。cssで作ることができるのです。作るのは難しいのでしょうか?そんなこともありません。考え方はborderを使うといった方法です。ではborderをどのように使ってリストの前に三角形をつけていくのかをご紹介したいと思います。

リストを作るhtmlの書き方

リストを作るhtmlのサンプルは次の通りです。

<ul class="triangle">
 <li>リストの前に三角形を入れよう</li>
 <li>cssを使ってリストの前に三角形を入れよう</li>
 <li>borderを応用すると三角形を作れます</li>
</ul>

リストのhtmlサンプル実装例

  • リストの前に三角形を入れよう
  • cssを使ってリストの前に三角形を入れよう
  • borderを応用すると三角形を作れます

上記のように、シンプルなリスト構造で作っていこうと思います。

リストの前に三角形を入れてみよう

リストの前に三角形を入れる前にまず、デフォルトで出てる丸いちょぼマークを消していきます。消し方は非常に簡単で、list-style:noneを当てるだけですね。
ここは省略させていただきます。消したサンプルは次の通りです。

  • リストの前に三角形を入れよう
  • cssを使ってリストの前に三角形を入れよう
  • borderを応用すると三角形を作れます

上記のように、まず丸ちょぼを消すことに成功しましたね。
では次にbeforeの要素三角形をつけていきましょう。
作り方は上述で散々いっていますが、borderを使用します。
作る過程を少しご紹介しながらなぜborderが三角形になるのかとご紹介していきたいと思います。

<style>
 .triangle{
   list-style:none;
   margin-top:30px;
   margin-bottom:30px;
 }
 .triangle li{ 
   position:relative; 
  }
 .triangle li:before{
   content:"";
    width:10px;
    height:10px;
    position:absolute;
    display:inline-block;
    border-width:10px;
    border-style:solid;
    border-right-color:red;
    border-left-color:blue;
    border-bottom-color:green;
    border-top-color:#eee; 
    box-sizing:border-box;
    left:-1.5em;
    top:0.7em;
  }
</style>
<ul class="triangle">
 <li>リストの前に三角形を入れよう</li>
 <li>cssを使ってリストの前に三角形を入れよう</li>
 <li>borderを応用すると三角形を作れます</li>
</ul>

borderに色をつけた場合のサンプル実装例

  • リストの前に三角形を入れよう
  • cssを使ってリストの前に三角形を入れよう
  • borderを応用すると三角形を作れます

上記のようにposition:relativeとabsoluteを使用して、li:beforeの要素をリストの前に配置しました。要素の内容としては、width:10px height:10px;の正方形で、border:10pxを引くことで各left , right , bottom ,topを色分けして見ました。どうでしょうか。left側のborderの色を残してあとはすべて背景色にしてしまえば、三角形が出来上がることがわかるでしょうか。

次は左以外の要素を全て背景色にしていきたいと思います。

<style>
 .triangle{
   list-style:none;
   margin-top:30px;
   margin-bottom:30px;
 }
 .triangle li{ 
   position:relative; 
  }
 .triangle li:before{
   content:"";
    width:10px;
    height:10px;
    position:absolute;
    display:inline-block;
    border-width:10px;
    border-style:solid;
    border-right-color:transparent;//ここ変えました
    border-left-color:blue;
    border-bottom-color:transparent;//ここ変えました
    border-top-color:transparent; //ここ変えました
    box-sizing:border-box;
    left:-1.5em;
    top:0.7em;
  }
</style>
<ul class="triangle">
 <li>リストの前に三角形を入れよう</li>
 <li>cssを使ってリストの前に三角形を入れよう</li>
 <li>borderを応用すると三角形を作れます</li>
</ul>

リストの前に三角形をおいてみるサンプル実装例

  • リストの前に三角形を入れよう
  • cssを使ってリストの前に三角形を入れよう
  • borderを応用すると三角形を作れます

上記のように、実装することができました。

まとめ

今回は、リストの前に三角形を作る方法をご紹介させていただきました。このようにborderを使うことで三角形を作ることができます。また、liのデフォルトの要素は消去して自分なりのオリジナルのリストデザインを作ることができますので色々試して見てください。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/07/17

Macのストレージ(空き容量)を正しく確実に確保!ストレージ 「その他」圧迫の原因と解消方法

投稿カレンダー

2020年11月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

Technology

category

©狼読