狼読

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>