- ベストアンサー
divの中にspanを右寄せにするには？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ソースを書くだけで許容文字数をオーバーしてしまったので説明を 右寄せに配置したい＝text-align:rightですから、左寄せにしたい要素をdisplay:inline-blockにします。line-heightをそのinline-blockの高さに合わせておくと高さ中心に配置されます。また、text-align:centerでその内部で左右中央になります。 次にそれを収める外枠--親コンテナブロックを指定します。これはboxですからdisplay:blockですね。そして、高さを先のinline-blockが収まって十分な余白が取れるように高さを指定します。そして、text-align:rightをここで指定します。 基本的には、これだけの指定です。あとは、それぞれの細かいデザインをお好きにしてください。 なお、aは基本的にインライン要素でかつ内部にブロック要素は含むことができません。★ただし、あくまでHTML上の問題です。★ これをスタイルシートでinline-blockにしようが、list-itemにしようがそれとは別問題です。 したがって、もしその直近の親要素がすでにblockなり、inline-blockなどblock系に指定されていれば、その親をposition:relativeでサイズを参照できるようにしてしまえば、a{display:block;width:100%;height:100%;}として、ボタン的な動作をさせることができます。 よって、最も簡単なHTMLは、 <p class="breadcrumbList"> <a href="/">TOP</a> <a href="/abc">カテゴリー</a> <a href="/abc/sss/index.html">サブ</a> </p> なのです。divやspanで囲む必要すらなく、 p.breadcrumbList{ ＿width:640px;height:100px;margin:20px auto; ＿border:solid gray 3px;background-color:aqua;text-align:right; ＿position:relative; } p.breadcrumbList a{ ＿display:inline-block;width:80px;height:80px; ＿background-color:white;border:1px black solid; ＿text-align:center;margin:10px;line-height:80px; } p.breadcrumbList a:hover{background-color:yellow;} で、あなたが期待されたとおりの表示になりますね。本当にボタン風にしたければ p.breadcrumbList a{border:3px lime outset;border-radius:10px;} p.breadcrumbList a:active{border-style:inset;} このようにHTMLは、あなたが数年後に、あるいは他人が見てもわかるように文書構造だけを記述したのでよいのです。とても楽になると思います。 そのうえで、スタイルシートでお好きなようにデザインすれば良いのです。HTMLもCSSのもとてもシンプルでわかりやすくなるでしょう。 今までは、デザインのためにHTMLをマークアップするなど、異なった手法--本来の方法でない手法--で学ばれたのだと思います。慣れるまで大変だと思いますが、HTML5の時代には、この文書構造とプレゼンテーションの分離は最重要になります。頑張ってください。 必ずしも有名サイトが正しいわけじゃありません。特にMicrosoftのサイトは古い--Microsoft自身が撲滅しようとしている古いIEにも対応させるため、いびつなマークアップやスタイルシートが使われています。あまり参考にはならないと思います。 ただ、デザインはこなれていますから、外観だけはとても良い参考になりますね。--ソースは糞ですが(苦笑)---
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
説明が下手で申し訳ありませんね。 ＞画像のような要素構成をしたいと思うのですがうまくできません・・・ に対するサンプル書いておきました。 又、サンプルを印刷したら、又違う様子になるはずです。 ★HTML4.01strict + CSS2.1です。 ★タブは＿に置換してあるので戻すこと <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;background-color:black;color:white;} /* パンくずリストをデザインしてみる */ p.breadcrumbList{ ＿width:640px;height:100px;margin:20px auto; ＿border:solid gray 3px;background-color:aqua;text-align:right; ＿position:relative; } p.breadcrumbList a{ ＿display:inline-block;width:80px;height:80px; ＿background-color:white;border:1px black solid; ＿text-align:center;margin:10px;line-height:80px; } p.breadcrumbList a:hover{background-color:yellow;} p.breadcrumbList:before{ ＿content:"DIV";position:absolute;left:10px;top:30px; ＿font-weight:bold;font-size:2em;color:black; } div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;} div.nav ol{ ＿display:block;width:640px;height:100px;margin:0 auto;border:solid gray 3px; ＿background-color:aqua;text-align:right;position:relative; } div.nav ol li{ ＿display:inline-block;width:80px;height:80px;text-align:center; ＿margin:10px;position:relative;line-height:80px; } div.nav ol li a{ ＿display:block;width:100%;height:100%; ＿background-color:white; ＿border:1px black solid; } div.nav ol li a:hover{background-color:yellow;} div.nav ol:before{ ＿content:"DIV";position:absolute;left:10px;top:30px; ＿font-weight:bold;font-size:2em;color:black; } div.navi{ ＿display:block;width:640px;height:100px;margin:0 auto; ＿border:solid gray 3px;background-color:aqua;text-align:right; ＿position:relative; } div.navi p{ ＿display:inline-block;width:80px;height:80px; ＿text-align:center;margin:10px;position:relative;line-height:80px; } div.navi p a{ ＿display:block;width:100%;height:100%; ＿background-color:white;border:1px black solid; } div.navi p a:hover{background-color:yellow;} div.navi:before{ ＿content:"DIV";position:absolute;left:10px; ＿top:30px;font-weight:bold;font-size:2em;color:black; } ul.memo{ ＿margin:0.5em 20%;padding:0.5em 2em; ＿background-color:white;color:black; ＿border:solid 1px gray;border-radius:15px; } --> ＿</style> <style type="text/css" media="print"> <!-- a{color:black;text-decoration:none;} p.breadcrumbList a:after{ ＿content:"\A (http://hoge.com"attr(href)")\A"; ＿white-space:pre; } div.nav a:after,div.navi a:after{ ＿content:"\A (http://hoge.com"attr(href)")"; ＿white-space:pre; } --> </style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは様々なマークアップを同じようにデザインする方法を示しています。</p> ＿</div> ＿<div class="section"> ＿＿<h2><a href="http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%B3%E3%81%8F%E3%81%9A%E3%83%AA%E3%82%B9%E3%83%88">パンくずリスト</a></h2> ＿＿<p class="breadcrumbList"> ＿＿＿<a href="/">TOP</a> ＿＿＿<a href="/abc">カテゴリー</a> ＿＿＿<a href="/abc/sss/index.html">サブ</a> ＿＿</p> ＿＿<h2>ナビゲーションリスト</h2> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">span1</a></li> ＿＿＿＿<li><a href="/abc">span2</a></li> ＿＿＿＿<li><a href="/abc/efg">sapn3</a></li> ＿＿＿</ol> ＿＿</div> ＿＿<h2>段落</h2> ＿＿<div class="navi"> ＿＿＿<p><a href="/">span1</a></p> ＿＿＿<p><a href="/abc">span2</a></p> ＿＿＿<p><a href="/abc/efg">sapn3</a></p> ＿＿</div> ＿＿<h2>その他</h2> ＿＿<p> ＿＿＿HTMLがきちんとマークアップさえされていれば、好きなようにデザインできます。それにより ＿＿</p> ＿＿<ul class="memo"> ＿＿＿<li>HTMLは文書構造しか書かないためシンプルでわかりやすくなります。</li> ＿＿＿<li>HTMLには手を加えずスタイルシートを変更するだけでデザインを変更できます。</li> ＿＿＿<li>スタイルシートもわかりやすくなり、HTML、スタイルシートともにメンテナンスが容易になります。</li> ＿＿＿<li>HTMLがきちんとマークアップされているためSEOとしても極めて有利になります。</li> ＿＿</ul> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-12-05</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いえ、構造と言うのは文書の意味的な構造です。 <div class="nav"> <ol> <li><a href="./">span1</a></li> <li><a href="../">span2</a></li> <li><a href="../../">sapn3</a></li> </ol> </div> でしたら、 div.nav ol,div.nav ol li{list-style-type:none;margin:0;padding:0;} div.nav ol{display:block;width:640px;height:480px;margin:0 auto;border:solid gray 3px;background-color:aqua;text-align:right;} div.nav ol li{display:inline-block;width:240px;height:240px;text-align:center;margin:10px;position:relative;} div.nav ol li a{display:block;width:100%;height:100%;background-color:white;border:1px black solid;} div.nav ol li a:hover{background-color:yellow;} で、そのようになります。 また、HTMLが <p class="breadcrumbList"> <a href="./">span1</a> <a href="#">span2</a> <a href="../">span3</a> </p> でしたら、 p.breadcrumbList{width:640px;height:480px;border:solid gray 3px;background-color:aqua;text-align:right;} p.breadcrumbList a{display:inline-block;width:240px;height:240px;background-color:white;border:1px black solid;text-align:center;margin:10px;} p.breadcrumbList a:hover{background-color:yellow;} で良いでしょう。 スタイルシートをどのように書くかは、HTMLの文書構造に従って書いていくので、HTMLの文書構造がわからないと進めないのです。 [前の例]は div.nav ol,div.nav ol li{} class[nav]に所属するolと、class[nav]に所属するolの子孫のliについて div.nav ol{} class[nav]に所属するolについて「サイズや背景」は・・ div.nav ol li{} class[nav]に所属するolの子孫のliについて div.nav ol li a{} その子孫のa要素について div.nav ol li a:hover{} そのa要素にhoverしたら・・ といふうに、 ＞DIVの中で文字列の一部をボタンのようにみせたいというだけなのです。 ＞マイクロソフトのホームページのソースを見るとそのような書き方してありますよ？ マイクロソフトのサイトとあなたのサイトでは、文書構造が違います。 文書構造にしたがってスタイルを書きますが、文書構造がどのようなものであれ、そのようにデザインできるのです。 ためしに、上のソースをテストしてみてください。そしたら、あなたのHTMLに合わせて書き直せばよいです。
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
divやspanへの考えを改めてください。 初歩的ですが、最も重要なことです。ここを間違えてると決して上達できません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 各々、内容が行内であるか(SPAN)ブロックレベルであるか(DIV)は定めるが、他のプレゼンテーション的語彙を示すことはない。 従って著者は、この両要素をスタイルシートやlang属性等と併用することで、HTMLを自身の必要や好みに応じられるようにできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より 順番は、DIVやSPANで文書構造を示し、それを利用してデザインするであって、デザインのためにDIVやSPANを書くのではありません。 たとえば、ナビゲーションリストがあるとすると <div class="nav"> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> と言う風にDIVは使用します。SPANでしら、 <p><span class="mark" id="TagSpan">SPAN</span>は、行内要素のうち多と何らかの区別をしたいときに使用します。STRONGやEM、ABBR、KBDなどでは意味が合わないときに利用します。</p> とか・・・ このように文書構造とプレゼンテーション(表現)を切り離すことで、後でそれを利用してまったく異なるデザインも出来ますし、HTMLをメンテナンスするのも楽でしょう。 ＞画像のような要素構成をしたいと思う ということは、何らかの文書構造があると思います。まず、そのマークアップを教えてください。それが出来ていないなら、そのふたつ?のリンクが何であるかを教えてください。 でのように料理するか示せると思います。
補足
＞ということは、何らかの文書構造があると思います。まず、そのマークアップを教えてください。 そのままの構造ですが・・・ DIVの中で文字列の一部をボタンのようにみせたいというだけなのです。 マイクロソフトのホームページのソースを見るとそのような書き方してありますよ？ 見てみてください。
関連するQ&A
- DIVを選択すると一部のDIVを僅かに大きくする？
画像のようにDIVで要素を構成しているとします。 DIV（B）の中にあるDIV（C)～（G）の要素に触れた場合、DIV（A)が僅かに大きくなるようにしたいのですが、jQueryとかでどのようなメソッドを使ったりすればいいでしょうか？
- ベストアンサー
- JavaScript
- <p>要素をインライン要素にしての右寄せ
<p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- CSS使用時のDIVにおける背景指定について
現在ホームページの作成でＣＳＳをメインに練習を行なっております。 テーブル配置を最小限にと思い、ＣＳＳにて制作を試みておりますが、 ヘッダー部分だけがどうしても上手くいかずつまずいてます。 色々なＣＳＳに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな？とも考え始めております。 でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にＣＳＳに対する理解が低いのかとも思いますが、どうかご教授 をお願いいたします。 先ず構想図から… －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-top" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-cate" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ ｜ ｜ ｜ ｜ ｜ ｜DIV ｜ DIV ｜ ｜id="index"｜ id="main" ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="footer" ｜ －－－－－－－－－－－－－－－－－－－－－－ 上記のようなありがちなレイアウトのＨＰを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。 質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、 横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、 縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、 横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には 横740PXに合わせたナビボタン（w123*h40）を６つ配置したいと考えています。 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく 困っております。 現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li> ・ ・ ・ </ul> </DIV> </DIV> </body> ＣＳＳも書こうと思いましたが、色々とやりくりして今では表示も 配置もおかしくなってしまいましたので、控えさせて頂きました。 また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- 初歩的な質問ですみません。部分的な文字の右寄せです
初歩的な質問ですみません。。 メールマガジンで添付の画像のようなレイアウトを しなければなりません。 テキストの最終行のところに「詳しくはコチラ」を 右寄せで配置する作業なのですが、何をやっても上手 く行きません。 もし、これがいいですよ！という方法がありましたら、 どうか教えて下さい。 ↓これでは、もちろん上手く行くわけないですね。。 <body> <table width="640"> <tr> <td> <p style="font-size:14px;margin:0;padding:0;"> テキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキスト。 <span style="text-align:right"><a href="@">詳しくはコチラ </a> </span> </p> </td> </tr> </table> </body>
- ベストアンサー
- CSS
- cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。 重ねて表示するのはどうすればいいのでしょうか？ 質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- spanで指定する方法教えてほしいです。
<span class="top">Home</span> topで指定したのですが、うまく画像が表示されません。 どうすればうまくbackground-colorのimages/btn046_06.gifが表示されるでしょうか？ よろしくお願いします。 htmlの部分 <div id="left_navi"> <ul> <li><a href="#"><span class="top">Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> <li><a href="#"><span>About</span></a></li> <li><a href="#"><span>Portfolio</span></a></li> <li><a href="#"><span>Contact</span></a></li> <li><a href="#"><span>Home</span></a></li> <li><a href="#"><span>Categories</span></a></li> </ul></nav> </div> cssの部分 #left_navi{ width:230px; height:700px; background-color:#e6e6e6; float:left; } #left_navi ul{ list-style-type: none; padding-top: 20px; color:blue; } #left_navi li{ padding-top:20px; } #left_navi a{ text-align: center; display:block; width:100%; height:40px; padding-bottom:9px; padding-top: 11px; padding-left:-50px; padding-right:30px; background-image:url(images/btn046_05.gif); background-repeat:no-repeat; color:gray; } #left_navi a .top{ background-image:url(images/btn046_06.gif); } #left_navi a:hover{ background-image:url(images/btn046_10.gif); color: blue; }
- ベストアンサー
- CSS
- 一部の文字列の右寄せについて
以下の例のとおり文字列の横に赤と書き赤の文字だけを装飾し右寄せします。 これはテーブルの中に書いているのですが、文字列が長くセル内で折り返し2行で 表示された際に赤の文字は3行目に右寄せされてしまいます。 これを2行目に表示させることはできないでそうか。 よろしくお願い致します。 .right { text-align:right; } .aka { background-color:#FF0000; } あいうえおかきくけこ<DIV CLASS="right"><SPAN CLASS="aka">赤</SPAN></DIV>
- 締切済み
- HTML
- リストを全体的に右寄せにしたい。
リストを横並びにしました。 これを大きいdivで囲んだ中の右寄せにするにはどうしたらよいのでしょうか。 #ex { width: 100%; background-color: #66CCFF; height: 28px; } #ex ul { list-style: none; } #ex li { margin: 0px; padding: 5px 0px 5px 30px; list-style: none; float: left; background: url(***.gif) no-repeat 10px 0.5em; } <div id="ex"> <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> </div>
- ベストアンサー
- HTML
- <Div>の中の要素の数を調べる
こんにちは。 タイトルの文が合っているのか分かりませんが、こういうことです。 たとえば、<div id="box">～～</div>の中に、 <a href="...">～</a>が何個あるかを調べて書き出す方法はありませんでしょうか。 JavaScriptで実現したいんですが、慣れてないので上手く出来ません。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
こんなにも丁寧に書いていただきありがとうございました。 私自身ちょっとデザインに偏り気味だったので、上記のような質問となってしまいました。 おっしゃるとおりちゃんとした骨組みを作った上で肉付けをしていくという方が技術変化にも対応しやすいし、私以外の人がソースをいじっても問題が出にくいですよね。 その辺を意識していこうと思います ありがとうございました。