JIMDOでチェックマークつきのリストをつくりたい

チェックマークつきリストの作り方

リスト化された文章を作る準備をする

  • これはリストになった文章
  • これはリストになった文章
  • これはリストになった文章
  • これはリストになった文章
  • これはリストになった文章
  • これはリストになった文章

◀ 文章の『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>


チェックマークをどうやって作ったか

四角を用意する

四角

左と下に線を追加

線追加

回転させる

回転

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422