- ベストアンサー
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のどのプロパティを使えばいいのでしょうか？ 回答よろしくお願いします。
- miya_HN
- お礼率100% (1683/1683)
- HTML
- 回答数4
- ありがとう数5
- みんなの回答 （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」を調べてみます。 ありがとうございました。
関連するQ&A
- CSS line-height が効かない
下記のように<table>の行の間隔を狭める為、CSSのline-height: をつかっているのですが、 <td>の内側に<a hrefを使っているのが原因なのか、line-heightが効きません。 sample.css table td.aa { font-size : 0.8em; line-height:150%; } sample.html <table> <tr><td class="aa"><a href="http://......">ああああああああ</a> </td></tr> <tr><td class="aa"><a href="http://......">いいいいいいいい</a> </td></tr> </table> どなたかお助けください。
- ベストアンサー
- HTML
- 文字色を変更するCSSが効かない
テーブルのヘッダ部分の文字色を変更したくて下記CSSとHTMLを記述したのですが 文字色を変更するcolorが効かなくて困っています。 背景色は変更されるのでbackgroudは効いています。 原因はお分かりになりますでしょうか。 【CSS】 table thead tr td { clolor:red; background:black; } 【HTML】 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" href="test2.css" type="text/css"> <script> </script> </head> <body> <table> <thead> <tr> <td>名前</td> <td>金額</td> </tr> </thead> <tbody> <tr class="odd"> <td>abc</td> <td>3000</td> </tr> <tr class="even"> <td>xyz</td> <td>100</td> </tr> <tr class="odd"> <td>myk</td> <td>20000</td> <tr class="even"> <td>xyz</td> <td>100</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
- CSS で横に並べるには
CSS 初心者です。 □□ 上記のように横に表示させたいのですがうまくいきません。 <div>で方法ないものでしょうか？ つまり <CENTER> <TABLE BORDER="1"> <TR> <TD>●</TD> <TD>■</TD> </TR> </TABLE> </CENTER> のような感じです。 ●には普通にHTMLページを ■にはフレームペーを入れたいと思っています。 cssでなくてもかまいません。フレームでも可です。 ただテーブルを中央寄せ（センタリング）にしたいんです。 よろしくお願いします。
- 締切済み
- HTML
- ■至急■html詳しい方 テーブル内のリンク書式
htmlでテーブル内にリンクを貼った場合の書式設定が 反映しません。 下記のテーブル内のTOP , PROFILEなどの文字色、文字サイズを 変更したいのですが、<font size="20">と書いても全く反映しません。 書く場所が悪いのでしょうか？ <html> <head> <title>memuページ</title> <!--<link href="./style.css" rel="stylesheet" type="text/css">--> <body link="WHITE" vlink="WHITE" alink="WHITE"> </head> <body> <BR> <table width="1200" border="0" cellspacing="0" cellpadding="5" align="center"> <tr bgcolor="pink"><font size="20"><td colspan="2"><b> <td width="250" height="30"><a href="./main.html" target="main">｜TOP｜ <td width="250" height="30"><a href="./profile.html" target="main">｜PROFILE｜ <td width="250" height="30"><a href="./shop.html" target="main">｜SHOP｜</td> <td width="250" height="30"><a href="./help.html" target="main">｜HELP｜</td></font> </table> </body> </html>
- ベストアンサー
- HTML
- ホームページ作成でリンクを作成する方法
例えば、「プロフィール」「日記」「掲示板」という文字をリンクに使いたいとします。その文字を横一列に並べると、 <a href="URL">プロフィール</a><a href="URL">日記</a><a href="URL">掲示板</a> となりますが、これでは表示上、 プロフィール日記掲示板 このようになり文字がつながった状態になってしまいます。 これは通常、特殊文字のスペースを使えばいいのでしょうか？それともほかの方法はあるでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- セルをまたがるリンク。
セルをまたぐようなリンクを作りたいのですが、何かいい方法はないでしょうか。 記述は間違っていますが、イメージ的には以下のようなことがしたいです。 <table> <tr> <td><a href="#">09月20日</td> <td>題名</a></td> </tr> </table> これができない理由はなんとなくわかっているので、これを実現するような方法は何かないでしょうか？
- ベストアンサー
- HTML
- CSS セルごとリンクにする際、リンク文字を上下中央寄せにしたい
セルごとリンクにしたくて、以下の記述をしました。 【CSS】 ------------------------------------------------------------------ a.widelink{ vertical-align:middle; display:block; // display:inline-block; width: 100%; height:100%; // line-height:100%; color: #000000; text-decoration:none } a.widelink:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; text-decoration:none } td.bgchng{ align: center; vertical-align: middle; color: #000000; margin: 0px; padding: 0px; } td.bgchng:hover{ vertical-align: middle; color: #000000; background-color: #9999FF; margin: 0px; padding: 0px; } ------------------------------------------------------------------ 【HTML】 ------------------------------------------------------------------ <TABLE border="1" bordercolor="#6666CC" cellspacing="0"> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test01.html" CLASS="widelink"> テスト<BR>（その１） </A> </TD> <TD width="450" bgcolor=""> テスト（その１）の説明文<BR> 二行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test02.html" CLASS="widelink"> テスト（その２） </A> </TD> <TD width="450" bgcolor=""> テスト（その２）の説明文<BR> 二行目<BR> 三行目 </TD> </TR> <TR> <TD width="150" height="60" valign="middle" align="center" CLASS="bgchng"> <A href="test03.html" CLASS="widelink"> テスト（その３） </A> </TD> <TD width="450" bgcolor=""> テスト（その３）の説明文<BR> 二行目 </TD> </TR> </TABLE> ------------------------------------------------------------------ この記述だとリンク文字がセルのTOPに来てしまい、中央寄せになりません。 思いつく限りの場所にvertical-alignやvalignを仕込んでみましたがダメでした。 line-heightであわせる方法もやってみましたが、<BR>を含むリンク文字の表示が二行揃ってくれず、ダメでした。 セル自体をリンクにして、さらにリンク文字を上下中央寄せにしたいのですが、やり方をご存知の方、教えてください。
- 締切済み
- HTML
- フォームに入力した文字を挿入して出力する方法
フォームに入力した文字を挿入して出力する方法 JavaScript初心者です。 複数のフォームに入力した文字をタグなどに挿入して、 テキストエリアに出力するにはどうしたらいいのでしょうか？ ↓出力例 <table> <tr><td><a href="あああ">いいい</a></td></tr> <tr><td><a href="あああ">ううう</a></td></tr> （改行） <tr><td><a href="えええ">いいい+ううう</a></td></tr> </table> よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSで文字をリンク付き文字へ変える
CSSを使って、文字を画像へ置き換えることが出来るということを知ったのですが、 ある文字をリンクつきの文字へ置き換えることは可能ですか？ たとえばこんなかんじです。 実際のソース aaaaa uaaaaa CSSの定義で aaaaa⇒<a href="http://">あいう</a> 表示されるもの あいう uあいう という感じで、あいうはhttp://のリンク入り。 調べてみてもヒットしないので、出来ないのかなという感じがしますが。 CSS以外でも方法があれば教えていただきたいです。 わかる方、回答よろしくお願いします。
- ベストアンサー
- HTML
- リンクを張った文字列の色
次のようにするとlink、hover、active、viewedのそれぞれの場合に「リンク先のページのタイトル」の文字列の色がgreen、#ffdddd、#ffffdd、maroonになると思ったのですが、うまくいきません。maroonのままです。 <html> <head> <style type="text/css"> <!-- table {font-size:12px; } a.x:link {color:green; text-decoration:none; } a.x:hover {color:#ffdddd; } a.x:active {color:#ffffdd; } a.x:visited {color:maroon; } --> </style> </head> <body> <table border="0" width="100%" height="400" text="bold"> <tr><td><a href="http://www......html" class="x" target="_blank">リンク先のページのタイトル</a>/td></tr> </table> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
お礼
テーブルを使わなくてもできるんですね。文字間の均一の参考URLは大変参考になりました。 tdやtrにもwidthを指定することができるんですね。 ありがとうございました。