• ベストアンサー

文字の入るスペースの、縦方向の位置調整

本文に対して注釈文の付いたページを作りたいのですが、 （添付画像を参照です） 改行で位置を調整すると、本文に対する注釈の縦方向の位置が、 環境によってどうしてもずれてしまうんです。 ページが長くなるほど、どんどんずれていきます。 改行で位置を調整すると、自分のブラウザで合わせても他のブラウザや、 文字フォントが違うと結構ずれてしまうんですよね。 こういうデザインをスタイルシートを使って上手く綺麗にできないものでしょうか。 参考画像はテーブルを使っていますが、テーブルでなくてもいいです。 良い案がありましたら教えてください。よろしくお願いします。

画像を拡大する
  • HTML
  • 回答数7
  • ありがとう数8
回答 全件
ベストアンサー
二種類の方法で作成してみた。 CSS、中ほどの /* この行をすべ…
いくつかアドバイスを ＞とりあえずdivのinline化とかspan…
> 希望では、ポジションの絶対位置指定みたいなのでできるかなと思ってい…
　HTMLさえきちんとマークアップすれば、とても簡単に作れるでしょう。…
　皆さん仰るように、ご希望の事は難しいと思います。 　脚注を含む段落…
別のアプローチを取ってみるのも１つの手です。 例えば、本文の注釈部分…
テーブルで書いてあるのであれば、trで行を分ければよいのでは？

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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> 　　　　基本的には、その段落集合を一つの汎用ブロック&lt;div&gt;で括って、そのブロックの左上から通常に配置する方法をとります(<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>

neko-inu
質問者

お礼

文字数制限の関係で分けました。 一応完成（？）したので２個合わせて見てください。 ありがとうございました。 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>

neko-inu
質問者

補足

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>

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (6)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.6

いくつかアドバイスを ＞とりあえず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;} とか（未テスト）して、注のある文字列の下(上)に表示するとか。 まあ、暇があったら作ってみます。自分の練習も兼ねて 　

全文を見る
すると、全ての回答が全文表示されます。
回答No.5

> 希望では、ポジションの絶対位置指定みたいなのでできるかなと思っていたのですが。 > と思ってたら、No.4の方がサンプル作ってくれたのでちょっと解読してみます。 　補足です。 　No.4 に有るように、また > 脚注を含む段落と、その脚注自体の段落の高さをそろえる事は出来るでしょうが...。 と書いたように、div でクラスを使えば、段落の頭を揃える事は出来ます。 　ただこのままでは、例に示された「(注2)」の様に、脚注の数字がある箇所と、実際の脚注本体の位置を揃えるられないと思います。CSS だけでは。 　もし出来るなら、私も知りたい(^^)。特に一つの段落に複数の脚注が含まれる場合。 　また、もしこれ以上の事をネットで調べるなら、「脚注」ではなく「傍注」で検索した方が、ノイズが少なくるなると思います。

neko-inu
質問者

お礼

当たり前と言えば当たり前ですが、１行に２個とか３個とか傍注が入ってくれば 下に押し出されることになります。cssで指定は出来ますが汚く重なりますし。 それはそれでいいとして個別の縦方向指定（top）で表示することは 出来ますが、文字数に制限も入ってきますし、綺麗には行かないのかな、と。 ただ、更新のしやすさを考えず、１回だけ綺麗に作れればいい、 そういう条件なら出来そうです。 ページによってはそれはそれでありかな、とも思います。

全文を見る
すると、全ての回答が全文表示されます。
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

　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&gt;div&gt;div{ 　　position:relative; 　　/* body直下のさらにその直下のdivをrelative */ } body&gt;div&gt;div div.note{ 　　top:0px; 　　width:80%; 　　margin-left:auto; 　　margin-right:auto; 　　/* noteクラスの初期指定 */ } body&gt;div&gt;div div.sub{ 　　position:absolute; 　　width:22%; 　　/* 注釈については、小さくさしてabsolute */ } body&gt;div&gt;div div.foot{ 　　left:104%; 　　/* 配置を決める */ } body&gt;div&gt;div div.head{ 　　right:104%; }</pre> <div class="note sub foot"> <h3>脚注</h3> <p>&gt;は子供セレクタで直下の要素にのみ適用される。</p> <p>classは半角スペースで区切っていくつでも書けるので、うまく設定するとCSSが簡潔になる</p> </div> </div> </div> </body> </html>

neko-inu
質問者

補足

何度も書き込めないので・・・と試作してたら遅くなりました。 本当に大サービスでした。ありがとうございます。 子セレクタ指定とか、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>

