リンクの文字とリンクの文字を横に並ばす方法とスペースの入れ方
- リンクの文字とリンクの文字を横に並ばす方法とスペースの入れ方について解説します。
- 特に「はいそうです。」と「いいえ、違います」のリンク文字の間にスペースを入れる際にリンクの下線が伸びないようにする方法も紹介します。
- センセーショナルなタイトルを生成することにより、情報の要点を伝える効果的な方法を提供します。
- ベストアンサー
リンクの文字とリンクの文字を横に並ばす時に適度にスペースを入れたいので
リンクの文字とリンクの文字を横に並ばす時に適度にスペースを入れたいのですがどうすればよいでしょうか？特に「はいそうです。」と「いいえ、違います」のリンク文字の間にスペースをキーボードから打ち込もうとすると、リンクの下線が伸びてしまうのですが・・・。文字の下のリンクの下線は残したまま、スペースの時に下線が伸びないようにするにはどうすればよいでしょうか？ <style type="text/css"> <!-- .style1 { font-size: x-large; font-weight: bold; } --> </style> </head> <body> <p class="style1"><img src="../image/web_013.gif" alt="引越元も引越先も1階かつ目の前でこちらが用意した台車は使用可能ですか？" width="400" height="77" /></p> <div align="justify"> <a href="link3.html"><span class="style1">１．はいそうです。 </span></a> <a href="link0.html"><span class="style1"> ２．いいえ、違います。</span></a><br /> </div> <p><span class="style1"> <img src="../image/web_024.gif" alt="引越元と引越先" width="300" height="357" /></span> <a href="link1.html"></a></p> <a href="link1.html"> <p align="left" class="style1"><input type="button" value="前へ戻る" onclick="window.history.back()" /> </p> </a> <a href="../index.html"> <p align="center">トップページへ戻る</p> </a> <p class="style1"> </p> </body> </html>
- syuutyaku
- お礼率80% (24/30)
- HTML
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
HTML 記述法に合ってるか正確には知らないのですが、 ＞<a href="link0.html"><span class="style1"> ２．いいえ、違います。</span></a><br /> という、<a href＞の直前に全角スペースを入れれば、それがブラウザ画面上に現れます。 とすると、画面上で下線の付かない半角サイズの空間ができます。 もっと開けたければ全角スペースを複数入れます。 （画面からコピペすると全角スペースがあるのがわかります。） 「半角スペースは画面上に現れない」 「全角スペースを画面上で半角サイズに見える」のは ブラウザだかの仕様なんだと聞いた憶えがあります。 規格上どうなのか、はわかりません。
関連するQ&A
- 画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣）
画面の中央に配置しようとすると、レイアウトが崩れてしまいます（泣） ajaxを使用した住所自動入力フォームをあるファイルに作ったのですが、それをコピーしてもう一つのファイルにペーストし、floatでフォームを横並び配置にするところまではうまく出来たのですが、それを画面の中央配置にプロパティでしようとして、ドリームウィーバー上ではちゃんとフォームは横並びに配置されているのですが、アップロードしてブラウザで確認した時になぜか縦配置になってしまっています。どうすればきちんとフォームが横並びになって画面の中央配置にできるでしょうか？ <style type="text/css"> div.exampleB table { width: 280px; margin-right: 10px; float: left; } .exampleB { position: absolute; left: 50%; width: 630px; height: 100%; margin-left: -315px; </style> <div class="exampleB"> <div align="center"> <table width="315" height="449" border="2" align="center" cellspacing="0" bordercolor="#006633"> <tr> <td width="315" height="449"><div align="center"><span class="style13"><span class="style15"><a href="/link/moto2.html" target="_blank"></a><img src="../image/dt_022_03.gif" alt="引越元のイラスト" width="290" height="200" /></span></span></div><p align="center"><span class="style13"><span class="style119">＜引越<strong>元</strong>住所＞</span></span><span class="style119"><br /> 郵便番号：（省略） 都道府県：（省略） 市区町村：（省略） 町域(大字)：（省略） 丁目番地：（省略） 建物名～号室:（省略） </span></p></td> </tr> </table> <table width="316" height="449" border="2" cellspacing="0" bordercolor="#006633"> <tr cellspacing="0"> <td width="301" height="449"><div align="center" class="style30"><img src="../image/dt_023_03.gif" alt="引越先のイラスト" width="290" height="200" /><br /> <p align="left"><span class="style123"><span class="style15"><span class="style118">＜引越<strong>先</strong>住所＞</span></span><span class="style118"><br /> 郵便番号：（省略） 都道府県：（省略） 市区町村：（省略） 町域(大字)：（省略） 丁目番地：（省略） 建物名～号室:（省略） </span></p> </div></td> </tr> </table> </div> </div>
- ベストアンサー
- HTML
- 色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？
色のついた外枠を部分的に付けたいのですが、どうすればいいでしょうか？ <tr> <td width="864" class="style49"> <p align="center"><a href="link/ryoukin.html" class="style49"><br /> <img src="image/web_004.gif" alt="格安引越が出来る理由" width="200" height="50" border="0"/></a><strong><a href="link/ryoukin.html" class="style49"><span class="style51"><img src="image/web_003.gif" alt="重要事項説明" width="200" height="50" border="0"/></span></a><a href="link/ryoukin.html" class="style49"><img src="image/web_005.gif" alt="料金計算書・オプション価格" width="200" height="50" border="0"/></a><br /> </strong></p> <p align="center"><strong><br /> <br /> <img src="image/web_010.gif" alt="引越プラン" width="130" height="35" /><br /> <br /> <a href="link/link1.html" class="style49"><span class="style58"><img src="image/web_007.gif" alt="フローチャート式お見積作成" width="200" height="95" border="0"/></span></a> <span class="style58"><a href="link/link0.html" class="style49"><img src="image/web_008.gif" alt="お荷物記載による個別お見積作成" border="0"/></a></span> <a href="http://*****.**.****.**/postmail/postmail2.html" class="style49" ><img src="image/web_009_03.gif" alt="各種お問合せ" border="0"/></a><br /> </strong></p> <p></p> ちなみに引越プランからフローチャート式お見積作成、お荷物記載による個別お見積作成、各種お問合せまで全部を一枠で部分的に外枠で囲みたいのですが、どのようなやり方があるでしょうか？ 部分的に囲めなくてすごく困っています。どうかよろしくお願いいたします。
- ベストアンサー
- HTML
- ネスケとＩＥを同じ表示にしたい
文字をborderで囲ったものを二列に６つずつ並べて、サイトのメニューとして 使っています。 HTMLを以下のように記し、↓ <div> <span class="menu"><a href="#">AAA</a></span> <span class="menu"><a href="#">BBB</a></span> …… </div> <div> <span class="menu"><a href="#">CCC</a></span> <span class="menu"><a href="#">DDD</a></span> …… </div> これをcssで以下のようにしているのですが、ネスケで上手く表示されません 。 .menu { font-size: 13px; text-align: center; margin: 2px; border:1px solid gray; width: 97px; height: 15px; color: #808080; } どうも、marginとwidth、heightが反映されていないようなのですが、これを ネスケでも反映させるにはどうしたらいいでしょうか。 宜しくお願いします。
- ベストアンサー
- HTML
- 写真と文字の大きさをそろえたい
ビルダーを使いながらやっているのですが 二つのものを左右に並べて上下同じ大きさで表示したいのですが、 下記では同じ大きさになっていると思うのですが、 大きさが（上下の大きさのみ※左右は異なってよいのですが） ことなって表示されてしまいます。 解決方法を教えてください。。。 <DIV style="width : 191px;height : 335px;top : 94px;left : 157px; position : absolute; z-index : 10;" id="Layer8" class="hpb-lb-tb1-cell1" align="center"> <SPAN class="hpb-body4"><SPAN STYLE="line-height:1"><span style="font-size:15pt"> <B><STRONG>ここに文字</STRONG></B></SPAN></SPAN></SPAN> </DIV> <DIV style="width : 412px;height : 295px;top : 94px;left : 347px; position : absolute; z-index : 9; " id="Layer9" class="hpb-lb-tb1-cell2" align=""><IMG src="hpb_i_top10.jpg" alt="イメージ" width="412" height="295"></DIV>
- ベストアンサー
- ホームページ作成ソフト
- cssについて質問です。
cssについて質問です。 IE8で思ったように表示されるものが、Firefoxだとレイアウトが崩れてしまいます。 imgの高さや横幅がFirefoxで反映されず文字が上部に表示されるのですがいろいろやっても改善出来ずに途方に暮れています。 ヘッダーやフッターなどもありますが、関係のありそうな部分を抜き出してみました。 添付画像のように画像を３つならべて表示したいのですが、 一番無駄無くdivで組む方法もありましたらご教授下さい。 よろしくお願いします。 ■HTML■ <div class="subcontentsbox"> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> </div> ■css■ .subcontentsbox { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"ＭＳ Ｐゴシック",sans-serif; font-size: 100%; width: 100%; margin: 20px 0px; padding: 0; text-align: justify; -ms-text-justify: inter-ideograph; overflow: hidden; display: block; } .imgbox { background-color: #987654; height: 250px; width: 33.33333%; text-align: center; float: left; } .imgbox a{ text-decoration: none; border: 0; height: 180px; width: 180px; } .imgbox img{ border: 0; height: 180px; width: 180px; }
- ベストアンサー
- HTML
- 画像にリンクをつけたら、実線でかこまれた
バナーをつくり、それにリンクの指定をしたら、実線でかこまれてしまいました。 こんなことは初めてです。 <div class="top_left"><a href="index0.html"><img src="xx.png" width="558" height="119" ></a> </div> 単純な指定だとおもうのですが・・・。 お手数ですが、よろしくお願いします。 なお、 .link a { color: #111; } .link a:hover { color: #aaa; } .link a { text-decoration: none; } ほかの箇所で、文字のリンクの下線を消すために、cssで上のような 記述をしています。（関係あるかはわかりませんが・・・） 画像の箇所には、上記のスタイルは指定していません。
- ベストアンサー
- CSS
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- tableの大きさが編集領域とブラウザで異なる
現在、ビルダーにてHPを作成しております。 tableの大きさが編集画面で見るのと、ブラウザ上で見るのでは 大きさが異なってしまいます。 解決方法を教えてください。よろしくお願いします。 <DIV style="width : 157px;height : 607px;top : 72px;left : 2px; position : absolute; z-index : 9; " id="_HPB_LAYOUT_LMV0" class="hpb-side-cell3" align=""> <DIV> <TABLE cellpadding="0" cellspacing="0" class="hpb-vmenu1" id="_HPB_LINK_MENU_TABLE_01" width="157" height="200" border="1" style="table-layout: fixed;"> <TBODY> <TR> <TD class="hpb-vmenu1-head" height="15"><IMG src="c5.gif" alt="" width="1" height="1" border="0"></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link0"><SPAN style="font-size:11pt">文字</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub1.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">メニュー</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub2.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">表</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub3.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">期間限定</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub4.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">紹介</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="sub2.html" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">ご注文</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">ご相談・ご質問</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">コンセプト</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-idle1" height="50"><STRONG><A href="#" class="hpb-vmenu1-link1"><SPAN style="font-size:11pt">地域</SPAN></A></STRONG></TD> </TR> <TR> <TD class="hpb-vmenu1-foot" height="15"><IMG src="c5.gif" alt="" width="1" height="1" border="0"></TD> </TR> </TBODY> </TABLE> </DIV> </DIV>
- 締切済み
- ホームページ作成ソフト
- 画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTM
画像の上に文字をのせ、ボックス全体にリンクを設定したい CSS&HTML お世話になっております。 ある画像の上にposition:rerative;を使って文字をのせています。 この画像にリンクを設定したいのですが、文字の上になるとリンクが効かなくなってしまいます。文字も含めた全体にリンクをかけることはできるのでしょうか？ 下記ソースです。 /*css*/ img.button{/*画像*/ margin:0px 0px 8px; padding:2px; border:#999999 1px solid; } .text{/*画像上の文字*/ margin:0px; padding:0px; font-size:14px; text-align:left; } <!--html--> <div style="position:relative;"> <a href="index.html"><img src="image/photo1.jpg" alt="" width="346" height="98" border="0" class="button"/></a> <div style="position:absolute; left: 24px; top: 13px; width: 217px;"> <p class="text">画像上の文字</p> </div></div> 検索してdisplay:block;などのやり方を試してみたのですが、position:relative;を使っているからか？うまくいきませんでした。 お知恵をお借りできれば幸いです。どうかよろしくお願いいたします。 表現の仕方や言葉の使い方を間違っていたらすみません…。
- ベストアンサー
- HTML
- <li>の先頭に出るスペースの埋め方を教えてください！
DWを使いリストでロールオーバリンクするメニューを作っているのですが、どういうわけか最初の<li>の前に大きなスペースが出てしまします。また、FireFoxで確認をすると、メニューが入っているdiv(#navigation)の上に空白が出来てしまいます。この問題を解決するにはどうすればいいのでしょうか？ ちなみにHTMLは↓ <body> <div id="all"> <div id="header"></div> <div id="navigation"> <ul class="sample"> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> <li><a href="#" class="sample">top</a></li> </ul> </div> <div id="main"></div> <div id="main2"></div> <div id="footer"></div> </div> </body> ---------------------------- そしてスタイルシートは↓ #all { background-color: #00FF00; width: 750px; position: relative; height: auto; margin-right: auto; margin-left: auto; } #navigation { background-color: #FF0000; height: 50px; width: 750px; position: relative; clear: right; } #main { height: 270px; width: 750px; position: relative; background-color: #FFFF99; } #footer { background-color: #999999; height: 50px; width: 750px; position: relative; clear: right; } #ul.sample { width: 100%; } #header { background-color: #999933; height: 200px; width: 750px; position: relative; clear: left; } a.sample { text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 16px; text-decoration: none; color: #FFFFFF; background-image: url(img/blue-spy.JPG); height: 35px; width: 125px; padding-top: 15px; float: left; } a:hover.sample { background-image: url(img/sky.jpg); } ul.sample li { list-style-type: none; float: left; } #navigation li { float: left; height: 50px; width: 125px; } です。 本当に困っています。分かる方いましたらぜひ教えて頂けませんでしょか？
- 締切済み
- CSS
お礼
画像までつけて頂き、アドバイスどうもありがとうございます。大変参考になりました。<a href>の直前に全角スペースを入れるのですね！