- ベストアンサー
文字の入るスペースの、縦方向の位置調整
本文に対して注釈文の付いたページを作りたいのですが、 （添付画像を参照です） 改行で位置を調整すると、本文に対する注釈の縦方向の位置が、 環境によってどうしてもずれてしまうんです。 ページが長くなるほど、どんどんずれていきます。 改行で位置を調整すると、自分のブラウザで合わせても他のブラウザや、 文字フォントが違うと結構ずれてしまうんですよね。 こういうデザインをスタイルシートを使って上手く綺麗にできないものでしょうか。 参考画像はテーブルを使っていますが、テーブルでなくてもいいです。 良い案がありましたら教えてください。よろしくお願いします。
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
二種類の方法で作成してみた。 CSS、中ほどの /* この行をすべて削除すると・・・ の行を削除するともう一つのデザインが適用されます。 他にも色々な方法がありますが、とりあえず面白そうなものを二つほど。 説明はHTML内に書いてあります。それ以上は仕様書( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )をよく読んでみてください。答はそこにある。 ★タブを全角スペースに変換してあるので。元に戻してテストすること★ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル2</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{ margin:0px;padding:0px;background-color:rgb(200,200,200); } p{text-indent:1em;margin:0.2em 0.5em;} h1{ text-align:center;} body>div{ width:60%;min-width:400px;max-width:800px;margin-left:auto; margin-right:auto;background-color:white;padding:10px; } div div.article{position:relative;border:dotted 1px gray;} div div.article div.Note{ position:absolute;height:100%;font-size:0.8em;width:20%;right:-22%;top:0px;border:dotted green 1px;background-color:white;} div div.article div.Note hr{display:none;} div div.article div.Note div{ position:static;background-color:white;} div div.article div.Note div{} div div.article div.Note h3{margin:0.2em;} div div.article div.Note div + div h3{border-top: solid 1px red;margin-top:1em;} div div.article{position:relative;} div div.article blockquote{border:double 3px gray;} p.message{text-align:center;color:red;font-weight:bold;font-size:2em;border:red solid 1px;} p.type2{display:none;} /* 別のデザインを適用する場合は下のコメントアウト行を消す */ /* この行をすべて削除すると・・ div div.article{min-height:0px ! important;} div div.article div.Note{background:none;border:none;} div div.article div.Note div{ position:absolute;top:0px;border:dotted green 1px;background-color:white;} div div.article div.Note div + div h3{border-top: none;margin-top:0.2em;} div div.article div.Note div p{display:none;} div div.article div.Note div + div{top:1ex;} div div.article div.Note div + div{top:2ex;} div div.article div.Note div + div{top:3ex;} div div.article div.Note div + div{top:4ex;} div div.article div.Note div + div{top:5ex;} div div.article div.Note div:hover{z-index:1;} div div.article div.Note div:hover p{display:block;} div div.article div.Note h3{z-index:0} p.type1{display:none;} p.type2{display:block;color:blue;} */ --> </style> </head> <body> <div> <h1>サンプル</h1> <div class="article" style="min-height:26ex;"> <h2>質問内容</h2> <p>このサンプルは、ブラウザのウィンドウ横幅を変更しても、内容が左右真中に表示されています。それに従い記事は流し込まれる<a href="#liquid">リキッドレイアウト</a>を採用しています。</p> <div class="Note"> <div> <h3><a name="liquid">リキッドレイアウト</a></h3> <p> 最近の多様なディスプレイに合わせて横幅が伸縮するレイアウト、狭いウィンドウでもスクロールバーがでない。 </p> </div> </div> </div> <div class="article"> <h2>注釈を本文に連動させるには</h2> <blockquote><p> 本文に対して注釈文の付いたページを作りたいのですが、（添付画像を参照です）。改行で位置を調整すると、本文に対する注釈の縦方向の位置が、環境によってどうしてもずれてしまうんです。ページが長くなるほど、どんどんずれていきます。 </p> <p> 改行で位置を調整すると、自分のブラウザで合わせても他のブラウザや、文字フォントが違うと結構ずれてしまうんですよね。 </p> <p> こういうデザインをスタイルシートを使って上手く綺麗にできないものでしょうか。参考画像はテーブルを使っていますが、テーブルでなくてもいいです。良い案がありましたら教えてください。よろしくお願いします。 </p> </blockquote> </div> <div class="article" style="min-height:52ex;"> <h2>解決のヒント</h2> <p> 基本的には、その段落集合を一つの汎用ブロック<div>で括って、そのブロックの左上から通常に配置する方法をとります(<a href="#Note1">配置</a>)が、ここで問題になるのは、脚注の高さが本体ブロックより長くなったり、短くなった時の対策です。 </p> <p> 子供ブロックは親ブロックの高さを知ることができるが、tableと異なって、同じ行に入るセルに当たる高さを知る方法がCSSに用意されていないため、脚注ブロックに入る文字数からの長さをある程度指定してしまう方法と、見出しだけ表示しておいて、ポインターが乗った時に最前面に表示させるの二つの方法が考えられます。 </p> <p> 後者の場合は、<a href="#Note2">階層表現</a>を使用して最前面に記事を表示させる必要があります。 </p> <p class="type1 message"> これは、前者の方法で表示しています。 </p> <p class="type2 message"> これは後者の方法で表示しています。 </p> <div class="Note message"> <hr> <div> <h3><a name="Note1">配置</a></h3> <p>親コンテナブロックに、position:static以外を指定すると、その中のabsoluteされた要素はそのコンテナブロック内で絶対配置される。</p> <p> <a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position">9.3.1 配置体系を選択する</a> </p> </div> <div> <h3><a name="Note2">階層表現</a></h3> <p> ブロックの重なり順序を決定する。 </p> <p> <a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#q30">9.9 レイヤーの表現</a> </p> </div> </div> </div> </div> </body> </html>
その他の回答 (6)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いくつかアドバイスを ＞とりあえずdivのinline化とかspanとか色々試してみたんですが ＞そう上手くは行きませんでした。 この手のサイトはたくさん作っているのですが、ある段落集合の脚注が多くなると分かっている場合は、 <div class="article" style="min-height:120ex"> <!-- 脚注の文字数を適当な数で割ったもの --> <p>・・・<a href="#Note1">ビタミン</a>・・・</p> <p>・・・<a href="#Note2">アミノ酸</a>・・・</p> <p>・・・・</p> <div class="Note"> <div id="Note1">ビタミン</div> <div id="Note2">アミノ酸</div> </div> </div> そのうえで、 div.article{position:relative;height:100%;top:0px;left:-20%;} div.article div.Note{position:absolute;} div,article div.Note div{border:;} としています。 これだと、注のブロックを数行ずつ下げて重ねて、:hoverでZ-indexを加算して最前面に出すとかもできます。 それ以外に、 <p>・・・<span class="withNote">ビタミン<ins><strong>ビタミンとは</span><br>ビタミンとは・・・・</ins></span>・・・</p> としておいて、 div.article p span.withNote ins{display:none;} div.article p span.withNote:hover ins{display:block;position:relative;} div.article p span.withNote:hover ins strong{dispala:block;} とか（未テスト）して、注のある文字列の下(上)に表示するとか。 まあ、暇があったら作ってみます。自分の練習も兼ねて
- admiral_ya
- ベストアンサー率56% (110/193)
> 希望では、ポジションの絶対位置指定みたいなのでできるかなと思っていたのですが。 > と思ってたら、No.4の方がサンプル作ってくれたのでちょっと解読してみます。 補足です。 No.4 に有るように、また > 脚注を含む段落と、その脚注自体の段落の高さをそろえる事は出来るでしょうが...。 と書いたように、div でクラスを使えば、段落の頭を揃える事は出来ます。 ただこのままでは、例に示された「(注2)」の様に、脚注の数字がある箇所と、実際の脚注本体の位置を揃えるられないと思います。CSS だけでは。 もし出来るなら、私も知りたい(^^)。特に一つの段落に複数の脚注が含まれる場合。 また、もしこれ以上の事をネットで調べるなら、「脚注」ではなく「傍注」で検索した方が、ノイズが少なくるなると思います。
お礼
当たり前と言えば当たり前ですが、１行に２個とか３個とか傍注が入ってくれば 下に押し出されることになります。cssで指定は出来ますが汚く重なりますし。 それはそれでいいとして個別の縦方向指定（top）で表示することは 出来ますが、文字数に制限も入ってきますし、綺麗には行かないのかな、と。 ただ、更新のしやすさを考えず、１回だけ綺麗に作れればいい、 そういう条件なら出来そうです。 ページによってはそれはそれでありかな、とも思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLさえきちんとマークアップすれば、とても簡単に作れるでしょう。 （CSSを期待通りにデザインするためには、適切なHTMLであることが基本です。） 注釈は基本的に段落ごとに入るのが普通ですが、この場合は、注を入れたい段落/ブロック内の最後に入れると考えて、HTMLをマークアップすればよいです。 すなわち、注釈を入れたいブロックを汎用ブロックを示す<div>で囲みます。今回は、body直下のdiv内の、class=noteについて指定してみます。今回はサンプルなので、注(note)は、本文内に入れたり、頭注として左に配置したり、脚注として右に配置したりしてあります。 ★文字サイズを極端に変えても、ウィンドウサイズが変わっても本来の位置に表示されるはずです。 HTMLがこのようにきちんとマークアップされていればCSSは極めて簡単になり、かつスタイルシートの一部を書き換えるだけで、すべて本文内のノートとしたり、すべて左に配置なども、HTMLをいじらなくて自由にデザインできます。 このソースをしっかり理解することで、色々な場面で活用できるでしょう。まあ、大サービス・・・です。そのため、少し高度な設定方法も入っています。 なお、このソースは Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。合わせて確認してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{ margin:0px;padding:0px;background-color:rgb(200,200,200); } p{text-indent:1em;margin:0.2em 0.5em;} h1{ text-align:center;} body>div{ width:60%;min-width:400px;max-width:800px;margin-left:auto; margin-right:auto;background-color:white;padding:10px; border:none;} body>div>div{position:relative;} body>div>div div.note{font-size:0.8em; top:0px;padding:0.2em; border-style:solid;border-color:blue; border-width:0.5px 2px 2px 0.5px;width:80%; margin-left:auto;margin-right:auto;} body>div>div div.note h3{margin:0.1em 0.3em;} body>div>div div.sub{position:absolute;width:22%;} body>div>div div.foot{left:104%;background-color:rgb(220,220,255);} body>div>div div.head{right:104%;border-color:red; background-color:rgb(255,220,220);} pre{background-color:white;border:gray solid 1px; border-width:1px 3px 3px 1px;padding:1em;} --> </style> </head> <body> <div> <h1>サンプル</h1> <div> <p>このサンプルは、ブラウザの横幅を変更しても、内容が左右真中に表示されています</p> <div class="note"> <p> こちらは普通のノート </p> </div> </div> <div> <h2>注釈を本文に連動させるには</h2> <p> 本文に対して注釈文の付いたページを作りたいのですが、（添付画像を参照です）。改行で位置を調整すると、本文に対する注釈の縦方向の位置が、環境によってどうしてもずれてしまうんです。ページが長くなるほど、どんどんずれていきます。 </p> <p> 改行で位置を調整すると、自分のブラウザで合わせても他のブラウザや、文字フォントが違うと結構ずれてしまうんですよね。 </p> <div class="note foot sub"> <h3>脚注</h3> <p>親コンテナブロックに、position:static以外を指定すると、その中のabsoluteされた要素は絶対配置される。</p> </div> </div> <div> <p> こういうデザインをスタイルシートを使って上手く綺麗にできないものでしょうか。参考画像はテーブルを使っていますが、テーブルでなくてもいいです。良い案がありましたら教えてください。よろしくお願いします。 </p> <div class="note head sub"> <h3>頭注</h3> <p> 参考サイト </p> <p> <a href="http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position">9.3.1 配置体系を選択する</a> </p> </div> </div> <div> <h2>サンプルCSS</h2> <p> <strong>HTMLさえきちんと書かれていれば、</strong>position:relativeとposition:absolute;を組み合わせると簡単に作成できます。 </p> <p>ポイントとなる部分だけ抜き出したもの。なお下記のソースは半角スペース２文字を１文字の全角スペースで置き換えてあります</p> <pre>body>div>div{ position:relative; /* body直下のさらにその直下のdivをrelative */ } body>div>div div.note{ top:0px; width:80%; margin-left:auto; margin-right:auto; /* noteクラスの初期指定 */ } body>div>div div.sub{ position:absolute; width:22%; /* 注釈については、小さくさしてabsolute */ } body>div>div div.foot{ left:104%; /* 配置を決める */ } body>div>div div.head{ right:104%; }</pre> <div class="note sub foot"> <h3>脚注</h3> <p>>は子供セレクタで直下の要素にのみ適用される。</p> <p>classは半角スペースで区切っていくつでも書けるので、うまく設定するとCSSが簡潔になる</p> </div> </div> </div> </body> </html>
補足
何度も書き込めないので・・・と試作してたら遅くなりました。 本当に大サービスでした。ありがとうございます。 子セレクタ指定とか、classに２個同時指定とか初めて見たので混乱してました。 とりあえずdivのinline化とかspanとか色々試してみたんですが そう上手くは行きませんでした。 条件としては、注釈に入る文字の量も多すぎてはダメ、（注）は <div>に対して１個までしか縦方向の位置調整ができない、あとは 文字量を考えて２個目からはtopで指定は出来るけどあらゆる環境に 対応するのはどうか、というところでしょうか。 divのinline化（あるいはspan化）で個別調整してみようと思ったんですが、 横方向が張り付いてしまいますし（本文のところに注釈が割り込んでくる） 横位置の絶対指定をするとブラウザの幅可変に対応出来ませんし、なかなか難しいです。 やった分は張っておきます。 ソースが見やすいように<p>とか<h2>とかをなくしています。 とにかく教えてもらった分は知識になりました。ありがとうございました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <style type="text/css"> <!-- html,body{ background-color: #e9ebde; padding: 0px; } body>div{ border: solid 1px black; width: 40%; min-width: 400px; max-width: 800px; margin-left: 12%; margin-right: 18%; background-color: #ffffff; } body>div>div{ position: relative; border: solid 1px black; margin: 5px; } body>div>div div.note0{ color: #0000ff; position: absolute; margin-left: auto; margin-right: auto; min-width: 70px; width: 22%; top: 0px; left: 106%; background-color: #ffffff; border: solid 1px #000000; } body>div>div div.note40{ color: #0000ff; position: absolute; margin-left: auto; margin-right: auto; min-width: 60px; width: 22%; top: 40px; left: 106%; background-color: #ffffff; border: solid 1px #000000; } --> </style> </head> <body> <!-- body>div --> <div> <!-- body>div>div で、position: relative--> <div> ああああああああ<font color="blue">（注１）</font>ああああああああああああああああああああああああああああああああああああああああああああ<br /> <!-- body>div>div div.note0 --> <div class="note0"> （注１）だったりする。<br /> </div> </div> <!-- body>div>div で、position: relative--> <div> いいいいいいいいいいいい<font color="blue">（注２）</font>いいいいいいいいいいいいいいいいいいいいいいいいいいいいい<font color="blue">（注３）</font>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい<br /> <!-- body>div>div div.note0 --> <div class="note0"> （注２）うんぬんかんぬん。<br /> </div> <!-- body>div>div div.note40 --> <div class="note40"> （注３）あれこれ。<br /> </div> </div> <!-- body>div>div で、position: relative--> <div> うううううううううう<font color="blue">（注４）</font>うううううううううううううううううううううううううううううううううううううううううううううううううううううううううう<br /> <div class="note0"> （注４）ぶつくさ。<br /> </div> </div> </div> </body> </html>
- admiral_ya
- ベストアンサー率56% (110/193)
皆さん仰るように、ご希望の事は難しいと思います。 脚注を含む段落と、その脚注自体の段落の高さをそろえる事は出来るでしょうが...。 > ツールチップのように文字を浮かせて表示する方法もあります。 こちらの方法なら、span タグで title 属性を使うと手っ取り早い気がします。(IE と Firefox で確認しました)
お礼
ですよね。 更新のしやすさを捨ててＴＲとＴＤをガチャガチャと積んでいくか……。 spanのtitle属性は、画像のaltみたいに表示されるやつですね。 それが一番簡単そうですね。ちょっと惹かれます。 希望では、ポジションの絶対位置指定みたいなのでできるかなと思っていたのですが。 と思ってたら、No.4の方がサンプル作ってくれたのでちょっと解読してみます。 ありがとうございました。
- nine999
- ベストアンサー率44% (512/1140)
別のアプローチを取ってみるのも１つの手です。 例えば、本文の注釈部分にマウスを重ねたり、クリックしたときに注釈を表示する方法ならいくつか考えられます。 JavaScriptのalert()で表示したり、注釈表示をFRAMEやIFRAMEや別Windowsをポップして表示することもできます。 ツールチップのように文字を浮かせて表示する方法もあります。（JavaScript） テーブルを組んでやる場合、#1の方が言うように注釈毎にtrで区切らないと位置を揃えるのはやっかいです。 そもそも、枠内文章を別の枠と連動させるすべがタグにはありません。 ブラウザが違うばかりでなく、使用時のウィンドウサイズでさえも行数や文字位置に影響を与えます。本来固定されたデザインをしないものです。 やるならば、小さめの枠サイズで固定値を入れて、フォントもスタイルシートでサイズを固定するしかありません。 たまに広い画面のPCで左右がやたらにあまるHPがあるのは、こういう調節を小さい幅を基準に行っているためです。 あまりにも無駄で利用者のことを考えていないデザインの典型ですね。
お礼
ツールチップも検討してみます。 ブラウザ、画面サイズ、ウィンドウサイズ、フォントとあると やはり難しそうですね。画面は普通のもワイドも使ってますが どちらにも対応するのは落としどころを見つけないと大変そうです。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
テーブルで書いてあるのであれば、trで行を分ければよいのでは？
お礼
不規則に（注）を付けるには難しいかなと思ったんですけど 複雑にしたくない場合は、やっぱりそれが落としどころのような気もします。 ありがとうございました。
お礼
文字数制限の関係で分けました。 一応完成（？）したので２個合わせて見てください。 ありがとうございました。 2/2 <html> <body> <div class="zentai"> <h1>H1</h1> <div class="honbun"> <h2>H2</h2> <p> <div class="danraku01"> この段落<span class="mark">（注１）</span>は、１つの段落に対して傍注が１つの場合。縦方向のサイズ指定を、本文も傍注もしていない為、文字の量によってははみ出す。本文と傍注の横幅が固定されていると、文字の量がある程度は分かってくるので調整しやすい。 <div class="note01"> <div class="note01-01"> <h3>注１）</h3> <p> 横幅は固定で、縦高さは指定していない。 </p> </div> </div> </div> </p> <p> <div class="danraku02"> この段落<span class="mark">（注２）</span>は、１つの段落に対して傍注<span class="mark">（注３）</span>が２つの場合。傍注自体をさらに外側からdiv（クラス「note02」）で囲うことにより、その内部に入れれば順番に２つ目以降の傍注は下にずれて表示される。傍注同士の間隔はmargin指定。はみ出し対策の、縦幅指定と横幅固定のうち、横幅固定を使っている。 <div class="note02"> <div class="note02-01"> <h3>注２）</h3> <p> 傍注２の内容。さらに外側からdivで囲ってある。 </p> </div> <div class="note02-02"> <h3>注３）</h3> <p> 注２に押し出されて下に来ている。 </p> </div> </div> </div> </p> <p> <div class="danraku03"> この段落は、傍注の付く本文が段落の最初ではなく途中<span class="mark">（注４）</span>に付いている。段落本文は、ブロック属性でポジションもレラティブ（座標指定元）にしないと上手くいかない為、ブロック属性のまま、傍注のtopで位置を調整している。１行２．５ｅｘでこのぐらい。 <div class="note03"> <div class="note03-01"> <h3>注４）</h3> <p> 段落の２行目にあるのでtopで１段分下げている。 </p> </div> </div> </div> </p> <p> <div class="danraku04"> この段落は、傍注の付く本文が段落の最初ではなく途中からで、かつ、１つの段落に対して傍注が２つで、かつ<span class="mark">（注７）</span>、２つの傍注が離れた位置にある場合。遠距離ｅｘ指定だと完璧には行かないが、ある程度のブラウザでは同じ感じに出てくれる。ＦＦ３６３、ＩＥ８、オペラ１０５１、ＧＣ４１、で確認した。アルファベットや句読点が多いと改行位置が読めないのでちょっと怖い。やってみた感じ、子セレクタ指定<span class="mark">（注８）</span>とか隣接兄弟セレクタとかは必須要素ではなかった（？）。更新頻度の高くない、一つの完成したページを作るためのやり方を知りたかったのでこれで目的は達成できると思います。ありがとうございました。 <div class="note04"> <div class="note04-01"> <h3>注７）</h3> <p> 傍注７の内容。段落の３行目にあるのでtopで１段下げている。 </p> </div> <div class="note04-02"> <h3>注８）</h3> <p> 傍注８の内容。注７とはボーダー・トップで。 </p> </div> </div> </div> </div> </div> </body> </html>
補足
1/2 <style type="text/css"> <!-- .zentai{ border: black solid 1px; background-color: #e9ebde; width: 400px; padding: 0px; margin-left: auto; margin-right: auto; } .honbun{ background-color: #ffffff; border-top: black solid 1px; border-right: black solid 1px; width: 300px; padding: 5px; } h1{ margin: 0px; } h2{ margin: 0px; } h3{ color: #0000ff; font-size: 1em; margin: 0px; } p{ margin: 0px; } .danraku01{ position: relative; text-indent: 1em; border: green solid 1px; margin: 2px; } span.mark{ color: #0000ff; } .note01{ position: absolute; width: 79px; top: 0px; right: -92px; background-color: #e9ebde; } .note01-01{ text-indent: 0px; width: 79px; font-size: 0.8em; border: solid black 1px; background-color: #ffffff; } .danraku02{ position: relative; text-indent: 1em; border: green solid 1px; margin: 2px; } .note02{ position: absolute; width: 79px; top: 0px; right: -92px; background-color: \ffffcc; } .note02-01{ text-indent: 0px; width: 79px; font-size: 0.8em; border: solid black 1px; background-color: #ffffff; } .note02-02{ text-indent: 0px; width: 79px; font-size: 0.8em; margin-top: 5px; right: -32%; border: solid black 1px; background-color: #ffffff; } .danraku03{ position: relative; text-indent: 1em; border: green solid 1px; margin: 2px; } .note03{ position: absolute; width: 79px; top: 2.5ex; right: -92px; background-color: \ffffcc; } .note03-01{ text-indent: 0px; width: 79px; font-size: 0.8em; border: solid black 1px; background-color: #ffffff; } .danraku04{ position: relative; text-indent: 1em; border: green solid 1px; margin: 2px; } .note04{ position: absolute; width: 79px; top: 5ex; right: -92px; background-color: \ffffcc; } .note04-01{ text-indent: 0px; width: 79px; font-size: 0.8em; border: solid black 1px; background-color: #ffffff; } .note04-02{ text-indent: 0px; width: 79px; font-size: 0.8em; margin-top: 7.5ex; border: solid black 1px; background-color: #ffffff; } --> </style>