チェックマークつきリストの作り方
リスト化された文章を作る準備をする
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
◀ 文章の『HTMLを編集」に下のHTMLを貼付け
<ul class="check">
<li>これはリストになった文章</li>
<li>・・・・・・・</li>
<li>これはリストになった文章</li>
</ul>
以下のスタイルシートをコピーして『ヘッダ部分を編集』に追加する
ul.check{
list-style:none;
padding:0;
margin:0;
}
ul.check li{
padding-left:1.5em;
position:relative;
margin-bottom:0.5em;
}
ul.check li:before{
position:absolute;
top:0.2em;
left:0;
content:"";
list-style:none;
display:block;
height:0.3em;
width:0.8em;
border-color:green;
border-width:0.2em;
border-style:none none solid solid;
transform: rotate(-45deg);
}
▼ スタイルシートの貼り付け方はここ マウスを当てると画像が開きます。
文字の大きさを変更したい場合
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
- これはリストになった文章
◀ HTMLの編集を開き以下を追加する
<ul class="check" style="font-size:140%;">
<li>これはリストになった文章</li>
<li>・・・・・・・</li>
</ul>
チェックマークをどうやって作ったか
四角を用意する
左と下に線を追加
回転させる
コメントをお書きください