リストの最近のブログ記事
例えばニュースリリースなどには、定義リスト（dl要素）がよく使われます。その際、日付と記事が横並びになったものもよく見受けられます。
定義リストを横並びにするには、｢float:left;｣を利用して回り込みをさせます。また、汎用性の高い横並び定義リストを作成するために、spanタグやdivタグを併用します。
基本となる（X)HTMLコード、CSSコードは以下のとおりです。
尚、｢* html｣ハックを使用しているのは、hasLayoutをtrueにして｢-3pxずれてしまう｣というIE6のバグを回避するためです。
(X)HTMLコード
<dl class="list">
<dt><span>2008-05-14</span></dt>
<dd>
<div>
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
</div>
</dd>
<dt><span>2008-05-14</span></dt>
<dd>
<div>
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん<br />
</div>
</dd>
</dl>CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list dt {
float:left;
width:10em;
}
dl.list dd {
margin-left:0;
padding-left:10em;
}折角ですので、デザインもいくつか紹介します。
テーブルの枠組みタイプ
それぞれの要素を線で囲んでテーブルみたいに見せてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list {
border:1px solid #999;
border-top:0;
background:#f1f1f1;
}
dl.list dt {
float:left;
width:10em;
border-top:1px solid #999;
padding-top:10px;
padding-left:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dd {
margin-left:10em;
padding:10px;
border-top:1px solid #999;
border-left:1px solid #999;
background:#ffefff;
}横線タイプ
dt部分（左側）とdd部分（右側）が横線でつながったように見せてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list {
border-bottom:1px solid #999;
}
dl.list dt {
float:left;
width:10em;
border-top:1px solid #999;
padding-top:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dd {
margin-left:10em;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-top:1px solid #999;
}日付にワンポイントタイプ（１）
dt部分（左側）の日付にアクセントを加えてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list {
border-bottom:1px solid #999;
}
dl.list dt {
float:left;
width:10em;
border-top:1px solid #999;
padding-top:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dd {
margin-left:10em;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
border-top:1px solid #999;
}日付にワンポイントタイプ（２）
dt部分（左側）の日付にアクセントを加えてみましょう。
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
- 2008-05-14
-
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん
CSSコード
* html body dl.list dd div{
display:inline-block;
}
dl.list dt {
float:left;
width:10em;
padding-top:10px;
padding-bottom:0;
padding-right:0;
}
dl.list dt span{
position:relative;
border-bottom:3px double #bf0f0b;
}
dl.list dd {
margin-left:10em;
padding-top:10px;
padding-bottom:10px;
padding-right:10px;
}IE6において、高さが指定された要素内にあるインライン要素にpaddingやborderが指定されているとき親要素をはみ出している部分が消えてしまう、という現象が起きるので｢position:relative;｣を指定してバグを回避します。
インライン要素に指定したパディングやボーダーの上下が消える - [IE(Win)] ぺんたん info
参考URL
この記事は以下のコラムを要約しました。
liタグでメニューを横並びにする方法は主に２つあります。
１．floatプロパティを使う
横並びをするには、floatプロパティを用いる方法が一般的です。ただし、いろいろと問題があります。
まず、リストタグの次にコンテンツがある場合、そのコンテンツはリストの横に回りこまれてしまうので、回り込みを解除しなければなりません。
また、floatプロパティを使うと親要素（ここではulタグ）の内容が0になってしまい、例えば、ulタグに背景やborderを適用しようとしてもうまく表示できない場合があります。この解決方法として、｢clearfix｣というコードの書き方があります。
あと、注意しなければならないのが、リストマークです。この方法ではIEではリストマークが消えているように見えるのですが、Firefoxなどの他のブラウザではきちんとリストマークが見えてしまっています。リストマークを表示したくない場合は｢list-style:none;｣を指定しましょう。
以上をふまえてコードは以下のようになります。
(X)HTMLコード
<ul class="menu">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>CSSコード
ul.menu {
margin:0;
padding:0;
}
ul.menu li {
float:left;
list-style:none;
}
/* モダンブラウザ（Firefox Opera Safari）対策 */
ul.menu:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
font-size:0;
}
/* Win版IE7とMac版IE5対策 */
ul.menu{
display:inline-block;
}
/* Win版IE5および6対策 */
/* Hides from IE-mac \*/
* html ul.menu{
height:1px;
}
ul.menu{
display:block;
}
/* End hide from IE-mac */２．inline要素を使う
本来のリストが縦並びになるのは、ブラウザのデフォルトCSSにより、liタグのdisplayプロパティが｢block要素｣になっているためです。よって、displayプロパティを｢inline要素｣にすれば横並びになります。
しかし、注意しなければならないことがあります。
ブラウザによっては、なぜかulタグの上下やliタグの間に謎の隙間が空いてしまう場合があります。これはコードの書き方によるのですが、改行を半角スペースに変換してしまうようです。
この解決方法としては、コードを1行で書いてしまうか、改行の際に｢<!--(改行)-->｣というふうに書くかの2つがあります。
以上をふまえて、ソースコードは以下のようになります。
(X)HTMLコード
<ul class="menu"><!--
--><li><a href="#">MENU1</a></li><!--
--><li><a href="#">MENU2</a></li><!--
--><li><a href="#">MENU3</a></li><!--
--><li><a href="#">MENU4</a></li><!--
--><li><a href="#">MENU5</a></li><!--
--></ul>CSSコード
ul.menu {
margin:0;
padding:0;
}
ul.menu li {
display: inline;
}テキストをリスト形式で表示する場合、リストマークを工夫すると可読性が上がります。 ブラウザのほうでも様々なリストマークが用意されていますが、独自に作成した画像をリストマークとして使用することも可能です。
｢list-style-image｣プロパティで画像を指定することも可能ですが、画像によっては位置がずれてしまって美しくない場合があります。
そこで、CSSを駆使してリストマークを美しく配置する方法を紹介します。
テキストが1行の場合
まず、標準で表示されるリストマークを非表示します。
CSSコード
ul {
list-style:none;
}そして、backgroundプロパティで画像とその位置を指定します。その際、画像が繰り返さないように指定します。
CSSコード
li {
background:url(list-image.gif) 0 50% no-repeat;
}そのままではテキストと画像が重なってしまいますので、テキストの位置をpaddingで右側に移動させます。空けるサイズは、画像の大きさ＋文字の0.5個分くらいが適当です。実際にブラウザで確認しながら様子を見てみましょう。
CSSコード
li {
padding-left:10px;
}以上をふまえて、CSSをまとめると以下のように記述できます。
CSSコード
ul {
list-style:none;
}
li {
background:url(list-image.gif) 0 50% no-repeat;
padding-left:10px;
}テキストが2行以上にわたる場合（一般的な方法）
問題は、テキストが2行以上ある場合、上記の方法ではテキストの真ん中にリストマークが表示されるため、不恰好な状態になります。できれば、1行目に合わせてリストマークをしたいですよね。
一般的にされている方法は、上記ではbackgroundプロパティで縦方向にセンタリングを指定しましたが、上から数pxずらして表示するという方法です。
CSSコード
ul {
list-style:none;
}
li{
background:url(list-image.gif) 3px 50% no-repeat;
padding-left:10px;
}ただしこれでは文字サイズを変更した場合、少しずれてしまいます。
テキストが2行以上にわたる場合（:first-letter擬似要素を使う）
文字サイズを変更しても1行目の真ん中にリストマークがくるようにしたいですよね。そんなときは、｢:first-letter擬似要素｣を使用することで解決します。
｢:first-letter擬似要素｣は、テキスト1文字目のスタイルを設定できるものです。
しかしながら、古いブラウザには対応していないので注意が必要です。Windowsでは、IE5.5以上、Firefox全て、NN6以上、Opera6以上、MacではSafariには対応しているようです。
また、IE6と7は｢:first-letter擬似要素｣に対応しているにも関わらず、この方法がなぜか効きません。現在調査中ですが、どうやらbackgroundで指定した縦方向50%の位置が1行目の真ん中ではなくliの真ん中にあるようです。background-imageやborderを指定したときの挙動は他のブラウザと同じなのになぜbackground-positionだけ異なるのか不思議です。
CSSコード
li:first-letter {
background:url(list-image.gif) 0 50% no-repeat;
padding-left:20px;
}
li {
text-indent:-20px;
}
