プロが教えるわが家の防犯対策術！

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

解決済

  • 質問者：CaveatEmptor
  • 質問日時：
  • 回答数：3件

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

「複数行にまたがる括弧を表示したい。」の質問画像
通報する

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

質問の本文を隠す

A 回答 (3件)

参考程度に

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

こんにちは



＞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">
<span>あああ</span>
<ul>
<li><span>いいい</span>
<ul><li><span>かかか</span></li>
<li><span>ききき</span>
<ul><li><span>たたた</span></li>
<li><span>ちちち</span></li>
</ul>
</li>
<li><span>くくく</span></li>
</ul>
</li.>
<li><span>ううう</span>
<ul><li><span>さささ</span></li>
<li><span>ししし</span></li>
<li><span>すすす</span></li>
</ul>
</li.>
</ul>
</section>
</body>
</html>

※ どうしても中央振り分けの表示になさりたい場合は、要素数の取得やサイズの計算が必要になると考えられますが、javascriptを利用することで実現は可能と思います。
通常のツリー表示でもjavascriptを利用したものは数多くあり、最初に挙げた検索例のなかでも散見されることと思います。
「複数行にまたがる括弧を表示したい。」の回答画像2
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

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

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

通報する
お礼日時：2016/08/11 21:58

No.3

  • 回答者： ORUKA1951
  • 回答日時：

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

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

　そのうえで、scrreenメディアに対して、そのデザインをすればよい。そのほうが訪問者はもちろん、著者自身のメンテナンスも容易になる。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

複数行にまたがる括弧は難しそうなので、リストを使って表したいと思います。

通報する
お礼日時：2016/08/11 21:59

No.1

  • 回答者： yambejp
  • 回答日時：

アプリ上で表示すればよいのであればLaTeXなどで数式入力すればよいし、


MS-Wordでもある程度数式入力はサポートされています。
WEB上で処理をしたい場合は、LaTeXライクな表示をするMathJaxなどを利用するとよいかもしれません

https://www.mathjax.org/
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

ホームページで表示したいと思っています。

一番簡単なのはWord等で表示して、それを画像にして貼ることだとおもうのですが、HTML, CSSでできないのかなと思って質問させていただきました。

通報する
お礼日時：2016/08/09 15:02

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報