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

2020年5月5日

CSS テクノロジー プログラミング

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

本日のIT謎掛け

「インデント」とかけまして・・・ 「やんちゃな子供のいる家庭の玄関先の靴」とときます。 そのココロは・・・? バラバラになっていると、キチンと揃えたくなります。

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

リスト表示をするような表示の場合に、リストが選択されている場合に、頭にマークを付けたい場合など、インデントをつけたくなることがあります。 Select ... -- Apple Orange Banana -- 例えば、こんな感じで、リスト表示されていて、どれか1つが選択されるような仕組みの場合、選択した文字列にマークを付けると Selected -- Apple * Orange Banana -- こういう感じになります。 できれば、 Selected -- Apple * Orange Banana -- インデントを付けて、リストのデコボコを無くしたいですよね。 そんな時は、いくつかやり方があるので、わからない人のためにご紹介したいと思います。

文字列で埋める

単純ですが、インデントとして使いたい文字数分のスペースを入れるといいかと思いがちですが、htmlのレンダリングで、連続して並ぶスペースは1つにまとめられてしまいます。 しかし、リストの親タグに"white-space:pre;"をcssでセットしておけば、インデントとして利用することは可能です。 めんどくさい点としては、文字数を厳密にコントロールしなければいけないという点ですね。 phpなどの言語では、sprintという、文字数コントロールなどができる命令がありますが、javascriptでこれをやろうとすると結構しんどいコードになります。 ただ、簡易にセットするには悪い方法ではないので、1つの方法として覚えておきましょう。

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

そもそも、インデントなんて必要なくて、選択されている文字の行に対して、背景色をつけてあげればいいだけです。 <p>Apple</p> <p style='background-color:red;color:white;'>Orange</p> <p>Banana</p> * 結果表示

Apple

Orange

Banana

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

cssの疑似要素で対応

細かな設定やデザインなどにも対応できるのが、疑似要素を使った方法です。 <p class="list">Apple</p> <p class="list" data-selected="on">Orange</p> <p class="list">Banana</p> <style> p.list:before{ content:""; display:inline-block; width:30px; text-align:right; margin-right:10px; } p.list[data-selected="on"]:before{ content:"*"; } </style> * 結果表示

Apple

Orange

Banana

widthの幅がインデントのサイズになります。 桁数などを考慮して設置しましょう。 data-selectedのbefore疑似要素のcontentに、選択マークを記述できますが、ここを画像にすることも可能です。 "url(%画像パス%)"としてあげることでできます。 また、背景色をコントロールしたり、cssに委ねるだけで、できる範囲が限りなく広がります。 ポイントとしては、displayを"inline-block"にして、リストに対して横並びにできるようにすることです。 "inline"でもいいのですが、色々と装飾をすることになると、こちらのほうが都合がいい場合が多いので、個人的には便利な方を設置するようにしています。 他にもいろいろな選択表示方法があるかと思いますが、目的のデザインに合った表示方法を身に着けておくと、いざプログラミングをする時に、迷うことがなくなるので、是非習得しておきましょう。