divの中にspanを右寄せにするには？

Question

画像のような要素構成をしたいと思うのですがうまくできません・・・
詳しい方教えていただけませんでしょうか？

divの中にspanを何個か右寄せで配置したいと考えています。
最近のマイクロソフトのサイトのようにボタンをspanで作りたいと思っています。
divで右寄せをしようとするとdivの中にa hrefを含めることは出来ないといったエラーが出てしまい困っております・・・

ORUKA1951 · Accepted Answer

ソースを書くだけで許容文字数をオーバーしてしまったので説明を　右寄せに配置したい＝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は、

　TOP 　カテゴリー　サブ

　なのです。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にも対応させるため、いびつなマークアップやスタイルシートが使われています。あまり参考にはならないと思います。　ただ、デザインはこなれていますから、外観だけはとても良い参考になりますね。--ソースは糞ですが(苦笑)---

ORUKA1951 · Answer

説明が下手で申し訳ありませんね。＞画像のような要素構成をしたいと思うのですがうまくできません・・・に対するサンプル書いておきました。　又、サンプルを印刷したら、又違う様子になるはずです。 ★HTML4.01strict + CSS2.1です。 ★タブは＿に置換してあるので戻すこと＿＿サンプル＿＿＿＿＿＿＿

＿＿

パンくずリスト

＿＿

＿＿＿TOP ＿＿＿カテゴリー＿＿＿サブ＿＿

＿＿

ナビゲーションリスト

＿＿

＿＿＿

span1
span2
sapn3

＿＿

段落

＿＿

＿＿＿

span1

＿＿＿

span2

＿＿＿

sapn3

＿＿

その他

＿＿

＿＿＿HTMLがきちんとマークアップさえされていれば、好きなようにデザインできます。それにより＿＿

＿＿

HTMLは文書構造しか書かないためシンプルでわかりやすくなります。
HTMLには手を加えずスタイルシートを変更するだけでデザインを変更できます。
スタイルシートもわかりやすくなり、HTML、スタイルシートともにメンテナンスが容易になります。
HTMLがきちんとマークアップされているためSEOとしても極めて有利になります。

＿

ORUKA1951 · Answer

いえ、構造と言うのは文書の意味的な構造です。

でしたら、 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が

span1 span2 span3

でしたら、 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 · Answer

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は使用します。SPANでしら、

SPANは、行内要素のうち多と何らかの区別をしたいときに使用します。STRONGやEM、ABBR、KBDなどでは意味が合わないときに利用します。

とか・・・　このように文書構造とプレゼンテーション(表現)を切り離すことで、後でそれを利用してまったく異なるデザインも出来ますし、HTMLをメンテナンスするのも楽でしょう。＞画像のような要素構成をしたいと思う　ということは、何らかの文書構造があると思います。まず、そのマークアップを教えてください。それが出来ていないなら、そのふたつ?のリンクが何であるかを教えてください。　でのように料理するか示せると思います。

divの中にspanを右寄せにするには？

ソースを書くだけで許容文字数をオーバーしてしまったので説明を

説明が下手で申し訳ありませんね。

いえ、構造と言うのは文書の意味的な構造です。

divやspanへの考えを改めてください。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング