閉じる
閉じる

あまめも

リストテンプレートも作っておいた方がいいかな?と思ったので作成!

こんにちは! あますた(@amaguristar)です。

先日、「目次テンプレート」を作成。実際に使用しはじめたら思ったよりいい感じ。「これはついでに”リストのテンプレート”も作成しておこうかな?」って流れです。

 

目次

リストテンプレート

通常リストを使う時はこんな感じ、

  • list1
  • list2
  • list3
  • ・・・・
  • まとめ

これでもいいのですが、目次を使い始めたらちょっと・・・・。なんて言うか目次は頑張った感があるのに対して手抜き感が半端ない。

今回も下記サイトにお世話になります!

参考にしてこのページ用に調整をかけたのが、

  • list1
  • list2
  • list3
  • ・・・・
  • まとめ
  1. list1
  2. list2
  3. list3
  4. ・・・・
  5. まとめ

やっぱり文字の感覚は統一した方が良いですね。あとは「・」や「数字」の文字位置は枠から少し離れた方がゆったりしてるので好みです。実際のcssは、

ul.ctk-list, ol.ctk-list {
    background: #fcfcfc;
    border-radius :5px;
    box-shadow :0px 0px 3px silver;
    padding: 0.5em 0.5em 0.5em 2.5em;
}
ul.ctk-list li, ol.ctk-list li {
    line-height: 1.5;
    padding: 0.5em 0;
}

です。今後のリストはこちらを使用。今までの記事も順次変えていこう!

関連記事

  1. WordPressで<div>の様なHTMLタグを表…

  2. [甘]とりあえず、グローバルメニューの作成完了?

  3. 文字

    【HTML】略語の正式名称を簡単に表示する方法

  4. edit

    「Git」のコミットメッセージを間違えた、そんな時の修正方法

  5. テーブルの背景を簡単に奇数or偶数行で色を変えて見易くしたい!

  6. 電話

    【HTML】「クリックして電話をかけたい!」それ簡単に実現できま…

こんなメモもありますよ♪

  1. take054-thumbnail
  2. info

Twitter

ページ上部へ戻る