-
ID:pdk8R3 さんの質問

暇なので昔やったコーディングで悩んだものを見直しています。
デザイナーから以下のような構成のカンプが上がってきました。
http://i.imgur.com/WVcCOKI.jpg

まず、こういのが思い浮かびますが
http://jsfiddle.net/s34sS/1/
floatで頑張っても無理そうです。
当時はテンパって謎のtable組してしまいましたが
こんな感じでしょうか？
リストの連続性が失われるのがなんだかさびしい。
http://i.imgur.com/YrkIIYF.jpg

皆様ならどうするでしょう？
もっとスマートな方法があったら教えてください。
コーディングはいつも時間との戦いで大変です。。

みんなの回答 5 件

ID:FxUTP3 さんの回答

CSS3になっちゃうけど、column-widthを使えば出来ます。
ttp://www.htmq.com/css3/column-width.shtml
ID:skfNGD

ちなみにこんな感じ
ttp://jsfiddle.net/s34sS/28/

ID:skfNGD

各リストごとに、行数が異なる点を規則だって作ることは出来なそうなので、そこだけ力技。

ID:pdk8R3

いろいろ試していて遅くなりましたが、どうなんでしょう…機能自体はいい感じです。
columnsで進めてみました。
ttp://jsfiddle.net/s34sS/37/

-web-kitではcolumn-fill:balanceが未対応の為他と表示がずれる。
今回はcolumn-fill:autoを入れるだけでおｋでした。

column-gapがちょっとめんどくさい。

ベンダープレフィックスてんこ盛り。

IE10まで全くの未対応。

IEを考えると特にまだちょっと(4年くらい？)なーって感じでした。
コメ主さんはJSとかで対応させて実用されてるんでしょうか？

ID:J8lWlZ さんの回答

まず枠に囲われたものはliでもdivでも対応できる。
枠の中、titleとリスト要素はそれぞれdivなりliで囲い、囲った要素にdisplay: inline-blockかfloatをかけて、中の物はブロック要素。
枠の中のリスト要素で左右にずれているのはulをネストさせてpaddginでもmarginでもかければ良い。
ID:Qizx0S さんの回答

よくフッターにあるサイトマップみたいな感じだね。
自分の場合だったらdl>dt+ddまでは一緒で、ulは列ごとに設置せず横一列で組むようにする。（コードが簡潔に書けるし、メンテナンスしやすくなるため）
cssはネガティブマージンとfloatで。これだと文字拡大等されても問題なく動作するし、幅広いブラウザに対処できる。
ID:Qizx0S

補足：上記のCSSの説明はul>liの並列設置のときです。

ID:pdk8R3

御察しの通りサイトマップです。
列ではなく行、と言うとこういうことでしょうか。
序列を意識するとしっくり来ないんですよね。

文字拡大時の問題についてはID:FxUTP3lFiHpさんの例も対象かな？
ちょっと調べ中です。

<style>
ul:after {content:"";clear:both;display:block;}
li{float:left;}
</style>

<dl>
<dt>title2</dt>
<dd>
<ul">
<li>item1</li>
<li>item3</li>
<li>item5</li>
</ul>
<ul>
<li>item2</li>
<li>item4</li>
</ul>
</dd>
</dl>

ID:Qizx0S

あ、なるほど！カンプ勘違いしてました。
縦方向に連番のリストが連続してるけど、どうしたらスマートにコーディングできるのか...ですね。

CSSだけでulを区切らずに実現するなら、最初の方が提示してるようにcolumn-width,column-countのプロパティを使う。
そうでなければ、JSじゃないでしょうか。
JSなら動的にulを区切ってやってfloat,inline-block,table-cellあたりで並べれば意図したレイアウトになるんじゃないかと。
ただJS読み込まれるまでがカッコ悪い感じになるんで、特別な理由がない限り、直打ちで区切ったほうが良いような気がします。

ID:T9DCRY さんの回答

何が問題なのかわかんないな。
fiddleを見る限り、トピ主のコードへの疑問点。

  • なぜclassを使ってルールを作らないの?
  • このケースで、dlを使って構造化する理由は?
  • レイアウトができればアウトラインとかどうでもいいの?
ID:pdk8R3

問題はどのようにして最初のカンプのような形に効率的に、標準的に、スマートな感じでリストを配置するか、という事です。
dlを使う理由はdivでクラス付けするよりシンプルで可読性が良いことから
定義リストの意味から大きく外れない限り積極的に使っています。
アウトラインはタイトルにh1等使えということでしょうか？
もう少し具体的にしてくださると助かります。

ID:T9DCRY
  • 例の場合、以下の様なシンプルな構造でいけるんだけど、dlで敢えて複雑化する意味がわからないし、アウトラインも取りにくい。アウトラインが文書全体を示しているのに対し、dlはその部分だけなんとなく意味のあるタグにまとまっているだけのように見える。
  • html5に則るなら、アウトラインを意図したタグ(articleなど)があるし、html5でないならhタグと階層を意識してのアウトラインということになるね。
  • css3を使えばよりシンプルに書けるけど、使わなかったとしてもclassでルール作るだけ。
  • 例のレイアウトに関しては、floatでもpositionでもなんとでもできるはず。

<section>
　<h1>見出し1</h1>
　<article class="hoge">
　　<h2>見出し2</h2>
　　<ul>
　　　<li>リスト1</li>
　　　<li>リスト2</li>
　　　<li>リスト3</li>
　　</ul>
　　<ul>
　　　<li>リスト1</li>
　　　<li>リスト2</li>
　　　<li>リスト3</li>
　　</ul>
　</article>
　<article class="hoge">
　　・・・
　</article>
</section>

<style>
/*1階層目のリスト共通*/
.hoge > ul{

}
/*1つめのリスト*/
.hoge > ul:nth-of-type(1){

}
/*2つめのリスト*/
.hoge > ul:nth-of-type(2){

}
/*3つめのリスト*/
.hoge > ul:nth-of-type(3){

}
/*h2に続くリスト*/
.hoge > h2+ul{

}
</style>

ID:HjU2Kw さんの回答

JavaScriptやjQueryで動的にレイアウト制御すれば、
HTML自体は以下のようなシンプルな構造でもぜんぜんいける。

<h1>タイトル1</h1>
<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>

<h1>タイトル2</h1>
<ul>
<li>あああ</li>
<li>いいい</li>
<li>ううう</li>
</ul>
最終更新日:2014-05-28 (3,489 views)

関連するトピックス

ページ上部に戻る