閉じる
閉じる

あまめも

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

こんにちは! あますた(@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. 雑誌

    「一文字だけ雑誌の様におしゃれに大きく表示したい」直ぐに解決可能…

  2. 【HTML】サイトで漢字にルビ(読み仮名)ふりたいんだけどなんて…

  3. take095-thumbnail

    【WaznFilm更新】FontAwesomeを通常のアプリ(W…

  4. WordPressのバージョンをアップしたら画像読み込みがおかし…

  5. 目次のテンプレートっぽいものを作ろうとローテクで頑張ってみた

  6. 電話

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

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

  1. info
  2. 生ビール

Twitter

ページ上部へ戻る