HTMLで組織図を作成する方法

解決済

質問者：nkmyr
質問日時：2011/01/18 15:12
回答数：5件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

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

「作成図」に関するQ&A：家系図作成のため、戸籍謄本を個人が法務局に請求することはできますか？

さらに表示

「HTML 作成」に関するQ&A： HTMLでのWebサイト作成について

「リストタグ」に関するQ&A：リストタグを横並びにする方

「UL 意味」に関するQ&A： ul の意味が分かりません

「リスト意味」に関するQ&A：リストバンドの意味

「PAD 図」に関するQ&A： PAD図の書き方

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： metametamu
回答日時：2011/01/19 11:43

全角スペースなので変換してください。

この回答への補足

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

補足日時：2011/01/19 23:15

通報する

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.4

回答者： k0021
回答日時：2011/01/19 08:25

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

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

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

左側がSfariで右側がFirefox参照の画像を添付します

この回答への補足

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

補足日時：2011/01/19 10:29

通報する

- 0
- 件

通報する

No.3

回答者： w7test
回答日時：2011/01/18 19:17

リストは面倒ｗ・・・参考までによかったらどうぞｗ（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>