重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

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

解決済

  • 質問者：nkmyr
  • 質問日時：
  • 回答数：5件

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

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

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

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

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： metametamu
  • 回答日時：

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



<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

No.4

  • 回答者： k0021
  • 回答日時：

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



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

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

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

この回答への補足

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

補足日時：2011/01/19 10:29
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： w7test
  • 回答日時：

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

No.2

  • 回答者： taka451213
  • 回答日時：

こんばんは。



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

この回答への補足

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

補足日時：2011/01/19 10:27
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： OKWavex
  • 回答日時：

imageタグ。


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

この回答への補足

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

補足日時：2011/01/18 17:16
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報