List Title

タイトルのインデントを付けたリスト。

CSSに関しては一部CSSライブラリを採用しているので併用してください。
またサンプルとしてデモ内でjQueryライブラリのパーツを使用していることがあります。

  • DEMO
  • Fit
  • Style
  • ろはにほへと
    ちりぬるを
  • わか

    よたれそ
    つねならむ
  • うゐの

    おくやま
    けふこえて
  • ろはにほへと
    ちりぬるを
  • わか

    よたれそ
    つねならむ
  • うゐの

    おくやま
    けふこえて
  • ろはにほへと
    ちりぬるを
  • わか

    よたれそ
    つねならむ
  • うゐの

    おくやま
    けふこえて
  • ろはにほへと
    ちりぬるを
  • わか

    よたれそ
    つねならむ
  • うゐの

    おくやま
    けふこえて
  • ろはにほへと
    ちりぬるを
  • わか

    よたれそ
    つねならむ
  • うゐの

    おくやま
    けふこえて

使い方

タイトル部分のインデントを入れたリストアイテム。
+-.llt-ti-+や+-.llt-txt-+は他のタグでも可能。

+-ul.lo-listTitle-+に+-.fit-+クラスを付けることでタイトルの幅を均一にします。
tableやgridレイアウト等の方がいいだろうけど、単調な場合は*-ul-*の記述の方が解析しやすいので作りました。

[data-style]属性を入れることで、入力値を値にした[list-style]を追加します。

たったこれだけの要素にこんなJS組んでるの?と自分で思うくらい費用対効果悪いです。
でもHTMLのマークアップは楽ちん。
  • HTML
  • CSS
  • Script
.lo-listTitle[data-style] {padding-left: 1.5rem;}
  .lo-listTitle:not([data-style]) .llt-li {
    display: flex;
    gap: 8px;
  }
  .llt-li {margin: 0 0 8px;}
  .llt-ti {font-weight: bold;}
$('.lo-listTitle[data-style]').each(function(){
    $('.llt-li',this).wrapInner('
'); $(this).css('list-style',$(this).data('style')); }); function lo_listTitle(){ $('.lo-listTitle.fit').each(function(){ if($(this).is(':hidden')){return true;} let $ti = $('.llt-ti',this); $ti.removeAttr('style'); let leng = $('.llt-li',this).length; for(let i = 0; i < leng+1; i++){ let wList = new Array(); $(this).find('.llt-ti').each(function(is){ wList[is] = $(this).width()+1; }); let maxW = Math.max.apply(null, wList); $(this).find('.llt-ti').css({'width':maxW+'px'}); } }); } $win.load(function(){ lo_listTitle(); });