- ベストアンサー
HTMLで組織図を作成する方法
HTMLで組織図を作りたいと思っています。 テーブルタグは使用しないで、リストかボックスで組み合わせたいのですが、なかなか上手くいきません。 どんなタグが良いでしょうか？ アドバイスをお願いします。 ※線は背景で画像を配置しますので、省いてください。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
全角スペースなので変換してください。 <style> ol,ul,p{ margin:0; padding:0; list-style:none; } em{ display:none; } li{ overflow:hidden; } p{ float:left; } ul{ float:left; } </style> <h3><strong>〇〇</strong> 組織図</h3> <ol> <li><strong>〇△</strong></li> <li><strong>〇□</strong></li> <li> <p><strong>〇●</strong></p> <p><em>〇●内の...</em></p> <ul> <li>●〇</li> <li>●△</li> <li>●□</li> </ul> </li> <li> <p><strong>〇▲</strong></p> <p><em>〇▲内の...</em></p> <ul> <li>▲〇</li> <li>▲△</li> </ul> </li> <li> <p><strong>〇■</strong></p> <p><em>〇■内の...</em></p> <ul> <li>■〇</li> </ul> </li> </ol> 組織図ってマークアップ難しいですね・・・ 正直リストでは意味が違うような気がするのですが。
その他の回答 (4)
- w7test
- ベストアンサー率0% (0/1)
リストは面倒ｗ・・・参考までによかったらどうぞｗ（xhtmlでないとだめみたいです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style> * {margin:0px;padding:0px;font-size:15px;} ul {list-style-type: none;width:220px;} li { float:left;text-align:center;background-color:yellow; margin:10px 10px 10px 0px;width:90px;height:20px;display:block; } li.right{margin-left:90px;} li.long {width:190px;} li.step2{margin-top:80px;} li.step1{margin-top:50px;} </style> </head> <body> <ul><li class="long">0 <ul><li class="long">1 <ul><li>2-1(2l) <ul><li class="step2">2-1-1(5l) <ul><li class="step1">2-1-1-1(7l)</li><li class="step1">2-1-1-2(7r)</li></ul></li> <li class="step2">2-1-2(5r)<ul><li>2-1-2-1(6r)</li></ul></li></ul></li> <li>2-2(2r)<ul><li>2-2-1(3r)<ul><li>2-2-1-1(4r)</li></ul></li></ul></li></ul></li></ul></li></ul> </body> </html>
補足
お疲れ様です。 参考になれました。 どうも有難うございました。
- taka451213
- ベストアンサー率47% (436/922)
こんばんは。 DIVで position:absolute; で頑張る・・・。
補足
なるほどですね。 参考にします。 どうもありがとうございました。
- OKWavex
- ベストアンサー率22% (1222/5383)
imageタグ。 絵を描いて貼り付けるのが一番。
補足
すみません、テーブルタグとimageタグは使用しないことと言われました。
お礼
listをdivで横に並べるように囲み、さらにそれをブロックのように積んでいくことで、うまくいけました。 皆様のアドバイスのお陰です。 どうもありがとうございました。
補足
参考にさせていただきます。 どうもありがとうございました。