- ベストアンサー
CSS：横一列にリンクする文字の見栄えをよくする
リンクする文字が横一列のとき、見栄えをよくするのにテーブルを使うと思うのですが、そのときの質問があります。 ■HTML <table> <tr> <td><a href="">プロフィール(Profile)</a></td> <td><a href="">日記(Diary)</a></td> <td><a href="">絵(Picture)</a></td> <td><a href="">疑問(Question)</a></td> </tr> </table> このような場合、CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？ また、リンクする文字と文字の間（プロフィール(Profile)←→日記(Diary)）を均一にするにはCSSのどのプロパティを使えばいいのでしょうか？ 回答よろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
テーブル使わなくともできます。 文字の間を均一にするとかは以下を熟読してもらえば理解出来ます。 http://allabout.co.jp/internet/hpcreate/closeup/CU20050108A/index.htm もちろん、tdやtrにwidth等を指定する事もできます。 /*12文字分でセンター寄せ*/ td { width:12em; text-align:center; } ↓テーブルの装飾の例 http://allabout.co.jp/internet/hpcreate/closeup/CU20061004A/
その他の回答 (3)
- kazumero
- ベストアンサー率40% (20/49)
テーブルは表を作成するタグなので、見栄えをよくするのに用いるのは不適切です。 リンクを並べる場合、リストを用いるのが適切です。 ただ、そのまま用いると、中黒がついたり、縦に並んでしまうので、CSSで制御します。試しに簡単なリンクメニューを作ってみました。 <html> <head> <style type="text/css"> #navi{ background-color:#999966; border-top:solid 1px #003333; clear:left; height:18px; list-style:none; margin:0px; padding:0px; width:100%; } #navi li{ display:block; float:left; width:150px; border-right:solid 2px #003333; } #navi a{ display:block; line-height:1.3em; width:150px; color:white; background-color:#999966; font-size:14px; text-align:center; border-bottom:none; } #navi li a:hover{ background-color:#99cccc; color:#003333; } </style> </head> <body> <ul id="navi"> <li><a href="">プロフィール(Profile)</a></li> <li><a href="">日記(Diary)</a></li> <li><a href="">絵(Picture)</a></li> <li><a href="">疑問(Question)</a></li> </ul> </body> </html> これなら、横幅の長さも均一になっています。
お礼
リンクを横一列に並べるにはテーブルよりリストの方がいいんですね。 まだCSSはほとんど勉強していないので書かれていることは分かりませんが、これから勉強して理解しようと思います。 ありがとうございました。
- himajin100000
- ベストアンサー率54% (1660/3060)
>均一 え？text-justifyの話なの？marginとかpaddingの話だと思ってたんだけど >CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？ http://www.w3.org/TR/CSS21/visudet.html#propdef-width tr要素に効かないのはCSS2.1の仕様。 td要素には効くはず。 ただし http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout を気にしておかないと穴に嵌ることがあるから注意。
お礼
まだ、CSSどころかHTMLを始めたばかりなので、具体的なプロパティは分からなかったのですが、今回は「margin」「padding」の話です。 CSS2.1の仕様ではtrが効かないんですね。気をつけます。 ありがとうございました。
- STICKY2006
- ベストアンサー率29% (1536/5269)
>>このような場合、CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？ 記述の方法が違うからかと。 とりあえず、自分はよくやってるんで、できるはずですよ。 >>均一にするにはCSSのどのプロパティを使えばいいのでしょうか？ text-alignのtext-justifyとかで調べてみてください。
お礼
「td」や「tr」で「{width}」を使うことができるんですね。 「text-align」「text-justify」を調べてみます。 ありがとうございました。
お礼
テーブルを使わなくてもできるんですね。文字間の均一の参考URLは大変参考になりました。 tdやtrにもwidthを指定することができるんですね。 ありがとうございました。