• ベストアンサー

表をcssでデザインする場合

css初心者です。宜しくお願いします。 テーブルの各セル幅のサイズを指定してセルの背景やセル内の文字をcssで装飾したいのですが、こういう場合、セル幅はhtmlタグで指定しておくべきなのでしょうか? またセル内に余白を設けたい場合はhtmlタグとcssのどちらで指定すればいいのでしょうか? cssが効かないブラウザで見た時のことを考えると幅サイズや余白をhtmlタグで指定した方がセルがくっつかず見やすいのかな~?と思ったのですが。 アホな質問でしたらすみません。 宜しくお願いします。

  • CSS
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
noname#39970
noname#39970
回答No.1

>セル幅は CSS >セル内に余白 画一的ならCSS 単発空白なら   >cssが効かない 気にしてたらCSSなぞ全く使えない どこか斬捨てないと無理

samush
質問者

お礼

ありがとうございました。 そのようにさせて頂きます。

その他の回答 (1)

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.2

> cssが効かないブラウザで見た時のことを考えると幅サイズや余白をhtmlタグで指定した方がセルがくっつかず見やすいのかな~? > 気にしてたらCSSなぞ全く使えない > どこか斬捨てないと無理 #1の回答者SAYKA.さんのおっしゃるとおりですね。CSS未対応或いは無効環境は少ないと見てスルーすべきです。 それにCSSは機能を切り分けるためのものと言うか見た目に関する指定のみを行うためのものです。 CSSを無効にしたとき未整形状態になっても問題なし。 と言うかCSSを無効にしてる人は大抵が分かってて無効にしてるんだからわざわざ考慮する必要もないでしょう。 CSSが無効な環境でCSS有効状態並みのデザインを提供しろだなんて言うアホな事を言う人はそうそういないかと思います。 いたとしたらその人は相当わがままでわからずやで技術に関する知識の乏しい人だということです。 ま、視覚エフェクト関連に関して本文に何か記述している場合(解説その他)は注意書きくらい書く程度のことは行ってもいいと思うけど。 CSSの効かないブラウザに対して視覚的な面で考慮すべきものがあるとすればそれは画像のサイズ云々だけ。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#img-size

samush
質問者

お礼

たまにdividerを使っているサイトを見るとcss非対応ブラウザにやさいい気配りだなーなんて思ったりしますけど、割合的には確かに非対応ブラウザは少ないのでとりわけ考慮せずに行こうと思います。ありがとうございました。

