- ベストアンサー
同一行の行頭と行末に２つの要素
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 <div> <span class="end">行末</span>行頭 </div> でいいんじゃないでしょうか？ 「行頭」を「span」で括る意味が、ほかにあるのなら別ですが・・・。 ところでさっきの件ですが、答える前に締め切られちゃいました・・・。 (^^ゞ
関連するQ&A
- 左右の高さを揃えたいんですが
css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
- htmlの記述。「右揃え」出来ません（困ってます）
こんばんは。質問の通り、右揃えになりません。 タグ打ちで、制作中。初心者です。 =-=-=-=-=-=-=-=-=-=-=-=-=-= <html> <head> <title>～</title> <style type="text/css"> span.c { text-align: right; } </style> </head> <body><center> … <span class="c"><a href="toppage.html">■ to top-page ■</a></span> </center></body> </html> =-=-=-=-=-=-=-=-=-=-=-=-=-= ■ to toppage ■を右揃えにしたいです。 <span class=""></span>で部分を指定して、 <style type="text/css">span.c { text-align: right; }</style>で条件を指定したのですが、左揃え（条件指定が出来ていない状態）にしかなりません。 <center></center>がダメなのか？っと思い、<center></center>を除いてみましたが、ダメでした。 <span class=""></span>でうまく部分指定が出来ていないのかと思い、<style type="text/css">span.c { text-align: right; }</style>の{}内に、フォントサイズの指定をすると、サイズ変化しました。 私的には、{ text-align: right; }が違うのかな？っと思っているのですが、分かりません。 どこが間違っているのでしょうか？？ というか、右揃えの仕方を教えて下さい。どんな方法でもいいです。
- ベストアンサー
- ブログ
- CSSについて初歩的ですがわかりません
こんにちは。ＣＳＳＰＬＡＹと言うサイトでCSSをＤＬしたのですが、 手を加えて、ページとして成り立つようにしたいのですが、 なぜか形が崩れてしまいました。自分じゃ何がおかしいかさっぱりわからないので、 どなたか、詳しい方指摘してもらえませんか？ 参考ＵＲＬ＝http://www.cssplay.co.uk/menus/pro_drop13.html <html lang="ja"><head> <meta http-equiv="content-style-type" content="text/css"> <link rel=stylesheet type="text/css" href="1.css"> <style> body {text-align:center;} .end {clear:both;} .box {width:85%; margin:0 auto 0 auto; text-align:center;} .main {width:80%; float:left;} .side {width:20%; float:left;} .top {width:80%; margin:0 auto 0 auto; text-align:center;} .top1 {width:20%; float:left;} .top2 {width:80%; float:left;} </style> </head> <body><div class="box"> <div class="top"> <div class="top1"> トップ </div> <div class="top2"> <div> <span class="preload1"></span> <span class="preload2"></span> <ul class="prodrop4"> <li class="top"><a href="./index.html" id="home" class="top_link"><span>Home</span></a></li> <li class="top"><a href="http://www.cssplay.co.uk" id="products" class="top_link"><span>Sales</span><!--[if gte IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul class="sub1"> <li><a href="../menu/" class="fly">Digital SLR Cameras</a></li> <li><a href="../boxes/">Interchangeable Lenses</a></li> <li><a href="../mozilla/">Flash Guns and Accessories</a></li> <li><a href="../ie/">Professional Tripods</a></li> <li><a href="../opacity/">Filters & Lens Hoods</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul></div> </div><div class="end"></div> </div> <div class="side"> サイド </div><!-- サイドここまで --> <div class="main"> メイン </div><!-- メインここまで --> <div class="end"></div> </div></body> </html> 文字制限で入りきらないので、メニューのほうは参考URLからみてください・・・ すいません
- 締切済み
- HTML
- CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
- CSS/float内のセンタリング
下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか？ <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>
- ベストアンサー
- HTML
- float の clear
CSS によるレイアウトを試しています。 float を中断したいときにはその次の要素で clear=left|right する、というのは理解したのですが、この clear, 要素のネストを無視するのでしょうか。 たとえば次のソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>File Browser</title> <style type="text/css"> <!-- #leftside { background-color: #66FF00; float: left; width: 120px; height: 120px; } #rightside { background-color: #33CC99; margin-left: 120px; } #navlink .boxrow { float: left; height: 30px; width: 120px; background-color: #CC9999; margin: 5px; } #content { background-color: #CCFF99; height: 300px; clear: left; } --> </style> </head> <body> <div id="leftside"> </div> <div id="rightside"> <div id="navlink"> <div class="boxrow"></div> <div class="boxrow"></div> <div class="boxrow"></div> </div> <div id="content"> </div> </div> </body> </html> （rightside の要素の中なので）content の clear により navlink の直下に配置されて欲しいのですが、leftside の float まで clear してしまっているようです。 親の要素の中だけで clear することはできないのでしょうか？
- ベストアンサー
- HTML
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- div#left {width:50%;
div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} がfloatされません。なぜでしょうか？ <html> <head> <title>a</title> <style type="text/css"> <!-- div#left {width:50%; float:left; border:1px solid black;} div#right {width:30%; border:1px solid red;} --> </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> </body> </html> これでなぜならないのでしょうか？
- 締切済み
- HTML
- CSSの段組で要素がかけてしまいます
いつもお世話になります。 今CSSで段組をしています。 #content{ width:780px; height:auto; } #content{ float:left; width:440px; padding-left:20px; padding-right:20px; } #menu{ float:right; width:440px; padding-right:20px; } で左右のボックスを作り、 それぞれにテキストや画像などの子要素を入れていきます。 html <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> <div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> <div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </html> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんとおさまるのですが、 IE（６，７とも）右の3番目(sub5)の要素が欠落し、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 どうしたらいいでしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。
- 締切済み
- HTML
- IEとその他のブラウザの表示
よろしくお願いします 現在、2段落の段組をCSSで行っています 但し、1段落目と2段落目にはマージンを指定しています そこで質問なのですが どこかのサイトでfloatとmarginは一緒に指定しないほうが良いというのを見たので --------------------------------- style.css --------------------------------- div.box_left_outer{ width: 300px; background-color: #FFF9E5; float: left; } div.box_left{ width: 260px; margin: 20px 20px 20px 20px; } div.box_right_outer{ width: 310px; float: left; } div.box_right_outer2{ width: 300px; margin-left: 10px; background-color: #FFF9E5; } div.box_right{ width: 260px; margin: 20px 20px 20px 20px; } --------------------------------- test.html --------------------------------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style.css" type="text/css"> </head> <body> <div class="box_left_outer"> <div class="box_left"> テキスト </div> </div> <div class="box_right_outer"> <div class="box_right_outer2"> <div class="box_right"> テキスト </div> </div> <body> </html> という風に書いているのですが IEだと意図した表示になるのですが Firefoxやその他のブラウザだと右側の段組のマージンの箇所が 1つ上のdivについている感じになります Firefoxなどでも同じ表示にするにはどうしたらいいでしょうか？ よろしくお願いします
- ベストアンサー
- HTML
お礼
ありがとうございます 順番を変えればうまくいきました 左記ほどはテーブルで妥協しました