html のコーディングについての質問です。


あることについて、要素(決定された)が複数あり
それをhtmlでリスト(ul li)を用い作成しようとしています。
デザインレイアウトの要件として、縦幅が決まっており、
要素は縦にならび横に折り返していくようにしたいと思っています。

こんな感じ
http://gyazo.com/fad2e629917429808a23d27e1ed1b37b

上記URLにあるような見た目をそのまま実現するだけなら、
3つのulにわけ、floatさせればできるのですが、
htmlのマークアップ上の話では、リストが3つに別れてしまい関連が弱待ってしまいます。

どうか適切な方法をおしえてください。

検証対象ブラウザは、IE7以上、他主要ブラウザ 最新バージョン

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/03/12 18:39:38
  • 終了:2012/03/19 18:40:15

回答(4件)

id:Lhankor_Mhy No.1

Lhankor_Mhy回答回数779ベストアンサー獲得回数2312012/03/13 13:12:44

ポイント50pt

スマートではありませんが、こんな感じではいかがでしょうか。IE7(IETester)、Firefox10にて確認済み。

<ul>
  <li>11111</li>
  <li>22222</li>
  <li>33333</li>
  <li>44444</li>
  <li>55555</li>
  <li>66666</li>
  <li>77777</li>
  <li>88888</li>
  <li>99999</li>
  <li>00000</li>
</ul>
ul{
    height:80px;
}
li{
    width:80px;
    height:20px;
}

li + li + li + li + li{
    margin-top: -80px;
    margin-left:80px;
}
li + li + li + li + li + li{
    margin-top: 0px;
}
li + li + li + li + li + li + li + li + li{
    margin-top: -80px;
    margin-left:160px;
}
li + li + li + li + li + li + li + li + li + li{
    margin-top: 0px;
}

サンプルはこちら。http://jsfiddle.net/TkGtt/
 
li要素の縦横長さが固定であることが条件ですが、要素の挿入削除に耐えます。

id:TransFreeBSD No.2

TransFreeBSD回答回数667ベストアンサー獲得回数2682012/03/13 13:32:25

ポイント50pt

書いているうちにこされた感もあるのですが、
スクリプトで後処理するのはどうでしょう?
とりあえずこういうのがありました。
http://code.hokypoky.info/multicol/
ただ、微妙なところもあるので分割するのも書いてみました。
http://jsfiddle.net/PSzxJ/

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
  <style type='text/css'>
    .col {
        list-style-type: circle;
        margin-left: 25px;
        margin-right:10px;
        float: left;
    }
  </style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var col = 3;
var li = $("#example li");

var start = 0;
var len = li.length;
while (start < len) {
    //var end = start + Math.ceil(len/col);
    var end = start + Math.ceil((len - start) / col--);
    li.slice(start, end).wrapAll('<ul class="col"></ul>');
    start = end;
}
});//]]>  
</script>
</head>
<body>
<ul id="example">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>
</body>
</html>
id:pacochi No.3

ぱこち回答回数247ベストアンサー獲得回数1122012/03/13 15:20:07

ポイント50pt

JavaScript を使っても大丈夫なら、はみ出してる li を新しく作った ul にしまい直す方法が使えるかもしれません。
http://jsfiddle.net/BzeSK/
li の高さが固定じゃなくても使えます。

あと、CSS の writing-mode を活用すれば JavaScript なしでも実現できたりします。
http://jsfiddle.net/2x27e/
うまくいかないブラウザが結構あるので (IE7 や Firefox など) 今回は使えないと思いますが、参考までに。

id:a-kuma3 No.4

a-kuma3回答回数4584ベストアンサー獲得回数19242012/03/19 14:19:23

ポイント50pt

ぼくも javascript でやってみました。
http://jsfiddle.net/a_kuma3/hSW8t/
動きが分かるように、onload ではなく、ボタンを押したときに段組みをするようにしてます。

段組みの処理をした後の HTML がこんな感じになってます。

<ul id="list">
<span class="LI_CONTAINER">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
  <li>たちつてと</li>
  <li>なにぬねの</li>
</span>
<span class="LI_CONTAINER">
  <li>はひふへほ</li>
  <li>まみむめも</li>
  ...
</ul>

LI の要素を囲んでいる SPAN は inline-block で幅を指定しました。
HTML 的には、ちょっと気持ち悪いことになってますが、段組みの処理が動いた後でも、ひとつの UL の中に LI 要素がまとまってるのがミソです。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません