レシピなんかに使えるリスト表示をCSSを使って綺麗に表現する方法
例えばこんな感じのリスト表示って、
たまぁ～に使いたくなりませんか？
- たまねぎ
- ２分の１個
- にんじん
- ３分の１本
- ピーマン
- １個
- 鶏むね肉
- 100グラム
- タマゴ
- ２個
- ケチャップ
- 大さじ２杯
- 塩胡椒
- 少々
- 愛情
- 小さじ１杯
記事のタイトルや上の例では、
イメージし易いように「レシピ」としましたけど、
結構色んな局面で使える表示だと思うんですよね。
これ、スペース連打で力業で表現しようと思えばできるんですが、
インデントを揃えるのって意外と難しくて、第一面倒です。
これをCSSを使って綺麗に表示する方法をご紹介しますねん。
タグはちょいと面倒なんですが、
ひな形を作っておけば楽チンですし、
CSSへは一度コードを書き足しておけばOKなので、
スペースを使って試行錯誤するよりも、
慣れればこっちの方が楽やと思います。
基本は「 dl 」要素を使ったリスト表示です
通常、この手のリストを表示するには、
「 dl 」ってのを使います。
具体的にはこんな感じ↓
<dt>たまねぎ</dt> <dd>２分の１個</dd>
<dt>にんじん</dt> <dd>３分の１本</dd>
<dt>ピーマン</dt> <dd>１個</dd>
<dt>鶏むね肉</dt> <dd>100グラム</dd>
</dl>
つまり、リストの左側（項目）を「 <dt> ～ </dt> 」で囲み、
リストの右側（説明）を「 <dd> ～ </dd> 」で囲み、
さらにその全体を「 <dl> ～ </dl> 」で囲むっちゅうことです。
「 dl 」要素を使ったリスト表示の落とし穴
が、しかし！
この「 dl 」要素を使ってリストを表示した場合、
普通にそのまま表示してみると・・・
↓こんな感じになっちゃうんですよね。
- たまねぎ
- ２分の１個
- にんじん
- ３分の１本
- ピーマン
- １個
- 鶏むね肉
- 100グラム
ちゃんと右側の「説明」部分は綺麗にインデントするんだけど、
項目との間に改行が入っちゃうんです。
ちと難しい話をすると、
「 dl 」要素に「 compact 」ちゅう属性をつけてやると、
狙い通りの表示、つまり・・・
項目と説明を１行で表示することも可能なんですが、
この「 compact 」属性ってのは、Web標準では非推奨タグだし、
一部のブラウザにしか対応していないので、
残念ながら実際に使うのは難しいんですよね。
そこで！
この「 dl 」リストをCSSを使って無理矢理、
「 compact 」属性を付けたかのような表示を実現してみよう！
ってのが今回のテーマなわけです。
CSSを使って「 dl 」リストに「 compact 」属性を付けたかのように表示する方法
難しい話よりも実際に見てもらった方が早いですね。
基本的なHTMLタグとCSSコードは次の通りです。
<dl>
<dt>たまねぎ</dt> <dd>２分の１個</dd>
<dt>にんじん</dt> <dd>３分の１本</dd>
<dt>ピーマン</dt> <dd>１個</dd>
<dt>鶏むね肉</dt> <dd>100グラム</dd>
</dl>
</div>
.compact {
margin:10px;
}
.compact dt {
float: left;
clear: left;
width: 90px;
}以下、簡単な解説入れときます。
.compact {
margin:10px;
}これは単にリスト周りのスペースを規定してるだけなので、
特にスペースなんて必要ない人は、必要ないっす。
（上の例だと「リストの上下左右に10pxずつスペースをあけれ」
ってことを規定してます。）
.compact dt {
float: left;
clear: left;
width: 90px;
}もちろん「float」と「clear」は、
項目と説明を同じ行に並ばせるために必修なわけですが、
実際に問題となるのは「width: 90px;」部分の数値ですね。
この「90px」が何を意味してるかって言うと・・・
この部分の幅を規定しています。
ですから、「項目」部分に多くのスペースを確保したい場合は、
この数値を大きくしてやってくださいな。
CSSで「項目」部分の「 width 」を決定してしまうことの弊害とその対策
とは言え、これはCSSでの規定なので、
リストごとに毎回調節してやるわけにはいきません。
（過去のリストにもこの数値が反映されちゃいますからね）
そこで！かなぁ～りのチカラワザですが、
僕はこんな感じで対処してるですよ。
.compact_60 {
margin:10px;
}
.compact_60 dt{
float: left;
clear: left;
width: 60px;
}
.compact_90 {
margin:10px;
}
.compact_90 dt{
float: left;
clear: left;
width: 90px;
}
.compact_120 {
margin:10px;
}
.compact_120 dt{
float: left;
clear: left;
width: 120px;
}つまり、「項目」部分の長さ（「 width 」）を、
60px、90px、120pxの３パターン用意して、
あらかじめ「compact」をクラス分けして規定しておきます。
で、項目の文字数に応じて最適な「compact」クラス、
例えば・・・
項目が３文字までの場合 → div class="compact_60"
項目が５文字までの場合 → div class="compact_90"
項目が８文字までの場合 → div class="compact_120"
って感じでマークアップしていくわけです。
ちなみに、この項目部分の「 width 」は、
フォントの大きさによっても全然変わってくるので、
ご自分のフォントサイズに応じて、
扱いやすい段階を作って設定してやると良いと思うです。
 アメブロカスタマイズ井戸端コミュ |