ジョギングしすぎて、足の裏に「ジョギング・ダコ」というのができてしまった、ユゲタです。
本日のIT謎掛け
「インデント」とかけまして・・・ 「やんちゃな子供のいる家庭の玄関先の靴」とときます。 そのココロは・・・？ バラバラになっていると、キチンと揃えたくなります。WEBページを作ってみたら、インデントが必要になったことあるよね
リスト表示をするような表示の場合に、リストが選択されている場合に、頭にマークを付けたい場合など、インデントをつけたくなることがあります。Select ...
--
Apple
Orange
Banana
--
例えば、こんな感じで、リスト表示されていて、どれか1つが選択されるような仕組みの場合、選択した文字列にマークを付けると
Selected
--
Apple
* Orange
Banana
--
こういう感じになります。
できれば、
Selected
--
Apple
* Orange
Banana
--
インデントを付けて、リストのデコボコを無くしたいですよね。
そんな時は、いくつかやり方があるので、わからない人のためにご紹介したいと思います。
文字列で埋める
単純ですが、インデントとして使いたい文字数分のスペースを入れるといいかと思いがちですが、htmlのレンダリングで、連続して並ぶスペースは１つにまとめられてしまいます。 しかし、リストの親タグに"white-space:pre;"をcssでセットしておけば、インデントとして利用することは可能です。 めんどくさい点としては、文字数を厳密にコントロールしなければいけないという点ですね。 phpなどの言語では、sprintという、文字数コントロールなどができる命令がありますが、javascriptでこれをやろうとすると結構しんどいコードになります。 ただ、簡易にセットするには悪い方法ではないので、１つの方法として覚えておきましょう。選択を表す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"でもいいのですが、色々と装飾をすることになると、こちらのほうが都合がいい場合が多いので、個人的には便利な方を設置するようにしています。 他にもいろいろな選択表示方法があるかと思いますが、目的のデザインに合った表示方法を身に着けておくと、いざプログラミングをする時に、迷うことがなくなるので、是非習得しておきましょう。
