- ベストアンサー
divの中にspanを右寄せにするには？
画像のような要素構成をしたいと思うのですがうまくできません・・・ 詳しい方教えていただけませんでしょうか？ divの中にspanを何個か右寄せで配置したいと考えています。 最近のマイクロソフトのサイトのようにボタンをspanで作りたいと思っています。 divで右寄せをしようとするとdivの中にa hrefを含めることは出来ないといったエラーが出てしまい困っております・・・
- みんなの回答 （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の中で文字列の一部をボタンのようにみせたいというだけなのです。 マイクロソフトのホームページのソースを見るとそのような書き方してありますよ？ 見てみてください。
お礼
こんなにも丁寧に書いていただきありがとうございました。 私自身ちょっとデザインに偏り気味だったので、上記のような質問となってしまいました。 おっしゃるとおりちゃんとした骨組みを作った上で肉付けをしていくという方が技術変化にも対応しやすいし、私以外の人がソースをいじっても問題が出にくいですよね。 その辺を意識していこうと思います ありがとうございました。