狼読

 
2020/05/05

[css]リストの前にチェックマークを入れてみよう

今回は、リストの前にチェックマークを入れてみようと思います。以前記事で書かせていただいた三角形を入れる方法とほぼ同じと言えます。ただbeforeの要素に実現するものが違うといったものになります。リストの前を三角形にする方法はこちら

リストの前にチェックマークを入れるhtml

リストの前にチェックマークを入れるためのhtmlを用意したいと思います。三角形を入れる時と同じで、シンプルな構造のhtmlとなります。

<ul class="checkmark">
 <li>リストの前にチェックマークを入れてみよう</li>
 <li>リストの前にcssを使ってチェックマークを入れてみよう</li>
 <li>今回もborderが活躍します。</li>
</ul>

上記のようなhtmlを使用していきます。

リストの前にチェックマークをcssで入れてみよう

三角形を作った時と同様に最初からデフォルトでついている丸いちょぼマークを消していくところからスタートします。
今回は、そのサンプルの過程は省略したいと思います。
ではコードの考え方についてご紹介したいと思います。

チェックマークは簡単に考えますと長方形の右側と下側に線を引いて、45度回転させてものと考えられます。

ではこの考えのもとcssを記述しますと次の通りになります。

<style>
 .checkmark{
   list-style:none;
 }
 .checkmark li{ 
   position:relative;
  }
 .checkmark li:before{
   position:absolute;
   content:"";
   width:5px;
   height:10px;
   border-right:2px solid red;
   border-bottom:2px solid red;
   display:inline-block;
   left:-1.5em;
   top:1em;
   transform:rotateZ(45deg);
  }
</style>
<ul class="checkmark">
 <li>リストの前にチェックマークを入れてみよう</li>
 <li>リストの前にcssを使ってチェックマークを入れてみよう</li>
 <li>今回もborderが活躍します。</li>
</ul>

チェックマーク付きリストのサンプル実装例

  • リストの前にチェックマークを入れてみよう
  • リストの前にcssを使ってチェックマークを入れてみよう
  • 今回もborderが活躍します。

チェックマーク付きのリストが出来上がりましたね。

まとめ

今回は、チェックマーク付きのリストの作り方をご紹介させていただきました。今回の話は、長方形を利用してそれを回転させてチェックマークを作ると言ったものになります。物の見方を変えればそれがチェックマークになります。柔軟な発想がデザインには必要ですね。

Profile Card

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

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

関連記事

Related Post

2020/05/22

[css]bootstrap4のグリッドシステムを使って横並びのブロックを作ってみた

2020/06/09

[html]ラジオボタンを作って、チェック済みにしたり選択できないようにしてみよう

2020/05/01

[css]チェックボックスのチェック欄を消して、オリジナルのチェックボックスを作る方法

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読