プログラミング

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

投稿日:

 

CSSでインデントはどうやって作るの?

 

text-indentプロパティを使えばインデントができるの?

 

インデントを行うサンプル関数ないかな?

 

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

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

 

 スポンサーリンク

 

 

CSSのインデントについて

 

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

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

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

 

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

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

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

 

インデントを行う関数

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

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

 

 スポンサーリンク

 

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

  • 1
  • 2
  • 3

 

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

 

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

  • 1
  • 2
  • 3

 

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

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

 

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

  • 1
  • 2
  • 3

 

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

 

まとめ

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

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

 

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

 

 


あなたにおすすめの記事

-プログラミング

Copyright© もしだい.com , 2019 All Rights Reserved.