List Title

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

詳しい導入事例は導入方法を参照してください。

  • DEMO
  • Fit
  • Style
  • 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();
  });