[css] LISTタグを使わずに、インデントを揃える方法

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

ジョギングしすぎて、足の裏に「ジョギング・ダコ」というのができてしまった、下駄です。
 

本日のIT謎掛け。
 

「インデント」とかけまして、
 

「やんちゃな子供のいる家庭の玄関先の靴」とときます。
 

そのココロは・・・?
 

バラバラになっていると、キチンと揃えたくなります。

WEBページを作ってみたら、インデントが必要になったことあるよね

リスト表示をするような表示の場合に、リストが選択されている場合に、頭にマークを付けたい場合など、インデントをつけたくなることがあります。
 

 

例えば、こんな感じで、リスト表示されていて、どれか1つが選択されるような仕組みの場合、選択した文字列にマークを付けると
 

 

こういう感じになります。
 

できれば、
 

 

こうしたいですよね。
 

そんな時は、いくつかやり方があるので、わからない人のためにご紹介したいと思います。

文字列で埋める

単純ですが、インデントとして使いたい文字数分のスペースを入れるといいかと思いがちですが、
 

htmlのレンダリングで、連続して並ぶスペースは1つにまとめられてしまいます。
 

しかし、リストの親タグに”white-space:pre;”をcssでセットしておけば、インデントとして利用することは可能です。
 

めんどくさい点としては、文字数を厳密にコントロールしなければいけないという点ですね。
 

phpなどの言語では、sprintという、文字数コントロールなどができる命令がありますが、javascriptでこれをやろうとすると結構しんどいコードになります。
 

ただ、簡易にセットするには悪い方法ではないので、1つの方法として覚えておきましょう。

選択を表すUIならBGカラー

そもそも、インデントなんて必要なくて、選択されている文字の行に対して、背景色をつけてあげればいいだけです。
 

 

* 結果表示
 

Apple

Orange

Banana

 

確かにインデントを使わなくても選択感はでます。
 

cssの疑似要素で対応

細かな設定やデザインなどにも対応できるのが、疑似要素を使った方法です。
 

 

* 結果表示
 

Apple

Orange

Banana

 

widthの幅がインデントのサイズになります。
桁数などを考慮して設置しましょう。
 

data-selectedのbefore疑似要素のcontentに、選択マークを記述できますが、ここを画像にすることも可能です。
“url(%画像パス%)”としてあげることでできます。
 

また、背景色をコントロールしたり、cssに委ねるだけで、できる範囲が限りなく広がります。
 

ポイントとしては、displayを”inline-block”にして、リストに対して横並びにできるようにすることです。
“inline”でもいいのですが、色々と装飾をすることになると、こちらのほうが都合がいい場合が多いので、個人的には便利な方を設置するようにしています。
 

他にもいろいろな選択表示方法があるかと思いますが、目的のデザインに合った表示方法を身に着けておくと、いざプログラミングをする時に、迷うことがなくなるので、是非習得しておきましょう。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です