「liタグの中にddが複数ある際の改行処理～インデントを1つ目のddに揃えたい～」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
liタグの中にdtとddが入っており、ddが複数ある際にddが改行された際にもddの一つ目のインデントに合わせたい場合どうすればよいでしょうか。7月14日記事
~
~
イメージ
#image(width=500,menulist.png)
うわぁ。カルボ&color(red){ラーナ}になってる・・・・。ご了承ください。
~
~
目次
#contents
~
~
----
~
*構造のイメージ
おそらく検索してきてくれた方は次のようなイメージをもっているのではないでしょうか？
<li><dl><dt>大分類1</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li>
<li><dl><dt>大分類2</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li>
<li><dl><dt>大分類3</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li>
これでは、&color(red){対応できません。}
~
~
*考え方を変える
ulタグのCSSは長さを指定できたりするので、ulタグをdd内にもってくるようにします。
<dl>
<dt>大分類1</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd>
<dt>大分類2</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd>
<dt>大分類3</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd>
</dl>
~
~
*コード実装
わかりやすいように色を付けておきました。
~
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>メニューリスト</title>
</head>
<body>
<div id="menu">
<dl>
<dt>パスタ</dt>
<dd>
<ul>
<li>カルボラーナ</li>
<li>ペペロンチーノ</li>
<li>トマトクリームパスタ</li>
</ul>
</dd>
<dt>ピザ</dt>
<dd>
<ul>
<li>モッァレラピザ</li>
<li>サラミのピザ</li>
<li>ブロッコリーのピザ</li>
<li>ベーコンピザ</li>
<li>アンチョビのピザ</li>
<li>アスパラガスのピザ</li>
</ul>
</dd>
<dt>デザート</dt>
<dd>
<ul>
<li>アイスクリーム</li>
<li>シャーベット</li>
<li>ティラミス</li>
<li>プリン</li>
</ul>
</dd>
</dl>
</div>
CSS部
@charset "utf-8";
/* CSS Document */
*{
font-size:18px;
}
#menu{
margin: 10px auto;
width: 800px;
height: 180px;
border: 1px solid #000;
}
#menu dt{
float:left;
clear:both;
width: 100px;
background: #f00;
text-align:center;
padding: 9px 9px;
margin:3px;
}
#menu dd{
float:left;
background: #EEEEEE;
}
#menu ul{
width:600px;
}
#menu li{
display:inline-block;
padding: 9px 9px;
margin:3px;
background: #FF0;
}
ulタグの幅を指定し、liの方はdisplay:inline-block;にするか、display:inline;+white-space:nowrap;にするかはどちらでもいいです。
~
~
*まとめ
ddが複数ある場合、長さを指定できないので、dlとulの構造を逆にして、ulの方の長さを指定すればできます。構造上問題はないと思います。（文法チェックしてみたがエラーはなかった）
~
~
以上
liタグの中にdtとddが入っており、ddが複数ある際にddが改行された際にもddの一つ目のインデントに合わせたい場合どうすればよいでしょうか。7月14日記事
~
~
イメージ
#image(width=500,menulist.png)
うわぁ。カルボ&color(red){ラーナ}になってる・・・・。ご了承ください。
~
~
目次
#contents
~
~
----
~
*構造のイメージ
おそらく検索してきてくれた方は次のようなイメージをもっているのではないでしょうか？
<ul>
<li><dl><dt>大分類1</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li>
<li><dl><dt>大分類2</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li>
<li><dl><dt>大分類3</dt><dd>小分類1</dd><dd>小分類2</dd><dd>小分類3</dd></dl></li>
</ul>
これでは、&color(red){対応できません。}
~
~
*考え方を変える
ulタグのCSSは長さを指定できたりするので、ulタグをdd内にもってくるようにします。
<dl>
<dt>大分類1</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd>
<dt>大分類2</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd>
<dt>大分類3</dt><dd><ul><li>小分類1</li><li>小分類2</li><li>小分類3</li></ul></dd>
</dl>
~
~
*コード実装
わかりやすいように色を付けておきました。
~
HTML部
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>メニューリスト</title>
</head>
<body>
<div id="menu">
<dl>
<dt>パスタ</dt>
<dd>
<ul>
<li>カルボラーナ</li>
<li>ペペロンチーノ</li>
<li>トマトクリームパスタ</li>
</ul>
</dd>
<dt>ピザ</dt>
<dd>
<ul>
<li>モッァレラピザ</li>
<li>サラミのピザ</li>
<li>ブロッコリーのピザ</li>
<li>ベーコンピザ</li>
<li>アンチョビのピザ</li>
<li>アスパラガスのピザ</li>
</ul>
</dd>
<dt>デザート</dt>
<dd>
<ul>
<li>アイスクリーム</li>
<li>シャーベット</li>
<li>ティラミス</li>
<li>プリン</li>
</ul>
</dd>
</dl>
</div>
CSS部
@charset "utf-8";
/* CSS Document */
*{
font-size:18px;
}
#menu{
margin: 10px auto;
width: 800px;
height: 180px;
border: 1px solid #000;
}
#menu dt{
float:left;
clear:both;
width: 100px;
background: #f00;
text-align:center;
padding: 9px 9px;
margin:3px;
}
#menu dd{
float:left;
background: #EEEEEE;
}
#menu ul{
width:600px;
}
#menu li{
display:inline-block;
padding: 9px 9px;
margin:3px;
background: #FF0;
}
ulタグの幅を指定し、liの方はdisplay:inline-block;にするか、display:inline;+white-space:nowrap;にするかはどちらでもいいです。
~
~
*まとめ
ddが複数ある場合、長さを指定できないので、dlとulの構造を逆にして、ulの方の長さを指定すればできます。構造上問題はないと思います。（文法チェックしてみたがエラーはなかった）
~
~
以上
