- ベストアンサー
《初心者です》HTMLの改行無効化について教えてください。
現在HPを作成中なのですが初心者的質問で 申し訳ないです。お暇な方いらっしゃいましたら 教えてください。 同じ行の中に『右詰め』と『左詰め』を同居（？） させたいのですが、『<DIV ALIGN="LEFT">文字列</DIV> <DIV ALIGN="RIGHT">文字列</DIV>』 このような記述にすると改行されてしまいます。 何か良い手法はないでしょうか？ 宜しくお願いします。
- najima-jun
- お礼率82% (19/23)
- レンタルサーバ・ASP
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
Dpopです。 Web屋をやっています。OkWebの様なサイトを設計, 構築する仕事をしています。 > させたいのですが、『<DIV ALIGN="LEFT">文字列</DIV> <DIV ALIGN="RIGHT">文字列</DIV>』 こう言う事はできないのですよ。 この様な場合には、テーブルを使ってみましょう。 border="0" とすると、テーブルの罫線が表示されなくなります。 <table border="0" width="100%"> <tr> <td width="40%" align="left"> ここに、左寄せにしたい文章を入れる。 </td> <!-- ここに、空き空間を入れます。 --> <td width="20%"> </td> <td width="40%" align="right"> ここに、右寄せにしたい文章を入れる。 </td> </table> の様にします。 この例では、ページの横幅全てを使って、左40%と右40%に対応する範囲に文字列を入れています。 その真ん中20%に相当する部分を空けてあります。 もし、真ん中を開ける必要な無いのであれば、 <table border="0" width="100%"> <tr> <td width="50%" align="left"> ここに、左寄せにしたい文章を入れる。 </td> <td width="50%" align="right"> ここに、右寄せにしたい文章を入れる。 </td> </table> の様に、左右とも 50% の範囲に文字列を入れる様にすると良いでしょう。 横幅 100% の見えないテーブルを作り、その中に文字列を配置する。 と言う考え方を用いれば解決します。 不明点があれば、再度質問してください。
関連するQ&A
- 改行しないようにするには？
<html> <head> <title>test</title> </head> <body> <a href="http://www.yahoo.co.jp/">左</a> <div align="right"><a href="http://www.yahoo.co.jp/">右</a></div> </body> </html> このように、リンクを付けた文字列を右と左に表示させたいのですが 画像のように改行されて表示されます。 同じ行に、二つのリンクを表示するにはどうすればいいですか？ よろしくお願いします。
- ベストアンサー
- HTML
- 表示のしかたがわかりません
おはようございます。 HTMLで1行表示したいんですが、表示のしかたがわかりません。 たとえば、画面左側に『こんにちは』、画面右側に 『こんばんは』と表示したいと考えています。 こんにちは<DIV ALIGN="RIGHT">こんばんは</DIV> とすると、改行されて表示されてしまいます。 これを1行（同じ行）で左と右に表示したいのですが、 どのようにすればいいでしょうか？
- ベストアンサー
- HTML
- ★★★★ホームページ作成初心者なんですけど★★★★
文章などをつくるときに最近は<pre>を使ってるんですけど<pre>でしたら文字列が<left><center><right>に関わらず<left><center><right>の少し右とか少し左とかに文字をいれることができますよね。好きなところに文字がうてます。 <table>を扱う場合は<left><center><right>にしか私の技術ではこの三つの個所にしか文字を打てません。この三つの少し左・右とかすきなところに文字をうつことはできませんか？？質問わかりにくいですかね？<left>と<center>の間とかに文字をうってみたいんです。できますか？？好きなとこに文字・文字列をおきたい。 お願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- HTMLのfooterの設定がうまくいきません
HTMLのfooterの設定がうまくいきません 画像のようにleftがrightよりも高さが大きく、 以下のように記述しましたがfooterがうまく ページの最下位に表示されません。 現在は画像の左のような状態で、 右の画像のようにしたいです。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #left{float:left;} #right{float:right;} わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
- HTMLでCSSでボーダーが表示されません。
HTMLでCSSでボーダーが表示されません。 右サイドバー（right）の左にボーダーを表示させたいのですが、 画像のように文字を記述したところまでしかボーダーが表示されません。 ボーダーをfooterの上まで引きたいのですが、 わかる方いらっしゃいましたら回答宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"> <div id="right_title"></div> <div id="right_content"></div> </div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #right { float: left; height: auto; } #right_title { } #right_content { border-left-width: 1px; border-left-style: solid; border-left-color: #000; }
- ベストアンサー
- HTML
- 改行したくないのに改行されてしまう
http://www.serpress.co.jp/hp/no004.html を参考に、 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトルを記述します。</title> </head> <body> <a name="１段落目"> ●１段落目 </a> <Div Align="right"> <A href="#１段落目"> ▲ </a> </Div> <Div Align="right"> <A href="#２段落目"> ▼ </a> </Div> <a name="２段落目"> ●２段落目 </a> </body> </html> ------------------------------- と言うソースを書くと、 --------- ●１段落目 ▲ ▼ ●２段落目 --------- となってしまいます。 私としては、 --------- ●１段落目 ▲ ▼ ●２段落目 --------- としたいのですが、 どうすればいいでしょう？ <A href="#１段落目"> ▲ </a> </Div> <Div Align="right"> <A href="#２段落目"> の間に、<Br>ははいってないのに なぜ勝手に改行されてしまうのでしょうか？ 添付画像は現状です。ご回答よろしくお願いします。
- ベストアンサー
- HTML
- HTML,CSSの記述について
添付画像のようなレイアウトにする場合，どのように記述すればよいでしょうか？ （画像マウスオーバー時に画像のみが切り替わるという事です） 初心者なのでサンプルを書いてくださると助かります ↓これは自分で考えてみたものです。自分のブログからのコピペなのでおかしいかもしれません。 【html】 <div class="rolloverPositionMenu"> <div align=left> <img src="a.jpg"> </div></div> <div align=right> <div class="left">text-areaA</div><div class="right">text-areaB</div> <div class="left">text-areaC</div> </div> 【CSS】 .left { float:left; } .right { float:right; } a.rolloverPositionMenu { background: #fff url(b.jpg) left top no-repeat; color: #fff; display: block; overflow: hidden; text-align: center; position: relative; } a.rolloverPositionMenu:hover{ background-color: #f73; color: #f00; } a.rolloverPositionMenu img { background-color: #fff; } a.rolloverPositionMenu:hover img { position: relative; }
- ベストアンサー
- HTML
- イメージをセンタリングさせてかつ改行させない
イメージをセンタリングさせるために <img ...> を <div> で囲んで <div> に対して「text-align: center; 」か「display: block; margin-left: auto; margin-right: auto;」を指定すると中央に表示されますが、前後に改行がはいってしまいます。 イメージの前後で改行させないように「display: inline-block; _display: inline;」を指定すると今度は端によってしまいます。 中央に表示してかつ前後に改行をいれないような指定方法はあるのでしょうか？
- ベストアンサー
- CSS
- リンクを横に並べるには、どうすればいいですか？
リンクを下記のように並べたいのですが、CSSにはなんと記述すればいいでしょうか？ リンク1（中央揃え） リンク2（右揃え） なぜか、下記のようになってしまいます。 リンク1（中央揃えにしたいのに、左揃え状態） リンク2（右揃えになっているけど、改行されてしまう） margineかpaddingで設定するしかないでしょうか？ 文章が見づらくて、すいません。私が記述したHTML・CSSのソースを下記に載せます。 よろしくお願いします。 /*---------- CSS部分（外部スタイルシートに記述） ----------*/ div#inline { display: inline; } div#center { text-align: center; } div#right { text-align: right: } /*---------- HTML部分 ----------*/ <div id="inline"> <div id="center"><a href="～○○">リンク1</a></div> <div id="right"><a href="～○○">リンク2</a></div> </div>
- ベストアンサー
- CSS
- 中央寄せのタグについて
ＨＰを作成中です。 文字を<DIV ALIGN="CENTER">で 中央寄せにして、なおかつ改行した２行目の頭を揃えるにはどうしたらよいでしょうか？今のままですと、改行した行が、それぞれ中央に寄ってしまいます。教えてください。
- ベストアンサー
- HTML
お礼
早速のご回答ありがとうございます！ やっぱりできないのですね。 テーブルと言う手法がありますね！ チャレンジしてみます。 ご指導ありがとうございました。 また悩み事が発生したときはご相談させて下さい。