- ベストアンサー
メニューの正しい配置の仕方
現在、テーブルを使ってページを左右に二分し、左側にサイトの目次を、右側に本文を記述しています。 <table> <tr> <td>目次部分</td> <td>本文</td> </tr> </table> しかし、この方法は良くないと聞き、CSSを使って配置をしようと考えています。 Wikipediaみたいな感じに、HTMLでは本文を先に記述し、その下にメニューの部分を記述、そしてその部分をCSSで本文の右側に配置しようと思い、Wikipediaのソースを見てみたのですが、複雑でよくわかりませんでした。 Wikipediaの方法でなくても構いませんので、どなたか、アクセシビリティを考慮したメニューの作り方をご存知の方がいらっしゃいましたら、教えていただけないでしょうか。
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
<div style="float:right"> 本文 </div> <div style="float:left"> メニュー </div> <div style="clear:both"></div>
お礼
お礼が遅くなり失礼いたしました。ご回答ありがとうございます。floatを使えばよかったのですね。
関連するQ&A
- テーブルを左右に並べて表示させたいのですが
テーブルを左右に分割して、左側にメニュー、右側に静的な文字を表示させています。 <table> <tr><td>メニュー</td> <td>静的な文字</td><tr></table> 左側のメニューをクリックすると子メニューが現れて行数が増えるメニューにしました。 --書籍のJavaScriptを応用したらうまく作れました。 ただ、右側の静的な文字が、（左側親メニューをクリックし子メニューが現れ、左側の行数が増えることによって）下がってしまいます。 <td></td>の間にもうひとつテーブルをいれても、同じです。 CSSか何かで定義できそうな気もしますが、よくわかりません。（CSS使ったことがありません。） ご存知の方おられましたら、よろしくお願いします。
- ベストアンサー
- HTML
- HTMLでテーブルをfloatで中央配置に並べたい
よろしくお願いします。 floatを使ってテーブルを横に複数個並べているのですが、全体が左に寄ってしまいます。 並べたテーブルすべてを中央に配置するにはどうしたらよいのでしょうか。 テーブルとテーブルの間の隙間を固定にしたいので、マージンは固定です。 ■HTML <body> <table><tr><td>TEST1</td></tr></table> <table><tr><td>TEST2</td></tr></table> <table><tr><td>TEST3</td></tr></table> </body> ■CSS table{ float: left; width: 100px; border: 1px solid #000000; margin: 0px 10px 0px 10px; } よろしくお願いいたします。
- ベストアンサー
- CSS
- cssの書き方について
下記の記述をhtmlにしました。 <table border="1"> <tr><th>あああ</th><th>いいいいい</th></tr> <tr><td>ううううう</td><td>おおお</td></tr> </table> <table border="1">のtdやthに有効にさせるcssを記述する際には どのように記述すればよいのでしょうか？ .1で良いのですかね？ よろしくお願いします
- ベストアンサー
- HTML
- テーブルの中央配置
内容を中央揃えにしたく、以下のようにCSSで記述してみたのですが、テーブルが揃いません。どうすればよいのでしょうか？ <head> <style type="text/css" media="screen"><!-- body { background-color: #cecece; text-align: center; } --></style> </head> <html> <body> aaa <table width="64" border="1" cellspacing="2" cellpadding="0"> <tr> <td>bbb</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- テーブルの中の文字の配置について
いつもお世話になっています。 テーブルの中の文字の配置について教えて下さい。 会社のサイトリニューアルに当たり、ネット検索して商用利用OKのテンプレートをダウンロードし、カスタマイズしています。 このテンプレートにはテーブル要素がなかったので自分でCSSに記述を付け加えたのですが、文字の配置が思うようにいきません。 ２列の１０行の表で左に項目(th)右に詳細(td)の表を作っています。 詳細の部分は複数行なのですが、項目の方は一行です。 これを普通にテーブルにすると項目の文字が上下左右の配置が同じ、すべて中央になってしまいます。 項目の文字も左寄り、上寄せにしたいのですが、どう記述すればいいのでしょうか？ ソースは html部分 <div id="main"> <table> <tr><th>名称</th><td>＊＊＊＊＊＊株式会社</td></tr> <tr><th>代表者</th><td>代表取締役社長 ＊＊＊ ＊＊＊</td></tr> <tr><th>所在地</th><td>〒101-0032</br>東京都＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊</td></tr> <tr><th>電話番号</th><td>00-0000-0000(代表)</br>FAX 00-0000-0000 IP電話 000-000-000</td></tr> <tr><th>営業所</th><td>＊＊営業所</br>茨城県＊＊＊＊＊＊＊＊</br>電話0000-00-0000</td></tr> </table> </div> CSS部分 div#main table { margin: 30px 50px 30px 30px; border: solid 1px #666; border-collapse: collapse; } div#main table th { text-align:left; text-valign: top; } div#main table th, div#main table td { padding: 10px; font-size:0.75em; line-height: 1.7; border: solid 1px #666; } と、なっています。 div#main table th { text-align:left; text-valign: top; } の部分は自分で付け加えました。 これでなんとか左寄せにはなりましたが、上下は相変わらず中央配置のままです。 CSSにはあまり詳しくなく、タグを見ながらだいたいの規則性を読んでいますので、根本的な勘違い等あるかもしれません。 足りない情報がありましたら補足しますので、よろしくお願いします。
- ベストアンサー
- HTML
- スタイルシートでtableをセンター配置
先日からいろいろとここで教えていただいてますが、また壁にぶつかってしまいました。とりあえず下記のソースを見てください。 <html> <head> <title>タイトル</title> <style type="text/css"> <!-- body{margin-top:0; margin-bottom:0;} .tt1{background-color:#ccffcc; line-height:150%; vertical-align:top;} --> </style> </head> <body> <table align="center" width="600" height="100%" border="0" cellspacing="0" cellpadding="30"> <tr><td class="tt1"> 本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります。 </td></tr> </table> </body> </html> （宣言とmetaは省略） これで画面を縦に3分割したレイアウトで真ん中の色のついたエリアに文字や写真を入れていくフォーマットになります。しかしW3Cによる定義では厳密にはtableの「align」と「height」は非推奨になっているようなのです。そこで、cssで指定しようと思うのですが、tableを左右方向で常にセンターに配置するのと、真ん中の色の部分を画面下にぴったりくっつけるのがどうやってもできません。 どなかかヒントでも結構なのでいただけませんでしょうか・・・
- ベストアンサー
- HTML
- CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？
CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？ 例えば、HTMLで一行に3列になるよう以下の様に記述した時に <table> <tr> <td> <p>テキスト左</p> </td> <td> <p>テキスト中</p> </td> <td> <p>テキスト右</p> </td> </tr> </table> CSSでのそうさのみによって 見栄え的に縦3行、横1列に見えるようにできますでしょうか？ 幅などをピクセル制限したりするのでも構いません。 もしHTMLで実現するとするならば <table> <tr> <td> <p>テキスト左</p> </td> </tr> <tr> <td> <p>テキスト中</p> </td> </tr> <tr> <td> <p>テキスト右</p> </td> </tr> </table> 上記のような記述になると思いますが、あくまで最初のHTMLをCSSで変更して、HTML本体は書きかえない方法です。 もし、何らかの形で実現できそうな場合がありましたらアイディアをください。 お忙しいところお手数おかけしますが、よろしくお願いいたします。 ※CSS記述の変更のみ。 ※特定のブラウザに依存させたくない。 ※Javasprictは使用しない。
- 締切済み
- HTML
- IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい
お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1> <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ～行が続きますが省略～ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- 背景画像に任意の位置でテキストを配置する
CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか？ もっとスマートな方法はないんでしょうか？ CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>
- ベストアンサー
- CSS
- CSSでdiv内を下揃え
CSSでdiv内を下揃えは出来ないものでしょうか? テーブルを使った時の以下の表現をCSSで表現したいです。 <TABLE border="0" height="200"> <TR> <TD>ここは上から●pxに画像配置</TD> </TR> <TR> <TD valign="bottom">ここを下揃えで画像表示</TD> </TR> </TABLE> テーブルならすぐできるのですが… 下揃えの方法があれば教えてください。
- ベストアンサー
- CSS
お礼
お礼が遅くなり失礼いたしました。ご回答ありがとうございます。うまくいきました。 この2つのサイト、どちらも面白そうですね・・・。