関連するQ&A

  • CSSでの表の作成について

    CSSでの表の作成方法を教えてください。 table要素使わずCSSのみで表の作成は可能でしょうか? 作成したい表は 2列10行の表で、列幅は それぞれ違った幅を指定、行の高さも それぞれの行によって 高さを変えたいと思っています。 背景色の指定、ボーダーの指定もしたいです。 table要素使わずCSSのみで表を作成するには、どうしたらいいのか教えてください。 初心者なので、CSSの内容とHTMLの内容(ソース)を書いたものがあると助かります。 どうかよろしくお願いします。

  • CSSで表のデザインをするには

    ホームページの作成を今めざしています。 それで、デザインをしやすいようにCSSを使って作ろうと思っているのですが、よくわからないことがいくつかありまして・・・。 文字のデザインは他のサイトやブログなどを参考にして何とかなったのですが、表を使ってレイアウトしようとするとうまくいきません。 そこで質問なのですが、 1.ウインドウの幅を縮めてもレイアウトが崩れないようにするにはどうすればよいのでしょうか? 2.表のセルごとに異なる配色や幅を指定するにはどうすればよいのでしょうか? これがどうにも分かりません・・・ この方法が分かる方、ご指導いただけると幸いです・・・

  • CSSを適用したい

    JavaScriptについて、全くの素人です。 すみませんが教えてください。 自分のホームページに、フリーで提供されているJavaScriptのカレンダーを入れようを思っています。 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ http://www.wind.sannet.ne.jp/alfix/javascript/etc/6.html 文字サイズが、<FONT size="-1">のようにタグで指定されているので、ブラウザで文字サイズが変更できないようにCSSで文字サイズを指定したいと思っていますが、カレンダーの中がどうしても反映できません。 どこをどのように書き換えれば、文字サイズをCSSで指定できるかを教えていただけないでしょうか? よろしくお願いします。

  • webデザインcss <p>タグ内の長文について

    初歩的な質問失礼致します。 webデザイン初心者です。現在サイトの制作中なのですが、<p>要素の長文について何点かわからない所が出てきたので質問させていただきます。 (1) <p>要素で記述した文章の折り返し地点は、<br>を使用しない限り<p>要素に指定したwidth幅によってきまるのでしょうか? (2) その場合、背景画像を<p>に指定したら自動的にその背景画像も同じwidthになるのでしょうか? 添付画像の上の図のように、<p>要素にcssで背景画像を指定して、その上に上下左右それぞれ余白をとって長文を配置したいのですが、添付画像の下のような状態になってしまいます。 以下がcssです。 p { background: url(図の水色部分) no-repeat 0 0 ; width:691px; padding: 16px 230px 16px 30px; } (リセットcssでmargin.padding.borderはそれぞれ0にしてあります。) <p>を囲む<div>を作ってそれに背景画像を指定して、<p>に折り返したい幅のwidthを、marginで余白を指定する方法がいいのでしょうか? 出来れば<p>要素へのcss指定だけで完結させたいのですが、方法がわかりません。 どなたか初心者にもわかりやすくご教授いただけないでしょうか?? どうかよろしくお願い致します!

    • ベストアンサー
    • CSS
  • CSSで文字が縮まらない方法

    CSSの初心者です。 不明点があるので教えてください。 1.テーブルに文字を入力してあります。 ウィンドウサイズの大きさを小さくするとそのテーブルの 文字も縮まります。 私は日本人です。 ↓↓↓ 私 は 日 本 人 で す。 みたいになります。 ウィンドウサイズを小さくしても縦表示にならない方法は ありますでしょうか? 2.↑と類似質問になりますが、tdで幅指定(px)はできますよね? 自分がもっているCSS辞典には td {width: 200px;} がなく、 table {width: 200px;} しか掲載されていません。 やはりpx指定してもウィンドウサイズが小さくなるとその大きさを 維持できなくなるのでしょうか? HTMLのようになかなか思うような表示にならず細かいところで 苦労しています。

  • htmlとcssのデザインについて

    Webサイトでデザインをする際に、cssを利用すると<table>タグ不要でテーブルデザインできるようです。個人的には色やフォントに限定してcssを適用しています。古いブラウザで見れないなどのデメリットがありますが、今後はcssでデザインをするのが一般的になるのでしょうか? 個人的にはcssで全てを作ると可読性が悪くなるような気がするのですが。。。

    • ベストアンサー
    • HTML
  • htmlを使って表を作っています

    自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか?わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか? 練習問題と自分が作ったソース載せます。 <html> <h4><b>1問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">~</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 <第一問:幅400、高さ400、上のセルの数が2つ、下のセルの数が2つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。> どうですか?うまく表示されましたか? レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">~</table> ・<tr bgcolor="★">~</tr> ・<td bgcolor="★">~</td> ★には色指定値(例:#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列(一行)に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 <第二問:幅50、高さ50、1つのセルのテーブル全体の背景を赤くしてみましょう。      赤→#ff0000> <第三問:幅150、高さ100、上のセルを3つ、下のセルを3つのテーブルを作り、      上3つのセルの背景を青くしてみましょう。      青→#0000ff> <第四問:幅100、高さ100、上のセルを2つ、下のセルを2つのテーブルを作り、      左上のセルの背景を緑にしてみましょう。      緑→自分で見つけて下さい>

  • strictのスタイルシートについて教えて下さい。

    初めて書き込みます。 現在、文字4サイズについて、行間、フォントの種類が指定された、4つのブラウザに対応させた4枚のcssファイルを読み込む形でHPを作成中です。 現在html4.01strictで作っています。 まだ、あまり経験がないため、tableの各セルに 対して文字のサイズや色を指定する方法がわかりません。 pタグを使ってしまうと、<pタグは使えません>と チェッカーでひっかかってしまいます。 ちなみに4枚の各ブラウザに対応したcssの内容に 手を加えることはいけないとデータを作った人から 言われています。 分かる方、教えて下さい。お願いいたします。

    • ベストアンサー
    • HTML
  • 表の考えかた

    ホームページビルダーを使っています。 どうも表については、いまいち理解しづらいのですが・・・ 次の考え方は合っていますか?(pixelで指定してます) [表の幅]は・・・ [罫線の幅] + [セル内の余白] + [枠の幅] + [セルの幅] ----------------------------- たとえば、2列の表の場合 [罫線の幅] =2 [セル内の余白] =3 [枠の幅] =2 [セルの幅] =100 ・・・と指定したとき、実際の幅は [罫線の幅]   =2 → 2×2=4 [セル内の余白] =3 → 3×4=12 [枠の幅]    =2 → 2×2=4 [セルの幅]   =100→ 100×2=200 以上合計すると[表の幅]は 4 + 12 + 4 + 200 = 220 ・・・ということになりますか?

  • <table>でセルをきっちり分けるには

    最近CSSばかり使ってtableがよくわからないのですが、tableのセルのサイズを挿入する文字の数に限らず常に一定にするにはどんな方法があるでしょうか? 例えば600pxのtableに2列のセルを入れるにはそれぞれのセルに300pxを指定する方法もありますが、CSSでtableのtdタグに50%のwidthプロパティを指定しても問題ないでしょうか?

    • ベストアンサー
    • CSS