複数行にまたがる括弧を表示したい。

解決済

質問者：CaveatEmptor
質問日時：2016/08/09 13:59
回答数：3件

以下のような複数行にまたがる括弧を表示したいのですが、どうしたらいいでしょうか？

通報する

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

質問の本文を隠す

回答 (3件)

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

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2016/08/10 13:36

こんにちは

＞HTML, CSSでできないのかなと思って質問させていただきました。
質問文にもそのように書いておいた方がよかったですね。

いわゆるツリー構造の表示をなさりたいのだと解釈しました。
多くの方がいろいろな方法を考えておられます。
http://www.bing.com/search?q=HTML+%E3%83%84%E3%8 …

よく見かける大抵のものは、次階層は1行下に落として、インデントする表示方法ですね。
この方法ですと項目の幅が制限を受けないので文字数が自由になり、応用範囲が広いと考えられます。
一方で、ご質問文でご提示のものは、親階層の項目の右側に回り込ませて、かつ同階層の項目の中央までずらすような表示かと想像します。
この場合、各項目の幅が制限を受けることになるのと、同階層の項目数によって上方向へ戻る量を変えなければならないといった点が面倒になりますね。

項目幅の問題はしかたないものとして、上下方向の振り分けは下方に伸ばすことに変えさせていただいて、考えてみました。
以下の例は、要素の枠線を利用している関係から若干ぎこちない大括弧もどき（？）になっていますが、文書構造さえ保っていれば自動的に括弧表記をするようになっています。
枠線のかわりに背景画像などを利用すれば、もっとそれらしい表示にすることが可能でしょう。

以下ご参考までに。（枠線利用で、添付図程度の表示は可能です）
作成の際に参考にしたサイト。
http://partisan.wwwxyz.jp/seed/2011/07/02/012152 …

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
.tree, .tree * { line-height:1.2em; margin:0; padding:0; list-style-type:none; }
.tree span { display:inline-block; width:4em; }
.tree ul { margin-left:5em; margin-top: -1.2em; }
.tree ul li { border-left: 1px solid #666; }

.tree ul::before {
float: left; content: "";
width: 0.4em; height: 0.8em;
margin-left: -0.4em;
border-bottom: 1px solid #666;
}
.tree ul li::before {
float: left; content: "　";
width: 0.5em;
overflow:hidden;
}
.tree ul li:first-child {
border-radius:6px 0 0 0;
}
.tree ul li:last-child {
border:none;
}
.tree ul li:last-child::before {
border-radius: 0 0 0 6px;
border-left: 1px solid #666;
}
</style>
</head>
<body>
<section class="tree">
あああ
<ul>
<li>いいい
<ul><li>かかか</li>
<li>ききき
<ul><li>たたた</li>
<li>ちちち</li>
</ul>
</li>
<li>くくく</li>
</ul>
</li.>
<li>ううう
<ul><li>さささ</li>
<li>ししし</li>
<li>すすす</li>
</ul>
</li.>
</ul>
</section>
</body>
</html>

※ どうしても中央振り分けの表示になさりたい場合は、要素数の取得やサイズの計算が必要になると考えられますが、javascriptを利用することで実現は可能と思います。
通常のツリー表示でもjavascriptを利用したものは数多くあり、最初に挙げた検索例のなかでも散見されることと思います。

- 0
- 件

通報する

この回答へのお礼

回答ありがとうございます。

なかなか複雑なのですね。Wordのように簡単にはいかないのがわかりました。

javascriptは現在、まだ勉強中なので、自分でjavascriptを利用してというのは無理そうです。(~_~;)

通報する

お礼日時：2016/08/11 21:58

No.3

回答者： ORUKA1951
回答日時：2016/08/11 15:03

ウェブで最も重要なことは、「構造とプレゼンテーションの分離(

http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。一度仕様書を通して読んでおかれるとよいでしょう。
　それは、文書構造滋養はリストですから、HTMLはリストとしてマークアップするべきでしょう。あなたの場合、それが順不同リスト(ul)、序列リスト (ol)、定義リスト(dl)のいずれが良いかは、文面では判断できませんが、そのいずれかになるでしょう。
　そうすることで、展示端末やスクリーンリーダーなどの視覚系ブラウザ以外にも、また検索エンジンにも正しく解釈できる。

　そのうえで、scrreenメディアに対して、そのデザインをすればよい。そのほうが訪問者はもちろん、著者自身のメンテナンスも容易になる。