- ベストアンサー
改行しないようにするには？
<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> このように、リンクを付けた文字列を右と左に表示させたいのですが 画像のように改行されて表示されます。 同じ行に、二つのリンクを表示するにはどうすればいいですか？ よろしくお願いします。
- XUVJORSLPDTZX
- お礼率73% (33/45)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 昨日は携帯からだったので失礼しました。 XUVJORSLPDTZXさんがどこまで知識があるかわからないので、知識の無い方向けにできるだけ噛み砕いて書いてますが、回りくどかったらごめんなさい。 ある程度知識のある方ならNo.2さんの解説が非常に細やかなので、勉強されるにはそちらを参考にしたほうがいいと思います。 ■まずは手っ取り早く結論から。 ●htmlには以下の通り（昨日とちょっと変えてます）。 -------- <div class="clearfix"> <div class="floatL">左</div> <div class="floatR">右</div> </div> -------- ●cssは<head>～</head>に直に記述するか、もしくは別のファイル（△△.css）にして、ヘッド内で読み込みます。 <head>～</head>に直に記述する場合は以下の通り。 -------- <style type="text/css"> <!-- .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */ .floatL {float:left;} .floatR {float:right;} --> </style> -------- 別のファイルにして、ヘッド内で読み込む場合は 別ファイルに -------- .clearfix:after { ～（中略） .floatR {float:right;} -------- <head>～</head>に -------- <link href="△△.css" rel="stylesheet" type="text/css" /> -------- △△.cssはお好きな名前にして、このhtmlからみたパスを正しく記入してください。 ■ここから下はカンタンな解説です。 最初のコード <a href="http://www.yahoo.co.jp/">左</a> <div align="right"><a href="http://www.yahoo.co.jp/">右</a></div> ここで使われている<div align="right">の「div」はブロックレベル要素といって、見出し、段落など文書を構成する基本要素となるものです。これは【かたまり】の扱いなので、何も指定しないと図の紫や赤の線のように親要素に100％の幅（この場合ウインドウいっぱい）に表示されます。 目には見えなくても幅100％の箱を置いたようなもの、と理解してください。 なので図の上半分のように、「左」の下に幅100％の箱があり、その中に「右」があるので、同じ行にならないのです。 このブロックレベル要素に、cssでfloatを指定してやると、中身の幅に合わせたサイズで左寄せ、右寄せにすることができます。 今回は左のボックスにfloatL（ 水色の線）、右のボックスにfloatR （緑の線）というクラスを指定しました。 これでご要望の配置にすることはできましたが、そのままだとこの下の文章が「左」と「右」の間に流れ込んでしまいます。 そこでこの二つをもうひとつのdivでくくり、clearfixというクラスを指定して、floatを解除しました。 clearfixにはいろんな書き方があって、今回のはその一例です。 こういう場で書かれた解答をそのまま真似して終わるより、カンタンにでもその理屈を理解したほうがその後の役に立つと思います。 私の解説はザックリ過ぎですから、きちんと勉強されるならNo.2さんの解説などを参考にされてください。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
まず、大原則!!正しいHTML書きましょう。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )』 <body>直下にa要素は置けません。!! 7.5.1 BODY要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY ) <!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body --> はっきりと、%block(ブロック要素)およびSCRIPTを一つ以上、INSとDELは置けるとしか書いてない。 そのためブラウザは、ここに匿名ブロックを作ります。『一般に、ブロックレベル要素は新しい行を開始し、( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )』ますから、二段に分かれてしまいます。 もちろんスタイルシートで行内要素に変更はできますが、それ以前に正しいHTMLがあっての事です。 <body> <div class="header"> <h1><a href="">ページタイトル</a></h1> というHTMLがあったとします。 ・・・このようにHTMLには文書構造以外いっさい書きません。 ☆DIVは文書構造を保管するために使用します。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 ☆HTML5では <body> <header> <h1><a href="">ページタイトル</a></h1> となるところです。(HTML5では文書構造を示す要素が追加される) その上で、スタイルシートを書いていきます。 div.header h1{ text-align:right; position:relative; } div.header h1 a:before{ content:"左"; position:absolute; left:0;top:0; } ・・画像であっても良い。 content:url(画像へのパス); ガラケー--フィーチャホン用のデザインが必要な場合は、media="handheld"でスタイルシートを書けば良いです。その場合:beforeやcontent()に対応していないものもあるので <body> <div class="header"> <h1><a href=""><img src="" width="" height="" alt="">ページタイトル</a></h1> にした方が良い div.header h1{ text-align:right; position:relative; } div.header h1 img{ position:absolute; top:0;left:0; }
お礼
ご回答ありがとうございます。
- roid_moon
- ベストアンサー率58% (10/17)
パソコンまたはスマホ用サイトならcss、ガラケー用ならtableにしましょう。 cssなら <div class="clearfix"> <div style="float:left;">左＜/div> <div style="float:right;">右＜/div> </div> floatを使う場合は必ず上記のようにclearfixでくくってください。 でないとこのあとのレイアウトが崩れてしまいます。 そしてこのclearfixにもcssが必要なのですが、今私が携帯からなので長いコードを書くのが難しいです。 clearfixとtableのコードは明日にでもPCから書きますね。
お礼
パソコンまたはスマホ用サイトなのでcssで書いてみます。 再度ご回答お待ちしております！
お礼
ご回答ありがとうございます。