【CSS】でインデントを行う方法｜サンプルコード付き

 

 

 

 

こんな風に考えている人に向けて、この記事では解説しています。

CSS初心者の方には、特におすすめの記事になっています。

 

 

CSSのインデントについて

 

margin-leftを用いたインデント

.style {
  margin-left: 30px;
}

margin-leftは本来余白を作るために、用いられるプロパティです。

しかし要素の左側に余白が生まれる事により、インデントされるように見えるため、margin-leftを使ってインデントを行う事も可能にです。

 

text-indentを用いたインデント

text-indentはインデントを行うためのプロパティです。

.style {
  text-indent: 1em;
}

プロパティに値を代入する事で、インデントを行う事ができます。

 

インデントを行う関数

では次に、インデントを行う関数についてです。

margin-leftで要素の左側に余白を作る方法と、text-indentプロパティを用いた2つのやり方を紹介していきます。

 

 

クリックで1度だけインデントを行う関数(margin-left)

　　<div class="Wrap_Indent_y">
      <ul class="Indent_y1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

　　<script type="text/javascript">
　　　　$('.Indent_y1 li').click(function(){
        $(this).css('margin-left','30px');
      });
    </script>

 

この関数では、<ul class="Indent_y1">内にある<li>をセレクタ指定して、クリックによってmargin-leftを30pxに指定しています。

 

2回目以降のクリックでもインデントを行う関数（margin-left）

<div class="Wrap_Indent_y">
      <ul class="Indent_y2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>

    <script type="text/javascript">
      $(document).on('click','.Indent_y2 li',function(){
        var ML_y =$(this).css('margin-left').slice(0,-2);
        ML_y = parseInt(ML_y) + 30;
        $(this).css('margin-left',ML_y);
      });
    </script>

 

ここでは複数回クリックイベントを取得できるように、ファイル全体（document）に存在する<ul class="Indent_y2">内にある<li>をセレクタ指定しています。

クリックによって、ML_y変数に取得したmargin-leftを代入し、30px加算して再度、margin-leftに反映させています。

 

text-indentプロパティを使ってインデントを行う関数

　　<div class="Wrap_Indent_y">
      <ul class="Indent_y3">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
　　<script type="text/javascript">
　　$('.Indent_y3 li').click(function(){
        $(this).css('text-indent','1rem');
      });
    </script>

 

ここではクリックした<li>要素のtext-indentプロパティに、1rem分のインデントを付与しています。

 

まとめ

CSSのインデントについて解説してきました。

場合によっては他にもpadding-leftを使ったり、leftプロパティを使った方法でもインデントできそうですね。

 

最後まで読んでいただき、ありがとうございました(*‘∀‘)