CATEGORIES:CSS
ULとLIで注意事項

米印とかの注意の多い説明文て読む気にならないけど。原稿でそうしてほしいと言われると仕方がない。ulとliで作ると複数行あるときに便利かな。

※印の場合
文字だらけになるので本文よりも小さくしてしまう。位置はpaddingを使って微調整。

上記の通りウェブ会議や映画鑑賞もステンレスなくご利用できるようになります。
  • あくまでも一般的な環境での動作であり、お客様の環境により差が生じる場合があります。
  • ストレスフリーを保証するサービスではありませんのでご注意ください。
上記の通りウェブ会議や映画鑑賞もステンレスなくご利用できるようになります。
   <ul class="caution">
    <li>あくまでも一般的な環境での動作であり、お客様の環境により差が生じる場合があります。</li>
    <li>ストレスフリーを保証するサービスではありませんのでご注意ください。</li>   
   </ul>
.caution {
 font-size: 90%;
 list-style: none;
 padding-left: 1.0em;
 /* margin-left: 0.5em; */
}

.caution li {
 text-indent: -1.0em;
 line-height: 1.1em;
 padding: 0.3em 0;
}

.caution li:before {
 content: "※";
 margin-right: 0em;
}

星にしたければcontentに「★」を入れてしまえ。

上記の通りウェブ会議や映画鑑賞もステンレスなくご利用できるようになります。
  • あくまでも一般的な環境での動作であり、お客様の環境により差が生じる場合があります。
  • ストレスフリーを保証するサービスではありませんのでご注意ください。
上記の通りウェブ会議や映画鑑賞もステンレスなくご利用できるようになります。
   <ul class="caution03">
    <li>あくまでも一般的な環境での動作であり、お客様の環境により差が生じる場合があります。</li>
    <li>ストレスフリーを保証するサービスではありませんのでご注意ください。</li>
   </ul>
.caution03 {
 font-size: 90%;
 list-style: none;
 padding-left: 1.0em;
 /* margin-left: 0.5em; */
}

.caution03 li {
 text-indent: -1.0em;
 line-height: 1.1em;
 padding: 0.3em 0;
}

.caution03 li:before {
 content: "★";
 margin-right: 0em;
}

箇条書きの場合
これは文字の大きさは同等で。位置はpaddingを使って微調整。

サービスに加入することで以下メリットがあります。
  • 接続利用料金がパック料金で安くなる
  • 接続速度が早くなる
  • 初期費用と工事費用が無料
サービスに加入することで以下メリットがあります。
   <ul class="caution02">
    <li>接続利用料金がパック料金で安くなる</li>
    <li>接続速度が早くなる</li>
<li>初期費用と工事費用が無料</li>
   </ul>
.caution02 {
 list-style: none;
 padding-left: 1em;
 margin-left: 0.5em;
 margin-bottom: 15px;
}

.caution02 li {
 text-indent: -1.5em;
 line-height: 1.1em;
 padding: 0.3em 0;
}

.caution02 li:before {
 content: "・";
 margin-right: 0.5em;
}

NOTICES

  • 記事内容は実装させたものがほとんどですが自己責任で参考にしてください。

TO HEADER