全文を見る
すると、全ての回答が全文表示されます。
回答No.3

　皆さん仰るように、ご希望の事は難しいと思います。 　脚注を含む段落と、その脚注自体の段落の高さをそろえる事は出来るでしょうが...。 > ツールチップのように文字を浮かせて表示する方法もあります。 　こちらの方法なら、span タグで title 属性を使うと手っ取り早い気がします。(IE と Firefox で確認しました)

neko-inu
質問者

お礼

ですよね。 更新のしやすさを捨ててＴＲとＴＤをガチャガチャと積んでいくか……。 spanのtitle属性は、画像のaltみたいに表示されるやつですね。 それが一番簡単そうですね。ちょっと惹かれます。 希望では、ポジションの絶対位置指定みたいなのでできるかなと思っていたのですが。 と思ってたら、No.4の方がサンプル作ってくれたのでちょっと解読してみます。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • nine999
  • ベストアンサー率44% (512/1140)
回答No.2

別のアプローチを取ってみるのも１つの手です。 例えば、本文の注釈部分にマウスを重ねたり、クリックしたときに注釈を表示する方法ならいくつか考えられます。 JavaScriptのalert()で表示したり、注釈表示をFRAMEやIFRAMEや別Windowsをポップして表示することもできます。 ツールチップのように文字を浮かせて表示する方法もあります。（JavaScript） テーブルを組んでやる場合、#1の方が言うように注釈毎にtrで区切らないと位置を揃えるのはやっかいです。 そもそも、枠内文章を別の枠と連動させるすべがタグにはありません。 ブラウザが違うばかりでなく、使用時のウィンドウサイズでさえも行数や文字位置に影響を与えます。本来固定されたデザインをしないものです。 やるならば、小さめの枠サイズで固定値を入れて、フォントもスタイルシートでサイズを固定するしかありません。 たまに広い画面のPCで左右がやたらにあまるHPがあるのは、こういう調節を小さい幅を基準に行っているためです。 あまりにも無駄で利用者のことを考えていないデザインの典型ですね。

neko-inu
質問者

お礼

ツールチップも検討してみます。 ブラウザ、画面サイズ、ウィンドウサイズ、フォントとあると やはり難しそうですね。画面は普通のもワイドも使ってますが どちらにも対応するのは落としどころを見つけないと大変そうです。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

テーブルで書いてあるのであれば、trで行を分ければよいのでは？

neko-inu
質問者

お礼

