- ベストアンサー
webサイトのレイアウトについて
tableタグでHPのレイアウトに挑戦中ですが、 自作サイトのトップページ上部にロゴとサイトの売り文句を横一線に<table border=0>で並べようとするのですが、テーブルの1マスと1マスの間に隙間ができてしまいます。 okwebのページ上部にあるキャラクターや『みんなの質問に、みんなで答える、Q&Aサイト！！』と挿入されている、隙間の無い、丸みを帯びたL字型の帯を挿入するためにはどうしたらよいのでしょうか？ ちなみに手元にあるHP作成に役立つツールは ○フォトショップエレメント ○Homepage Manager ○ペイント です。
- tim2
- お礼率72% (109/150)
- CSS
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
隙間のないってのは <table border="1" cellpadding="0" cellspacing="0" width=100%> の事でしょうか？ <table border="1" cellpadding="10" cellspacing="0" width=100%> <table border="1" cellpadding="0" cellspacing="10" width=100%> <table border="1" cellpadding="10" cellspacing="10" width=100%> で比べてもらえば違いがわかると思います。 ちなみに『みんなの質問に、みんなで答える、Q&Aサイト！！』は <td bgcolor="#FFCC00">みんなの質問に、みんなで答える、Q＆Aサイト！！</td> となっていて１つの<td>内に収まっています。※途中省略 それと丸みを帯びた……ですがあれは画像でやっています。 少し高度な(?)技術なのではじめから挑戦っていうのはちょっと厳しいかと。。。 デザインによって全然HTMLが変わるので一概にこうやればできるってのがないですから^^;
その他の回答 (1)
- f14
- ベストアンサー率50% (6/12)
隙間をなくすにはcellspacing=0を追加すればなくなりますが ブラウザによっては隙間ができてしまう物もあるようです。 丸みをつけるのは今のところ画像で処理するしかないと思います。
お礼
お礼が遅くなりまして、申し訳ありません。 いまはただ、『とりあえずサイトのレイアウトがIE上で完成したらいいや』と軽い気持ちで作成していたのですが。ブラウザに依存されるんですねー勉強になりました。 ご回答ありがとうございました。
関連するQ&A
- htmlのtableレイアウトについて
こんばんは。訳あってｃｓｓとテーブルの両方のレイアウト手法を用いた サイト作りをしています。準初心者です。 昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、 テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーｇｉｆなど も多用されていたりと、悲惨な有様なので、必死に修復しているところです。 テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた のですが、ある問題に突き当たりました。 divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、 ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。 <TABLE style=" border:0px;padding:0px;margin:0px;・・とするとｄｉｖのブロック要素と テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何ｐｘかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではｔａｂｌｅ要素にｈｔｍｌでwidth="400" と指定されていたものをｔａｂｌｅタグ内に <TABLE style=" border:0px;padding:0px;margin:0px; ｗｉｄｔｈ:400px;> と指定し直した結果、計らずしもこの隙間は無くなりました。 そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください！
- 締切済み
- CSS
- WEBサイトのデザインについて教えてください。
少し前から趣味でホームページを作成するようになり、今ではかなりホームページに興味を持つようになりました。今は飲食店でアルバイトをしているのですが、将来はWEBデザイナーになりたいと思っています。 無料で作れてテンプレートを使用し作成できるサイト作りに飽きてしまい、先日ドリームウィーバーを購入して勉強しています。HTML,CSSはある程度習得できたと思っています。 そこで質問なのですが、tableタグを使用してサイトをデザインしていくのはいけない（好ましくない）のでしょうか？とあるサイトを見てみると、「tableは表を表すタグなのでできる限り使用しない方がよい。CSSを用いてpositionを使用した方が好ましい」といった事が書かれていました。他にも「tableタグ内にtableタグを挿入するのはよくない。spamサイト（？）扱いにされてしまう事がありSEO対策も悪い。」といった事も聞いたことがあります。 今まで私はtableタグを使い、CSSのtext-align:center;を使用して配置していましたのでそのような記事を見てしまい「今まで間違ったことをしていたのだろうか」と思っています。しかし、綺麗に作られたサイトのソースを見たりしてもtableタグを使用しているサイトもあり、実際はどうなのだろうかと心配です。例えば<table>を使用していけないのか、 <table><tr><td> <table> <tr><td> </td></tr> </table> </td></tr></table> 上記のように（見にくくてすみません）table内にtableタグを使用してはいけないのか・・・。いろいろな情報がありすぎてどれが一般的に使用していいのかさっぱりです。 皆様はどのようにWEBデザインをなさっているのでしょうか。やはりtableを使用しないのでしょうか。 説明が長くなってしまいましたが、どなたかご教授していただけませんでしょうか。本気で目指していきたいと思っております。どのような意見でもかまいません。よろしくお願いいたします。
- ベストアンサー
- その他([技術者向] コンピューター)
- tableタグによるエラー
モバイルサイトの制作の際に tableタグを使用した箇所で ページスクロールをすると 意図しない場所に飛ぶことがあります。 例えばページ下部にtableタグを記述し 実機で最下部から上部へ ページスクロールするとtableタグの箇所で 最上部に飛んでしまうことがありました。 記述ミスではなくtableタグを使わないと 直りました。 モバイルサイトの制作の際、 複雑なレイアウトにする場合、tableタグが必要になります。 これはどのようなことが原因なのでしょうか。
- 締切済み
- HTML
- WEBサイトを作りたいのですが、１つコンプライアンス的にどうなのか分か
WEBサイトを作りたいのですが、１つコンプライアンス的にどうなのか分からなかったので質問させてください。 やりたいことというのは、自分のドメイン化にフレームのページを置いて、上部には自分のサイトのヘッダーを表示し、その下のフレームに別のサイト（お店の公式HPのようなサイト）を読み込んでページにすることです。 これって問題ありますか？ また、こういうページをご存知の方いらしゃったらURLを教えて頂きたいです。 よろしくお願いします。
- 締切済み
- ネットトラブル
- tableを縦に続けるとtable間の空間が気になります
tableを使ってHPを作っていますが、tableを下記のように縦にいくつも作っていると各table間が中途半端に隙間が出来てしまいます。もっと上下のtableをくっつけたいのですが何か方法は無いでしょうか？ <table> <tr><td></td></tr></table> ------------ ここ ---------- <table> <tr><td></td></tr></table> ------------ ここ ---------- <table> <tr><td></td></tr></table>
- ベストアンサー
- HTML
- ブラウザの上にぴったり表をおく方法
いろいろなサイトで（OKWEBもそのひとつ）でおそらくtable のタグを使っているのだと思いますが、ブラウザの一番上まで隙間がない状態で設置する方法がわかりません。実際に試してみましたが、隙間のない状態で設置できませんでした。どうかおしえていただけないでいしょうか ？お願います。
- 締切済み
- HTML
- 要素間、要素内に隙間が空く
CSSを組んでいて、どうしても理由がわからない現象が２つあります。以下のソースは簡略化しています。 １．隣接する要素間に隙間があく <header> <div id="branding">...</div> <nav id="access">...</div> </header> となっており、 div#branding,nav#access {margin:0;padding:0;} を指定しているのに、両者に隙間があいてしまいます。（floatなども指定していません） ２．<div>内の要素の<table>の上部にだけ隙間があく <aside id="sidebar"> <div id="calendar_wrap"> <table>...</table> </div> ： </aside> となっていて、 table { margin:0; padding:0; } と指定しているのに、tableの上部にだけ隙間があいてしまいます。他にtableに関してスタイルを指定している箇所はありません。 インスペクタで見ても、謎の空白があるだけです。positionは全てstaticで、明示的に位置を指定するようなこともしていません。その他の部分は同じように指定しているのに、これら２つだけが意図しないように表示されてしまいます。 一般論として、どのような場合にこのようが現象が起こりうるのでしょうか。
- 締切済み
- CSS
- インターネットのサイトに
例えば、このOKwebの場合、皆さんの質問や解答がどんどん積み重なって、ふえていくじゃないですか。 １つのサイトにどんどん溜まっていくことで困ってしまうこととかあるんですか？ 例えば、そのページを開くのに時間がかかってしまうとか・・・。 そういうことの、解決策ってあるのですか？
- ベストアンサー
- その他（インターネット・Webサービス）
- ＣＳＳレイアウトの中にテーブルのような使い方でＣＳＳを入れ子にする方法で質問です。
テーブルを一切つかわないでサイトを作成したいと思っていて、 現在ＣＳＳで２カラムのレイアウトをしています。 困っているのが、 ページの下部に”前のページ ＨＯＭＥ 後ろのページ” という風に横に３つならべたいと思っています。 テーブルであれば簡単にできることなのですが、 それをＣＳＳでできないかと思っております。 そこで外部ＣＳＳに .table{ width: 10px ; background-color: #ffffff; margin: 5px; border: solid 0px ; padding: 0.5em; } と記述し、ＨＴＭＬ部分に <p><span class="table">前のページ</span> <span class="table">ＨＯＭＥ</span> <span class="table">後ろのページ</span></p> という風に記述してみたのですが、 文字を打っていくとどんどんよこに伸びて、横幅を指定している意味がないような感じです。 私のようなＣＳＳの使い方をしたい場合はどのように記述すればよろしいのでしょうか？
- ベストアンサー
- HTML
- webページのリンクの仕方
webページを自作しようと思っています。 以前簡単なものは作ったことはありますが少し本格的な のをと考えています。 形としては参考としてhttp://get.daa.jp/の様な形を 考えています。 webを三つに分け上部のテーブルにタイトル（ロゴ）と その下に「紹介用」のボタン３個程を並べ、左のテーブル には「内容のリスト」を５個程縦に並べます。 上部の紹介用と左の内容リストのボタンを押した時、 文章等を右側のテーブルにページを移動せずに表示する にはタグをどの世様に書けば良いのでしょうか？ 参考のサイトを真似して作ってみたのですが未熟者で 思うようになりませんでした。 ここでお聴きして良いのかどうか判りませんが差し支え なければ教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
お礼
返事が遅くなり申し訳ありません。 詳しいご回答ありがとうございました！ なるほど、『cellpadding』というタグがあるとは知りませんでした。まだまだ勉強不足です。 画像の編集については、頑張って自力で解決したいと思います。（もしギブアップすることになったらその時はまたよろしく御願いします。^^;