在宅ワークのリアルをベテランとビギナーにインタビュー>>

HTMLで組織図を作りたいと思っています。
テーブルタグは使用しないで、リストかボックスで組み合わせたいのですが、なかなか上手くいきません。
どんなタグが良いでしょうか?
アドバイスをお願いします。

※線は背景で画像を配置しますので、省いてください。

「HTMLで組織図を作成する方法」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (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>

組織図ってマークアップ難しいですね・・・
正直リストでは意味が違うような気がするのですが。

この回答への補足

参考にさせていただきます。
どうもありがとうございました。

補足日時:2011/01/19 23:15
    • good
    • 0
この回答へのお礼

listをdivで横に並べるように囲み、さらにそれをブロックのように積んでいくことで、うまくいけました。
皆様のアドバイスのお陰です。
どうもありがとうございました。

お礼日時:2011/01/19 23:17

罫線文字を使用すれば作成できますが



私の場合 フォント指定は、font:18px/18px "MS 明朝",serif; ですが

フォントは、2で割れる数を指定のこと 文字間隔は、ゼロにすること

左側がSfariで右側がFirefox参照の画像を添付します
「HTMLで組織図を作成する方法」の回答画像4

この回答への補足

発想は面白いですが、ちょっと違いますね。
どうもありがとうございました。

補足日時:2011/01/19 10:29
    • good
    • 0

リストは面倒w・・・参考までによかったらどうぞw(xhtmlでないとだめみたいです)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<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>

この回答への補足

お疲れ様です。
参考になれました。
どうも有難うございました。

補足日時:2011/01/19 10:28
    • good
    • 0

こんばんは。



DIVで
position:absolute;
で頑張る・・・。

この回答への補足

なるほどですね。
参考にします。
どうもありがとうございました。

補足日時:2011/01/19 10:27
    • good
    • 0

imageタグ。


絵を描いて貼り付けるのが一番。

この回答への補足

すみません、テーブルタグとimageタグは使用しないことと言われました。

補足日時:2011/01/18 17:16
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


人気Q&Aランキング