不規則に（注）を付けるには難しいかなと思ったんですけど 複雑にしたくない場合は、やっぱりそれが落としどころのような気もします。 ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • 改行が変な位置、中途半端な位置にて、不本意な改行がされていますので、そ

    改行が変な位置、中途半端な位置にて、不本意な改行がされていますので、それを防ぐ方法、やり方を教えてください。 まずは添付画像をご覧ください。 ドリームウェーバーCS5を使用してHPを作成しました。その際には、テーブルの中にテキストを入力し、そのテキストには予めCSSにてフォントサイズ・色を設定しています。 テキスト入力時にテーブルの端まで文字を入力する場合には、端の部分に来たところで、シフトキーとエンターキーを同時に押して改行しています。コードを確認すると<br />となっており、ちゃんと改行が出来ているようです。 その後にブラウザーでのプレビューすると、私のPC（windowsXP IE8)からでは、ちゃんと改行が設定どおりにされているのですが（画像上）、しかし、他のPC（windows7 IE8）で見ると改行が無理やり？変な位置で改行されてしまい、見た目が崩れてしまっています（画像下）。 どのようなやり方、方法をすれば、意図した改行、思惑通りの改行が出来て、どのPCから見ても同じように表示させる事が可能なのでしょうか？ アドバイス…ご指示をお願い致します。

    • ベストアンサー
    • HTML
  • 画像上に文字を表示するとiPhoneで位置がずれる

    ホームページで時間に応じて2行のテキストを時計画像の上に表示したいのですが 以下のCSSを使った方法ではPCやアンドロイドではズレないで表示されます。 ただし親のiPhoneを借りて見ると 何故か文字位置が下の方にずれてしまい画像から文字がはみ出してしまいます。 ブラウザは標準ではいってるやつ（Safari？）です。 <div style="position: relative;"> <img src="hoge.jpg" width=250 height=46> <div style="position:absolute; top:6px; left:20px;"> <table border=0 cellspacing=0 cellpadding=0> <tr><td>この文章は</td></tr> <tr><td>サンプルですよ</td></tr> </table> </div> </div> どうもiPhoneのSafariはフォントサイズを自動で調整する機能があるそうで それを解除するために以下のCSSを追加してみました。 -webkit-text-size-adjust: none; このCSSを追加するとフォントサイズは変えていなくても表示は小さくなり 位置ずれはマシにはなりました。 が、それでも行間が大きいためか画像からははみ出しています。 テーブル部分を2個に分離してそれぞれ位置を修正すれば、と思ったのですが それだとSafari以外は詰まって表示されてしまいますよね・・・シクシク。 他のブラウザならともかくiPhoneの標準ブラウザなので何とか直したいです。 これを修正できる方法をご存知の方はおられますでしょうか？ 画像の上に文字を表示できるのでしたら、 上記のCSSとはまったく別のものになっても構いません。 よろしくおねがいします。

    • ベストアンサー
    • CSS
  • 画像の縦位置について

    最近、テンプレートなどを使ってHPの作成に 取り組み始めた初心者です。 画像の縦の位置を調整したいのですが、 うまく行きません。 「～middle」を使うのかなと思っていろいろと試行錯誤、 例えば、 <p class="middle"> <img scr="～",～～～～,class="middle"> とかやってみましたが、駄目でした。 （皆目、見当違いなのかもしれませんが、…） 特に今まではテンプレートの画像設定で規定の画像が中央にあっても、 アフィリタグを入れると位置が乱れます。 お分かりの方はご教授頂けると幸いです。 どうぞ宜しくお願い致します。

  • 画像の縦位置について

    最近、テンプレートなどを使ってHPの作成に 取り組み始めた初心者です。 画像の縦の位置を調整したいのですが、 うまく行きません。 「～middle」を使うのかなと思っていろいろと試行錯誤、 例えば、 <p class=\"middle\"> <img scr=\"～\",～～～～,class=\"middle\"> とかやってみましたが、駄目でした。 （皆目、見当違いなのかもしれませんが、…） 特に今まではテンプレートの画像設定で規定の画像が中央にあっても、 アフィリタグを入れると位置が乱れます。 お分かりの方はご教授頂けると幸いです。 どうぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 余分な縦スクロールバーが出てしまう

    CSSを外部ファイル、本文はXHTML1.0でページを作っています。 #headerと#containerで上下に分かれるデザインです。 #headerはwidth: 100%;で横いっぱいに伸びており、#containerは幅800pxでセンタリング、ドロップシャドウの背景画像がheight: 100%;で下いっぱいに伸びるようにしています。 #headerは上手くいっており問題はないのですが、#containerがどうしてもうまく行きません。 height: 100%;で背景画像は下まで伸びるのですが、本文がどんなに短くても、200px位？縦スクロールバーが必ず出てしまうのです。 本文が長くても、確実にブラウザに収まる程短くても結果は同じです。 （1920*1200のディスプレイで全画面表示しても同じ結果なので、余白が反映されている訳ではないと思います） 余分な縦スクロールバーが出てしまう原因には何がありますか？ 確認ブラウザはSafari/3.2.1 Firefox/3.0.7です。 原因がお分かりになる方、ご教授お願い致します。

    • ベストアンサー
    • CSS
  • Web上で文字位置の微調整を行い印刷したい

    ◆質問詳細 -------------------------------------------------------------- 　　Webシステムに下記のような機能の組み込みを検討しています。 　　　<やりたいこと> 　　　　・あらかじめデザインが印刷された紙（以降 デザイン用紙とする）に対し、 　　　　　Webシステムから必要な情報（宛名など）を印字し、プリントアウトさせる 　　　　　※デザイン用紙は画像としても保存しておく 　　　<懸念点> 　　　　・デザイン用紙のデザインにより情報を印字する箇所が違うため、プレ 　　　　　ビュー等で印字箇所を微調整する必要がある。 　　　　　※プレビュー時は背景にデザイン用紙の画像を表示させる必要がある 　　単純に決められた位置に情報を印字して出力させる場合はCrystal Reports等で問題ないかと 　　思いますが、出力する情報の印字位置を毎回微調整しなければならずどんなツールがよいか 　　探しております。 ◆ご教授希望内容 -------------------------------------------------------------- 　　上記のように印刷前に文言の印字位置を微調整できたり、プレビュー時の背景画像を変えれ 　　たりといった柔軟なことができるツールや方法につきまして何かご教授頂けたらと思い質問を 　　させて頂きました。 ◆その他補足 -------------------------------------------------------------- 　　ちなみに印刷時は下記の流れで検討しております。 　　　[※印刷枚数が1000枚程度とした場合] 　　　　　１．印刷前のプレビュー等で印字位置の微調整 　　　　　２．微調整した状態で何件か確認 　　　　　３．問題がなければ全枚数の印刷開始 　　開発環境は下記で行う予定です。 　　<開発環境> 　　　・開発PC OS：Windows 7 Pro 64 bit 　　　・開発ツール：Visual Studio 2008 Pro 　　　・DB：SQL Server 2008 Express 　　<Webシステム導入予定サーバ> 　　　・OS：Windows Server 2008 R2（おそらく） 　　　・DB：SQL Server 2008 Standard（おそらく） 説明足らずな箇所もあるかも知れませんが、よろしくお願い致します。

  • ｃｓｓで<div>の位置を自動で調整したいです。

    いつもお世話になっております。 今回はcssのことでご指導お願い致します。 上下のフレームを使ってHPを作っているのですが、下のフレームにはtableがあり、その下に<div>があります。この形がいいのか悪いのかもわからないのですが、DreamweaverMX2004のテンプレートを使って作りはじめ、いらないものを削除したり、tableを挿入したりしているうちに今のレイアウトになっています。 それで教えていただきたいのですが、tableの縦のサイズが頻繁に変わります。そのたびに<div>の位置を調整していたのですが、tableのサイズにあわせて<div>の位置が自動で調整されるようにするにはどうしたらいいのでしょうか？ ネットで調べて、positionをautoにしたり、諸々試したのですけど思うとおりになりません・・ ご指導の程、宜しくお願い致します。

  • デジカメで撮った写真の縦位置が、

    使用しているのはフォトショップCS。超初心者です。 デジカメで撮った写真をノートパソコンのマイピクチャの中に専用フォルダを作り、インストールしました。 縦位置で撮った写真が横位置のままだったので、『Windows画像とFAXビューア』で全部縦位置に戻しました。 そして、それをフォトショップで使おうとしたのですが、『ファイルブラウザ』では横に寝ッ転がったままです。 何百枚もあるものをまた一枚ずつ手直しをしなくてはならないのでしょうか？ それとも、そういった手間を省く方法があるのでしょうか？ 知っている方は教えてください。 因みに、使っているカメラは『キャノン20D』です。

  • ブラウザによってブログの文字フォントの大きさが変化する？

    ウェブリブログでブログをやっております。最近、自分のブログ を見て、発見したのですが、使用するブラウザによって、ブログ 本文のフォントサイズがまちまちで、見づらい・・・ 基本ブラウザはＩＥ８です。これで本文を作成しておりますが Fire　Foxで閲覧すると、フォントが若干大きくなって、変な ところで改行して、文章が見づらくなってしまいます。 基本ブラウザで作成した本文が他のブラウザで閲覧したときも 同じフォントサイズで見れるようにするにはどうした良いで しょうか？？？

  • インラインフレーム内の文字を拡大すると重なる

    ホームページのトップページに、インラインフレーム で新着情報を表示させようとしています。 参照してくるファイル（今回の場合news.html)を単独で開き、文字の表示サイズを変更すると、 ちゃんと変更されるのですが、トップページでインラインフレーム内に表示させて 文字サイズを大きくすると、文字は大きくなるのですが、縦方向に伸びずに文字が重なってしまいます。 （行間が文字の高さより狭くなる状態） 文字サイズを見る人側で指定できるようにと、 スタイルシートによるフォントサイズの指定はしていません。 インラインフレームのサイズは固定していて、縦方向にスクロールされるようにしています。 news.htmlの内容は、1列複数行のテーブルでつくっています。 見ているブラウザはIE6.0です。 お分かりの方、アドバイスよろしくお願いします。

    • ベストアンサー
    • HTML
PCの中のデーターが印刷できますが、ネット印刷ができない理由と解決方法
このQ&Aのポイント
  • 本日から使用し、PCの中のデーターは印刷できますが、ネット（Microsoft Edge)を開いての印刷が出来ません。プリンターはオフラインと表示されています。プリンターが接続されていること、プリンターの電源が入っていることを確認しても問題が解決しません。どうしたら良いのでしょうか？
  • ネット上のページを印刷する際に、プリンターがオフラインと表示される問題が発生しています。PCの中に保存されているデータは問題なく印刷できますが、ネット上での印刷には困っています。プリンターが接続されていることや電源を確認しましたが、問題は解決していません。どうすれば解決できるのでしょうか？
  • Microsoft Edgeを使ってネット上のページを印刷しようとすると、プリンターがオフラインと表示され印刷できません。しかし、PCの中に保存されているデータの印刷は正常に行えます。プリンターの接続や電源に問題はないのですが、解決策がわかりません。どのようにすれば問題を解決できるのでしょうか？
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する