- ベストアンサー
文字の入るスペースの、縦方向の位置調整
ORUKA1951の回答
- 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>
関連する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"> とかやってみましたが、駄目でした。 （皆目、見当違いなのかもしれませんが、…） 特に今まではテンプレートの画像設定で規定の画像が中央にあっても、 アフィリタグを入れると位置が乱れます。 お分かりの方はご教授頂けると幸いです。 どうぞ宜しくお願い致します。
- 締切済み
- HTML
- 画像の縦位置について
最近、テンプレートなどを使って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
補足
何度も書き込めないので・・・と試作してたら遅くなりました。 本当に大サービスでした。ありがとうございます。 子セレクタ指定とか、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>